jQuery Mobile Button Icons

jQuery Mobile bietet eine Reihe von Tasten aussehen wünschenswert Symbol lässt.

Button-Symbole zu jQuery Mobile hinzufügen

Wir können die Klasse ui-Symbol verwenden, um ein Symbol auf die Schaltfläche hinzufügen, und die Taste eingestellt werden kann die angegebene Klasse.

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

Hinweis: Auf der anderen Wege - Tasten, wie eine Liste oder eine Form von Schaltflächen Daten-Symbol - Attribut verwenden. Im nächsten Abschnitt werden wir spezifische einführen.

Nachfolgend listen wir einige der verfügbaren Symbole jQuery Mobile bietet:

Button-Klasse	Beschreibung	Beispiele
ui-icon-arrow-l	Pfeil nach links	versuchen
ui-icon-arrow-r	Pfeil nach rechts	versuchen
ui-icon-info	Information	versuchen
ui-icon-löschen	löschen	versuchen
ui-icon-back	Rückzug	versuchen
ui-icon-Audio	Lautsprecher	versuchen
ui-icon-lock	Vorhängeschloss	versuchen
ui-icon-Suche	Suche	versuchen
ui-icon-Alarm	Warnung	versuchen
ui-icon-Gitter	Gitter	versuchen
ui-icon-home	Zuhause	versuchen

Eine vollständige Referenzhandbuch für alle Tastensymbole jQuery Mobile, besuchen Sie unsere jQuery Mobile Symbol - Referenzhandbuch .

Standort icon

die oben (oben), rechte Seite (rechts), am Boden (unten), die links (links): Sie können auch ein Symbol positioniert, in welcher Position Taste angeben.

Bitte benutzen Sie den ui-btn-Symbol Attribut den Speicherort angeben:

Icon Lage:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top"> oben </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right"> rechte Seite </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom"> unten </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> linken Seite </a>

Versuchen »

	Wenn Sie nicht die Position der Schaltfläche Bild angeben, wird das Symbol nicht angezeigt werden.

Nur Symbol

Wenn Sie das Symbol angezeigt werden soll, können Sie die "notext" verwenden:

Beispiel:

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

Versuchen »

Entfernen Sie den Kreis

Standardmäßig werden alle Symbole haben einen grauen Kreis. Wenn Sie es nicht brauchen, können Sie das Element "ui-NoDisc-Symbol" Kategorie verwenden:

Beispiele

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> Verwendung Kreis (default) </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon"> den Kreis </a> entfernen

Versuchen »

Schwarz, weiß Taste

Standardmäßig sind alle Symbole weiß. Wenn Sie das Symbol die Farbe ist schwarz ändern müssen, können Sie "ui-alt-Symbol" in Elemente hinzufügen:

Beispiele

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> weiß </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon"> Schwarz </a>

Versuchen »