jQuery Mobile oferă un set de pictograme care vor face butoanele arate mai mult de dorit.
Adăugarea pictogramelor cu Butoane jQuery Mobile
Pentru a adăuga o pictogramă buton, folosește ui-icon clasă, și poziționați pictograma cu o clasă de poziție pictogramă (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Notă: Pentru alte butoane, cum ar fi butoanele din lista de vizualizări și formulare, trebuie să utilizați data-icon atribut. Acest lucru va fi explicat într-un capitol ulterior.
Mai jos am enumerat câteva pictograme disponibile, care oferă jQuery Mobile:
| clasa icon | Descriere | icoană | Exemplu |
|---|---|---|---|
| ui-icon-arrow-l | Sageata stanga | Incearca-l | |
| ui-icon-arrow-r | Sageata dreapta | Incearca-l | |
| ui-icon-info | informație | Incearca-l | |
| ui-icon-delete | Șterge | Incearca-l | |
| ui-icon-back | Înapoi | Incearca-l | |
| ui-icon-audio | Difuzoare | Incearca-l | |
| ui-icon-lock | Lacăt | Incearca-l | |
| ui-icon-search | Căutare | Incearca-l | |
| ui-icon-alert | Alerta | Incearca-l | |
| ui-icon-grid | Grilă | Incearca-l | |
| ui-icon-home | Acasă | Incearca-l |
Pentru o referință completă a tuturor butoanelor pictogramele jQuery Mobile, vă rugăm să mergeți la noastre jQuery Icoane mobile de referință .
Poziționarea Icoane
Puteți specifica una dintre cele patru valori pentru cazul în care pictograma trebuie să fie poziționat în butonul: top, right, bottom sau la left .
Utilizați ui-btn-icon clasa pentru a specifica poziția:
Icon Poziția pentru butoane Link
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
Încearcă - l singur » Dacă nu specificați poziția pictograma pentru butoanele de legătură, pictograma nu va fi afișată.
Afiseaza numai pictograma
Pentru a afișa numai pictograma, folosiți "notext" ca valoare pentru poziția pictogramă:
Exemplu
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Încearcă - l singur » Scoaterea Cercul
În mod implicit, toate icoanele au un cerc gri (disc) în jurul lor. Pentru a elimina cercul, adăugați "ui-nodisc-icon" clasa elementului sau a containerului acestuia:
Exemplu
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
Încearcă - l singur » Icoane negru sau alb
În mod implicit, toate icoanele sunt de culoare albă. Pentru a schimba culoarea la negru pictograma, adăugați "ui-alt-icon" pentru elementul sau containerul său:
Exemplu
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
Încearcă - l singur » Mai multe exemple
Adăugați "ui-nodisc-icon" clasa într - un container
Un exemplu de "ui-nodisc-icon" clasa adăugat într - un container.
Adăugați "ui-alt-icon" clasa de la un container
Un exemplu de "ui-alt-icon" clasa adăugat într - un container.