jQuery Mobile bietet eine Reihe von Symbolen, die Ihre Tasten aussehen wünschenswert machen.
Hinzufügen von Symbolen zu jQuery Mobile Buttons
So fügen Sie ein Symbol , um Ihre Schaltfläche, verwenden Sie die ui-icon Klasse, und positionieren Sie das Symbol mit einem Symbol Position Klasse (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Hinweis: Für die anderen Tasten, wie Schaltflächen in Listenansichten und Formen, können Sie die Daten-Symbol - Attribut verwenden müssen. Dies wird in einem späteren Kapitel erläutert.
Im Folgenden einige der verfügbaren Symbole aufgeführt haben, die jQuery Mobile bieten:
| Icon-Klasse | Beschreibung | Symbol | Beispiel |
|---|---|---|---|
| ui-icon-arrow-l | Linker Pfeil | Versuch es | |
| ui-icon-arrow-r | Rechter Pfeil | Versuch es | |
| ui-icon-info | Information | Versuch es | |
| ui-icon-delete | Löschen | Versuch es | |
| ui-icon-back | Zurück | Versuch es | |
| ui-icon-audio | Lautsprecher | Versuch es | |
| ui-icon-lock | Vorhängeschloss | Versuch es | |
| ui-icon-search | Suche | Versuch es | |
| ui-icon-alert | Aufmerksam | Versuch es | |
| ui-icon-grid | Gitter | Versuch es | |
| ui-icon-home | Zuhause | Versuch es |
Eine vollständige Referenz aller jQuery Mobile Button Icons, gehen Sie bitte auf unsere jQuery Mobile Icons Referenz .
Positionierung Icons
Sie können einen von vier Werten angeben , für , wo das Symbol sollte in der Taste positioniert werden: top, right, bottom oder left .
Verwenden Sie die ui-btn-icon Klasse , um die Position zu spezifizieren:
Icon Position für Link Buttons
<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>
Versuch es selber " Wenn Sie nicht die Position des Symbols für Link-Tasten angeben, wird das Symbol nicht angezeigt.
Es werden nur das Symbol
Um nur das Symbol anzuzeigen, verwenden Sie "notext" als Wert für das Symbol Position:
Beispiel
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Versuch es selber " Entfernen von The Circle
Standardmäßig haben alle Symbole einen grauen Kreis (Disc) um sie herum. Um den Kreis zu entfernen, fügen Sie den "ui-nodisc-icon" Klasse auf das Element oder sein Behälter:
Beispiel
<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>
Versuch es selber " Black or White Icons
Standardmäßig sind alle Symbole weiß. Um das Symbol Farbe auf Schwarz zu ändern, fügen Sie den "ui-alt-icon" auf das Element oder sein Behälter:
Beispiel
<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>
Versuch es selber " Mehr Beispiele
Fügen Sie den "ui-nodisc-icon" Klasse in einen Behälter
Ein Beispiel für die "ui-nodisc-icon" Klasse hinzugefügt , um einen Container.
Fügen Sie den "ui-alt-icon" Klasse in einen Behälter
Ein Beispiel für die "ui-alt-icon" Klasse hinzugefügt , um einen Container.