jQuery Mobile icone dei pulsanti

jQuery Mobile fornisce una serie di pulsanti consente di guardare icona più desiderabile.

Pulsante per aggiungere icone per jQuery Mobile

Siamo in grado di utilizzare l'interfaccia utente-icona di classe per aggiungere un'icona per il pulsante e il pulsante può essere impostato utilizzando la classe specificata.

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Nota: su altri pulsanti modo, ad esempio un elenco o una forma di pulsanti utilizzano attributo data-icona. Nella prossima sezione verranno introdotti specifici.

Qui di seguito elenchiamo alcune delle icone disponibili jQuery Mobile fornisce:

classe Button	descrizione	Esempi
ui-icon-freccia-l	Freccia sinistra	provare
ui-icon-freccia-r	freccia a destra	provare
ui-icon-info	informazioni	provare
ui-icon-delete	cancellare	provare
ui-icon-back	ritiro	provare
ui-icon-audio	altoparlante	provare
ui-icon-lock	lucchetto	provare
ui-icon-ricerca	ricerca	provare
ui-icon-alert	avvertimento	provare
ui-icon-grid	maglia	provare
ui-icon-casa	casa	provare

Per un manuale di riferimento completo per tutte le icone dei pulsanti jQuery Mobile, visitare il nostro jQuery Mobile Manuale icona di riferimento .

Località icona

È inoltre possibile specificare un'icona posizionata nel pulsante che posizione: la parte superiore (in alto), a destra (a destra), in basso (in basso), la sinistra (a sinistra).

Si prega di utilizzare l'attributo-icon ui-btn per specificare la posizione:

Icona Località:

<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"> lato destro </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom"> fondo </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> sinistra lato </a>

Prova »

	Se non si specifica la posizione dell'immagine tasto, non verrà visualizzata l'icona.

Mostra solo icona

Se si desidera visualizzare l'icona, è possibile utilizzare il "notext":

esempio:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext"> Ricerca </a>

Prova »

Rimuovere il cerchio

Per impostazione predefinita, tutte le icone hanno un cerchio grigio. Se non ne hai bisogno, è possibile utilizzare la categoria di elementi "ui-NoDisc-icona":

Esempi

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> uso cerchio (default) </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon"> rimuovere il cerchio </a>

Prova »

pulsante nero, bianco

Per impostazione predefinita, tutte le icone sono di colore bianco. Se è necessario cambiare il colore dell'icona è nero, è possibile aggiungere "ui-alt-icona" in elementi:

Esempi

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> bianco </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon"> nero </a>

Prova »