jQuery Icone
Per aggiungere un'icona alla <a> e <button> elementi in jQuery Mobile, utilizzare la classe icona e posizionare l'icona come mostrato di seguito (l'unica eccezione è pulsanti in navbars, che sono indicati più in basso):
<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left ">Refresh Page</a>
Try it
<button class="ui-btn ui-icon-refresh ui-btn-icon-left ">Refresh Page</button>
Try it
Per aggiungere un'icona per i tuoi <input> pulsanti, utilizzare il data-icon attributi:
<input type="button" value="Refresh page" data-icon="refresh" >
Try it
Per aggiungere un'icona per i pulsanti della barra di navigazione, utilizzare l'attributo data-icona:
<a href="#anylink" data-icon="refresh" >Refresh Page</a>
Try it
Per aggiungere un'icona per i pulsanti della lista, utilizzare l'attributo data-icona <li> :
<li data-icon="refresh" ><a href="#">Click me</a></li>
Try it
Qui di seguito abbiamo elencato tutte le icone disponibili che jQuery Mobile fornisce:
| Valore | Descrizione | Icona | Esempio |
|---|---|---|---|
| action | Azione (freccia rivolta in senso orario da una scatola) | Provalo | |
| alert | alert | Provalo | |
| audio | Audio / audio / altoparlanti | Provalo | |
| arrow-d-l | Freccia verso il basso a sinistra | Provalo | |
| arrow-d-r | Freccia verso il basso a destra | Provalo | |
| arrow-u-l | Freccia verso l'alto a sinistra | Provalo | |
| arrow-u-r | Freccia che indica verso l'alto a destra | Provalo | |
| arrow-l | Freccia rivolta verso sinistra | Provalo | |
| arrow-r | Freccia verso destra | Provalo | |
| arrow-u | Freccia verso l'alto | Provalo | |
| arrow-d | Freccia verso il basso | Provalo | |
| back | Indietro (freccia curva rivolta verso l'alto in senso antiorario) | Provalo | |
| bars | Bar (tre barre orizzontali oltre l'un l'altro) | Provalo | |
| bullets | Bullets (tre proiettili orizzontali oltre l'un l'altro) | Provalo | |
| calendar | calendar | Provalo | |
| camera | camera | Provalo | |
| carat-d | Carat rivolta verso il basso | Provalo | |
| carat-l | Carat punta a sinistra | Provalo | |
| carat-r | Carat che punta verso destra | Provalo | |
| carat-u | Carat rivolta verso l'alto | Provalo | |
| check | Segno di spunta | Provalo | |
| clock | clock | Provalo | |
| cloud | cloud | Provalo | |
| comment | comment | Provalo | |
| delete | Elimina (X) | Provalo | |
| edit | Modifica / Pencil | Provalo | |
| eye | eye | Provalo | |
| forbidden | segno severo | Provalo | |
| forward | forward | Provalo | |
| gear | gear | Provalo | |
| grid | grid | Provalo | |
| heart | Cuore / Simbolo di amore | Provalo | |
| home | home | Provalo | |
| info | Informazioni | Provalo | |
| location | Posizione / GPS | Provalo | |
| lock | Blocco / lucchetto | Provalo | |
| Posta / Lettera | Provalo | ||
| minus | minus | Provalo | |
| navigation | navigation | Provalo | |
| phone | Telefono | Provalo | |
| power | Potenza (on / off) | Provalo | |
| plus | plus | Provalo | |
| recycle | recycle | Provalo | |
| refresh | refresh | Provalo | |
| search | search | Provalo | |
| shop | Negozio / Pag / borsa | Provalo | |
| star | star | Provalo | |
| tag | tag | Provalo | |
| user | Utente / Persona | Provalo | |
| video | Videocamera | Provalo |