jQuery Mobile knoppijcoons

Het set van iconen die jQuery Mobile biedt, maakt uw knoppen aantrekkelijker.

Icoon toevoegen aan jQuery Mobile knop

Om een icoon toe te voegen aan uw knop, gebruik dan de data-icon-eigenschap:

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

Tip:U kunt ook de data-icon-eigenschap gebruiken in <button> of <input>-elementen.

Hieronder hebben we enkele beschikbare iconen van jQuery Mobile opgesomd:

Waarde van eigenschap Beschrijving Icoon Voorbeeld
data-icon="arrow-l" Linkse pijl Test
data-icon="arrow-r" Rechte pijl Test
data-icon="delete" Verwijderen Test
data-icon="info" Informatie Test
data-icon="home" Startpagina Test
data-icon="back" Terug Test
data-icon="search" Zoeken Test
data-icon="grid" Raster Test

Voor volledige informatie over jQuery Mobile knoppijcoons, bezoek onze jQuery Mobile Icoon Handleiding.

Icoon positioneren

U kunt ook de positie van de icoon definiëren: boven, rechts, onder of links.

Gebruik de data-iconpos-eigenschap om de positie te definiëren:

Icoonpositie:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">boven</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">rechts</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">onder</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Left</a>

Try It Yourself

Tip:Standaard worden alle pictogrammen in alle knoppen links geplaatst.

Alleen pictogram weergeven

Als u alleen het pictogram wilt weergeven, stel dan data-iconpos in op "notext":

Back:

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

Try It Yourself