Δίκτυα του jQuery Mobile

jQuery Mobile έργο δίκτυου

Το jQuery Mobile παρέχει ένα σύνολο διατάξεων στήλης βασισμένο στο CSS. Ωστόσο, συνήθως δεν συνιστάται η χρήση διατάξεων στήλης σε φορητές συσκευές λόγω των περιορισμών του πλάτους οθόνης των φορητών συσκευών.

Αλλά μερικές φορές χρειάζεστε να τοποθετήσετε μικρότερα στοιχεία, όπως κουμπιά ή πλοήγηση, όπως σε μια τραπεζική τάβλα και παράλληλα. Σε αυτή την περίπτωση, η διάταξη στήλης είναι κατάλληλη.

Οι στήλες στο δίκτυο είναι ίσες (το συνολικό πλάτος είναι 100%), χωρίς όρια, χρώμα φόντου, περιθώρια ή περιθώρια.

Διαθέσιμες είναι τέσσερις τύπους διάταξης δίκτυου:

κλάση δίκτυου στήλη πλάτος στήλης ταιριάζει παράδειγμα
ui-grid-a 2 50% / 50% ui-block-a|b Δοκιμή
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Δοκιμή
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Δοκιμή
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Δοκιμή

Συμβουλή:Στην θυρίδα στήλης, ανάλογα με τον αριθμό των στηλών, τα υποστοιχεία μπορούν να ρυθμιστούν με την κλάση ui-block-a|b|c|d|e. Αυτές οι στήλες θα πλαισιώνονται ομαλά.

Παράδειγμα 1: Για την κλάση ui-grid-a (δύοπτυχο διάταξη), πρέπει να καθορίσετε δύο υποστοιχεία ui-block-a και ui-block-b.

Παράδειγμα 2: Για την κλάση ui-grid-b (τρίπτυχο διάταξη), προσθέστε τρεις υποστοιχεία ui-block-a, ui-block-b και ui-block-c.

Προσαρμογή δίκτυου

Μπορείτε να προσαρμόσετε τα μπλοκ στήλης χρησιμοποιώντας CSS:

παράδειγμα

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

Προσπαθήστε να το δοκιμάσετε προσωπικά

Μπορείτε επίσης να προσαρμόσετε τα μπλοκ χρησιμοποιώντας inline στυλ:

<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>

Πολλαπλές γραμμές

Είναι δυνατό να περιέχει πολλές γραμμές και στη στήλη.

Σημείωση:ui-block-a-class θα δημιουργεί πάντα νέα γραμμή:

παράδειγμα

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Κάποιο κείμενο</span></div>
  <div class="ui-block-b"><span>Κάποιο κείμενο</span></div>
  <div class="ui-block-c"><span>Κάποιο κείμενο</span></div>
  <div class="ui-block-a"><span>Κάποιο κείμενο</span></div>
  <div class="ui-block-b"><span>Κάποιο κείμενο</span></div>
  <div class="ui-block-a"><span>Κάποιο κείμενο</span></div>
</div>

Προσπαθήστε να το δοκιμάσετε προσωπικά