jQuery Mobile-knappikoner
- Föregående sida jQuery Mobile button
- Nästa sida jQuery Mobile toolbar
Ett fullt utbud av ikoner från jQuery Mobile kan göra dina knappar mer attraktiva.
Lägg till ikon till jQuery Mobile-knappar
För att lägga till en ikon till din knapp, använd egenskapen data-icon:
<a href="#anylink" data-role="button" data-icon="search"
>Sök</a>
Tips:Du kan också använda egenskapen data-icon i <button> eller <input>-element.
Nedan har vi listat några tillgängliga ikoner som jQuery Mobile erbjuder:
Egenskapsvärde | Beskrivning | Ikoner | Exempel |
---|---|---|---|
data-icon="arrow-l" | Vänsterpil | Test | |
data-icon="arrow-r" | Högerpil | Test | |
data-icon="delete" | Radera | Test | |
data-icon="info" | Information | Test | |
data-icon="home" | Hem | Test | |
data-icon="back" | Tillbaka | Test | |
data-icon="search" | Sök | Test | |
data-icon="grid" | Galleri | Test |
För fullständig information om jQuery Mobile-knappikoner, besök vår jQuery Mobile ikonreferenshandbok。
Positionera ikon
Du kan också definiera var ikonen placeras: uppe, höger, ned eller vänster.
Använd egenskapen data-iconpos för att definiera position:
Ikonsposition:
<a href="#link" data-role="button" data-icon="search"data-iconpos="top"
>uppe</a> <a href="#link" data-role="button" data-icon="search"data-iconpos="right"
>höger</a> <a href="#link" data-role="button" data-icon="search"data-iconpos="bottom"
>ned</a> <a href="#link" data-role="button" data-icon="search"data-iconpos="left"
>Vänster</a>
Tips:Som standard placeras ikonerna till vänster i alla knappar.
Visa endast ikoner
Om du bara vill visa ikoner, sätt data-iconpos till "notext":
Tillbaka:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext"
>Sök</a>
- Föregående sida jQuery Mobile button
- Nästa sida jQuery Mobile toolbar