jQuery Mobile fornisce un set di icone che renderanno i pulsanti sembrano più desiderabile.
Aggiunta di icone per jQuery Mobile Pulsanti
Per aggiungere un'icona per il pulsante, utilizzare l' ui-icon di classe, e posizionare l'icona con una classe di posizione un'icona (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Nota: Per gli altri tasti, come i pulsanti nelle visualizzazioni elenco e le forme, è necessario utilizzare l'attributo data-icona. Questo verrà spiegato in un capitolo successivo.
Qui di seguito abbiamo elencato alcune icone disponibili che jQuery Mobile forniscono:
| classe icona | Descrizione | Icona | Esempio |
|---|---|---|---|
| ui-icon-arrow-l | Freccia sinistra | Provalo | |
| ui-icon-arrow-r | Freccia destra | Provalo | |
| ui-icon-info | Informazioni | Provalo | |
| ui-icon-delete | cancellare | Provalo | |
| ui-icon-back | Indietro | Provalo | |
| ui-icon-audio | Altoparlanti | Provalo | |
| ui-icon-lock | Lucchetto | Provalo | |
| ui-icon-search | Ricerca | Provalo | |
| ui-icon-alert | Mettere in guardia | Provalo | |
| ui-icon-grid | Griglia | Provalo | |
| ui-icon-home | Casa | Provalo |
Per un riferimento completo di tutte le icone dei pulsanti jQuery Mobile, si prega di visitare il nostro jQuery Mobile icone di riferimento .
posizionamento Icone
È possibile specificare uno dei quattro valori per cui l'icona deve essere posizionato nel pulsante: top, right, bottom o left .
Utilizzare il ui-btn-icon classe per specificare la posizione:
Icona di posizione per pulsanti di collegamento
<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>
Prova tu stesso " Se non si specifica la posizione icona pulsanti di collegamento, non verrà mostrato l'icona.
Visualizzazione solo l'icona
Per visualizzare solo l'icona, utilizzare "notext" come valore per la posizione icona:
Esempio
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Prova tu stesso " Rimozione Il Cerchio
Per impostazione predefinita, tutte le icone hanno un cerchio grigio (disco) che li circonda. Per rimuovere il cerchio, aggiungere il "ui-nodisc-icon" classe per l'elemento o il suo contenitore:
Esempio
<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>
Prova tu stesso " Icone nero o bianco
Per impostazione predefinita, tutte le icone sono di colore bianco. Per cambiare il colore icona per il nero, aggiungere il "ui-alt-icon" all'elemento o il suo contenitore:
Esempio
<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>
Prova tu stesso " Altri esempi
Aggiungere il "ui-nodisc-icon" di classe a un contenitore
Un esempio di "ui-nodisc-icon" class aggiunto al contenitore.
Aggiungere il "ui-alt-icon" di classe a un contenitore
Un esempio di "ui-alt-icon" class aggiunto al contenitore.