jQuery Mobile Button Symbole

Ein Satz Symbole von jQuery Mobile macht Ihre Buttons attraktiver.

Symbol hinzufügen zu jQuery Mobile Buttons

Fügen Sie Ihrem Button ein Symbol hinzu, indem Sie das Attribut data-icon verwenden:

<a href="#anylink" data-role="button" data-icon="search">Suche</a>

Tipp:Sie können auch das Attribut data-icon in den <button> oder <input>-Elementen verwenden.

Nachstehend haben wir einige verfügbare Symbole von jQuery Mobile aufgelistet:

Attributwert Beschreibung Symbol Beispiel
data-icon="arrow-l" Linker Pfeil Test
data-icon="arrow-r" Rechter Pfeil Test
data-icon="delete" Löschen Test
data-icon="info" Information Test
data-icon="home" Startseite Test
data-icon="back" Zurück Test
data-icon="search" Suche Test
data-icon="grid" Gitter Test

Für detaillierte Informationen zu den jQuery Mobile Button Symbolen besuchen Sie bitte unsere jQuery Mobile Symbol Referenzhandbuch.

Symbolpositionierung

Sie können auch die Position des Symbols bestimmen: oben, rechts, unten oder links.

Verwenden Sie das Attribut data-iconpos, um die Position zu bestimmen:

Symbolposition:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">oben
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">rechts
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">unter
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Links</a>

Probieren Sie es selbst aus

Tipp:Standardmäßig werden die Symbole in allen Schaltflächen links positioniert.

Nur Symbol anzeigen

Wenn nur ein Symbol angezeigt werden soll, setzen Sie data-iconpos auf "notext":

Zurück:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Suche</a>

Probieren Sie es selbst aus