Κουμπιά jQuery Mobile

Οι εφαρμογές για κινητές συσκευές χτίζονται πάνω στην ευκολία των επαφών με το άκρο του δακτυλού

Δημιουργία καταστημάτων στο jQuery Mobile

Τα κατάστηματα του jQuery Mobile μπορούν να δημιουργηθούν με τρεις τρόπους:

  • Χρήση του στοιχείου <button>
  • Χρήση του στοιχείου <input>
  • Χρήση του στοιχείου <a> με την ιδιότητα data-role="κατάστημα"

<button>

<button>κατάστημα</button>

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

<input>

<input type="button" value="Κουμπί">

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

<a>

<a href="#" data-role="button"> Κουμπί</a>

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

Συμβουλή:Τα κουμπιά του jQuery Mobile αποκτούν αυτόματα στυλ, ενισχύοντας την αλληλεπίδραση και την εύκολη πρόσβαση στα κινητά συσκευές. Προτείνουμε να χρησιμοποιείτε το στοιχείο <a> με την ιδιότητα data-role="button" για τη δημιουργία συνδέσμων μεταξύ σελίδων, ενώ τα στοιχεία <input> ή <button> χρησιμοποιούνται για την υποβολή φόρμας.

Κουμπιά πλοήγησης

Για να συνδέσετε σελίδες μέσω κουμπιών, χρησιμοποιήστε το στοιχείο <a> με την ιδιότητα data-role="button":

Παράδειγμα

<a href="#pagetwo" data-role="button"> Μεταφορά στην σελίδα δύο</a>

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

Κουμπιά εντός γραμμής

Προεπιλεγμένα, τα κουμπιά καταλαμβάνουν την πλήρη πλάτος του οθόνης. Αν χρειάζεστε κουμπιά που προσαρμόζονται στο περιεχόμενό τους, ή αν χρειάζεστε δύο ή περισσότερα κουμπιά που εμφανίζονται παράλληλα, προσθέστε data-inline="true":

Παράδειγμα

<a href="#pagetwo" data-role="button" data-inline="true"> Μεταφορά στην σελίδα δύο</a>

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

Συνδυασμένα κουμπιά

Το jQuery Mobile παρέχει απλές μεθόδους για τη συνδυασμό των κουμπιών.

Χρησιμοποιήστε την ιδιότητα data-role="controlgroup" μαζί με data-type="horizontal|vertical", για να καθορίσετε την κάθετη ή οριζόντια συνδυασμό των κουμπιών:

Παράδειγμα

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Κουμπί 1</a>
  <a href="#anylink" data-role="button">Κουμπί 2</a>
  <a href="#anylink" data-role="button">Κουμπί 3</a>
</div>

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

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

Κουμπί πίσω

Για να δημιουργήσετε ένα κουμπί πίσω, χρησιμοποιήστε την ιδιότητα data-rel="back" (θα αγνοηθεί η τιμή href του αγκίστρου):

Παράδειγμα

<a href="#" data-role="button" data-rel="back"> Επιστροφή</a>

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

Περισσότερες χρήσεις των data-* ιδιοτήτων για κουμπιά

Ενέργεια Αξία Περιγραφή Παράδειγμα
data-corners true | false Ορίζει αν το κουμπί έχει γωνίες. Δοκιμή
data-mini true | false Ορίζει αν το κουμπί είναι μικρό. Δοκιμή
data-shadow true | false Ορίζει αν το κουμπί έχει σκιά. Δοκιμή

Για πλήρη πληροφορίες σχετικά με τα data-* attributes του jQuery Mobile, επισκεφθείτε τον ιστότοπό μας Πρόχειρο Εκπαιδευτικού Υλικού Ατрибούτων Data του jQuery Mobile.

Η επόμενη ενότητα δείχνει πώς να προσθέσετε εικονίδια στα κουμπιά.