jQuery Mobile -painikekuvakkeet

jQuery Mobile tarjoaa kuvakkeiden joukon, joka tekee painikkeistasi houkuttelevampia.

Lisää kuvake jQuery Mobile -painikkeeseen

Jos haluat lisätä kuvakkeen painikkeeseesi, käytä data-icon-ominaisuutta:

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

Vinkki:Voit myös käyttää data-icon-ominaisuutta <button> tai <input>-elementissä.

Alla luetellaan joitakin jQuery Mobile:n tarjoamia saatavilla olevia kuvakkeita:

Ominaisuusarvo Kuvaus Kuvake Esimerkki
data-icon="arrow-l" Vasen nuoli Testi
data-icon="arrow-r" Oikea nuoli Testi
data-icon="delete" Poista Testi
data-icon="info" Tiedot Testi
data-icon="home" Etusivu Testi
data-icon="back" Takaisin Testi
data-icon="search" Haku Testi
data-icon="grid" Verkkokartta Testi

Jos tarvitset täydellistä tietoa jQuery Mobile -painikkeiden kuvakkeista, vieraile jQuery Mobile kuvakkeiden viittausoppaasti.

Kuvakkeen sijoittaminen

Voit myös määrittää kuvakkeen sijoituksen: ylös, oikealle, alas tai vasemmalle.

Käytä data-iconpos-ominaisuutta sijainnin määrittämiseen:

Kuvakkeen sijainti:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">ylölle</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">oikealle</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">alla</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Vasemmalle</a>

Kokeile itse

Vinkki:Oletuksena kaikki kuvakkeet sijoitetaan vasemmalle kaikissa painikkeissa.

Näytä vain kuvake

Jos haluat näyttää vain kuvakkeen, aseta data-iconpos arvoksi "notext":

Takaisin:

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

Kokeile itse