Εργαλείο Μπάρας του jQuery Mobile

Εργαλείο Μπάρας του jQuery Mobile

Τα στοιχεία εργαλείου συχνά τοποθετούνται στο κεφαλίδι και το πέλτη - για να επιτευχθεί η πλοήγηση "έχω επισκεφθεί":

Τίτλος στήλης

Το κεφαλίδι συχνά περιέχει τον τίτλο του κεφαλίδιου/ΛΟΓΟ ή ένα έως δύο κουμπιά (συνήθως κουμπιά Αρχική σελίδα, επιλογές ή αναζήτηση).

Μπορείτε να προσθέσετε κουμπιά στο αριστερό και/ή στο δεξί μέρος του κεφαλίδιου.

Ο παρακάτω κώδικας θα προσθέσει ένα κουμπί στο αριστερό και ένα κουμπί στο δεξί μέρος του κειμένου του τίτλου του κεφαλίδιου:

Παράδειγμα

<div data-role="header">
  <a href="#" data-role="button">Αρχική σελίδα</a>
  <h1>Καλωσορίσατε στη σελίδα μου</h1>
  <a href="#" data-role="button">Αναζήτηση</a>
</div>

Δοκιμάστε το προσωπικά

Το παρακάτω κώδικας θα προσθέσει ένα κουμπί στο αριστερό μέρος του τίτλου του κεφαλίδιου:

<div data-role="header">
  <a href="#" data-role="button">Αρχική σελίδα</a>
  <h1>Καλωσορίσατε στη σελίδα μου</h1>
</div>

Ωστόσο, αν τοποθετήσετε συνδέσμους κουμπιών μετά το στοιχείο <h1>, δεν θα εμφανίζονται στα δεξιά του κειμένου. Για να προσθέσετε κουμπιά στα δεξιά του τίτλου του κεφαλίδιου, καθορίστε το όνομα κλάσης "ui-btn-right":

Παράδειγμα

<div data-role="header">
  <h1>Καλωσορίσατε στη σελίδα μου</h1>
  <a href="#" data-role="button" class="ui-btn-right"> αναζήτηση</a>
</div>

Δοκιμάστε το προσωπικά

Συμβουλή:Το κεφαλίδι μπορεί να περιέχει ένα ή δύο κουμπιά, αλλά το πέλτη δεν έχει περιορισμούς.

Πίσω πέλτη

Σε σύγκριση με το κεφαλίδι, το πέλτη είναι πιο ελαστικό - είναι πιο πρακτικό και ποικίλο, οπότε μπορεί να περιέχει τον απαιτούμενο αριθμό κουμπιών:

Παράδειγμα

<div data-role="footer">
  <a href="#" data-role="button">Επεκδωμή στο Ζώνη Ξίνα</a>
  <a href="#" data-role="button">Επεκδωμή στο Ζώνη Ζεν</a>
  <a href="#" data-role="button">Επεκδωμή στο Ζώνη QQ</a>
</div>

Δοκιμάστε το προσωπικά

Σημείωση:Η μορφή του πίσω πόδιου είναι διαφορετική από αυτή της κεφαλίδας (θα αφαιρεθεί ο κάδμος και οι διαστήματα και τα κουμπιά δεν θα είναι κεντρικά). Για να διορθώσετε το πρόβλημα αυτό, ορίστε το όνομα κλάσης του πίσω πόδιου ως "ui-btn":

Παράδειγμα

<div data-role="footer" class="ui-btn">

Δοκιμάστε το προσωπικά

Μπορείτε επίσης να επιλέξετε να συνδυάσετε τους κουμπιά οριζόντια ή κάθετα στο πίσω πόδι:

Παράδειγμα

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Επεκδωμή στο Ζώνη Ξίνα</a>
    <a href="#" data-role="button" data-icon="plus">Επεκδωμή στο Ζώνη Ζεν</a>
    <a href="#" data-role="button" data-icon="plus">Επεκδωμή στο Ζώνη QQ</a>
  </div>
</div>

Δοκιμάστε το προσωπικά

Τοποθέτηση κεφαλίδας και πίσω πόδια

Υπάρχουν τρεις τρόποι για να τοποθετήσετε την κεφαλίδα και τα πίσω πόδια:

  • Τοποθέτηση εντός γραμμής - Προεπιλεγμένο. Η κεφαλίδα και τα πίσω πόδια βρίσκονται εντός της γραμμής του περιεχομένου της σελίδας.
  • Σταθερή - Η σελίδα και τα πίσω πόδια θα παραμείνουν στην κορυφή και στο κάτω μέρος της σελίδας.
  • Πλήρης οπτικοποίηση - Αναφέρεται στον τύπο fixed; Η σελίδα και τα πίσω πόδια θα παραμείνουν στην κορυφή και στο κάτω μέρος της σελίδας, αλλά επίσης πάνω από το περιεχόμενο της σελίδας. Είναι επίσης ελαφρώς διαφανές

Χρησιμοποιήστε την ιδιότητα data-position για να τοποθετήσετε την κεφαλίδα και τα πίσω πόδια της σελίδας:

Τοποθέτηση εντός γραμμής (προεπιλεγμένο)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Δοκιμάστε το προσωπικά

Σταθερή τοποθέτηση

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Δοκιμάστε το προσωπικά

Αν χρειάζεστε να ενεργοποιήσετε την πλήρη τοποθέτηση, χρησιμοποιήστε data-position="fixed" και προσθέστε την ιδιότητα data-fullscreen στο στοιχείο:

Πλήρης οπτικοποίηση τοποθέτησης

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Δοκιμάστε το προσωπικά

Συμβουλή:Το fullscreen είναι ιδανικό για φωτογραφίες, εικόνες και βίντεο.

Συμβουλή:Για τις τοποθεσίες fixed και fullscreen, η εμπλοκή του οθόνης θα κρύψει και θα εμφανίσει το κεφαλίδι και τα πόδια της σελίδας.