Εικονίδια κουμπιών jQuery Mobile

Το σύνολο των εικονιδίων που παρέχει το jQuery Mobile μπορεί να κάνει τα κουμπιά σας πιο ελκυστικά.

Προσθήκη εικονιδίου σε κουμπί jQuery Mobile

Για να προσθέσετε εικονίδιο στο κουμπί σας, χρησιμοποιήστε την ιδιότητα data-icon:

<a href="#anylink" data-role="button" data-icon="search">Αναζήτηση</a>

Συμβουλή:Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα data-icon σε στοιχεία <button> ή <input>.

Παρακάτω έχουμε καταγράψει μερικά από τα διαθέσιμα εικονίδια που παρέχει το jQuery Mobile:

Τιμή ιδιότητας Περιγραφή Εικονίδιο Παράδειγμα
data-icon="arrow-l" Αριστερός δείκτης Δοκιμή
data-icon="arrow-r" Δεξιός δείκτης Δοκιμή
data-icon="delete" Διαγραφή Δοκιμή
data-icon="info" Πληροφορίες Δοκιμή
data-icon="home" Αρχική σελίδα Δοκιμή
data-icon="back" Επιστροφή Δοκιμή
data-icon="search" Αναζήτηση Δοκιμή
data-icon="grid" Δίκτυο Δοκιμή

Για πλήρη πληροφορίες σχετικά με τα εικονίδια κουμπιών του jQuery Mobile, επισκεφθείτε το Εγχειρίδιο αναφοράς jQuery Mobile εικονιδίων。

Προσαρμογή εικονιδίου

Μπορείτε επίσης να καθορίσετε τη θέση του εικονιδίου: πάνω, δεξιά, κάτω ή αριστερά.

Χρησιμοποιήστε την ιδιότητα data-iconpos για να καθορίσετε τη θέση:

Τοποθεσία εικονιδίου:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">πάνω</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">δεξιά</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">κάτω</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Αριστερά</a>

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

Συμβουλή:Από προεπιλογή, όλα τα εικονίδια των κουμπιών τοποθετούνται αριστερά.

Μόνο εικονίδια

Αν θέλετε να εμφανίζεται μόνο το εικονίδιο, παρακαλώ ρυθμίστε το data-iconpos σε "notext":

Πίσω:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Αναζήτηση</a>

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