Πλοηγητική Στήλη του jQuery Mobile

Πλοηγητική Στήλη του jQuery Mobile

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

Εξ ορισμού, οι σύνδεσμοι στο μενού πλοήγησης θα μετατραπούν αυτόματα σε κουμπιά (χωρίς να χρειάζεται data-role="button").

Χρησιμοποιήστε την ιδιότητα data-role="navbar" για να ορίσετε το μενού πλοήγησης:

παράδειγμα

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Αρχική σελίδα</a></li>
      <li><a href="#anylink">Σελίδα δύο</a></li>
      <li><a href="#anylink">Αναζήτηση</a></li>
    </ul>
  </div>
</div>

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

Σημείωση:Το πλάτος του κουμπιού, εξ ορισμού, είναι ίσο με το περιεχόμενό του. Χρησιμοποιήστε μη καρτελόσχημο κατάλογο για ομοιόμορφη κατανομή των κουμπιών: ένα κουμπί καταλαμβάνει 100% του πλάτους, δύο κουμπιά μοιράζονται το 50% του πλάτους, τρία κουμπιά 33.3%, και ούτω καθεξής. Ωστόσο, αν έχετε πέντε ή περισσότερα κουμπιά στο μενού πλοήγησης, θα στρογγυλοποιηθούν σε πολλαπλά επίπεδα (βλέπε το παράδειγμα στο κάτω μέρος της σελίδας "Περισσότερα παραδείγματα").

Ενεργό κουμπί

Όταν η σύνδεσμος στο μενού πλοήγησης χτυπηθεί, αποκτά την εμφάνιση επιλογής (επιλεγμένο).

Αν θέλετε να επιτύχετε αυτή την εμφάνιση χωρίς να χτυπήσετε τη σύνδεσμο, χρησιμοποιήστε την κλάση "ui-btn-active":

παράδειγμα

<li><a href="#anylink" class="ui-btn-active">Αρχική Σελίδα</a></li>

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

Για πολλαπλές σελίδες, μπορεί να χρειάζεστε να ρυθμίσετε το εμφάνιση "επιλεγμένο" για κάθε κουμπί, για να δείξετε ότι ο χρήστης περιηγείται στη σελίδα. Αν θέλετε να το κάνετε αυτό, προσθέστε τις κλάσεις "ui-state-persist" και "ui-btn-active" στην σύνδεσμο:

παράδειγμα

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Αρχική Σελίδα</a></li>

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

Περισσότερα παραδείγματα

Στήλη πλοήγησης στο περιεχόμενο
Πώς να προσθέσετε τη στήλη πλοήγησης στο data-role="content".
Στήλη πλοήγησης στο πιεστήρα
Πώς να προσθέσετε τη στήλη πλοήγησης στο πιεστήρα.
Τοποθέτηση εικονιδίων στη στήλη πλοήγησης
Πώς να τοποθετήσετε εικονίδια εντός της στήλης πλοήγησης στο πιεστήρα.
Πέντε ή περισσότερα κουμπιά
Δείγμα δέκα κουμπιών στη στήλη πλοήγησης.