jQuery Mobile knapikoner

jQuery Mobiles sæt af ikoner kan gøre dine knapper mere attraktive.

Tilføj ikon til jQuery Mobile-knap

For at tilføje et ikon til din knap, brug data-icon-eegenskaben:

<a href="#anylink" data-role="button" data-icon="search">Søg</a>

Tip:Du kan også bruge data-icon-eegenskaben i <button> eller <input>-elementer.

Her er nogle af de ikoner, som jQuery Mobile tilbyder:

Egenskabsværdi Beskrivelse Billede Eksempel
data-icon="arrow-l" Venstre pille Test
data-icon="arrow-r" Højre pille Test
data-icon="delete" Slet Test
data-icon="info" Information Test
data-icon="home" Forside Test
data-icon="back" Tilbage Test
data-icon="search" Søg Test
data-icon="grid" Gitter Test

For fuld information om jQuery Mobile knapbilleder, besøg vores jQuery Mobile Billedhåndbog。

Billedeplacering

Du kan også definere, hvor billedet skal placeres: oppe, højre, ned eller venstre.

Brug data-iconpos-eegenskaben til at definere placering:

Billedplacering:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">oppe</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">højre</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">Venstre</a>

Prøv det selv

Tip:Standardmæssigt er ikonerne placeret til venstre i alle knapper.

Vis kun ikoner

Hvis du kun vil vise ikoner, skal du sætte data-iconpos til "notext":

Tilbage:

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

Prøv det selv