jQuery Mobile -painikkeet

Liikkuvat sovellukset rakentuvat kosketusliikkeiden mukavuuden varaan.

Luoda painikkeita jQuery Mobile -ympäristössä

jQuery Mobile -painikkeet voidaan luoda kolmella tavalla:

  • Käytä <button> -elementtiä
  • Käytä <input> -elementtiä
  • Käytä data-role="button" -ominaisuutta sisältävää <a> -elementtiä

<button>

<button>按钮</button>

Kokeile itse

<input>

<input type="button" value="Painike">

Kokeile itse

<a>

<a href="#" data-role="button">Painike</a>

Kokeile itse

Vinkki:jQuery Mobile antaa painikkeille automaattisesti tyylejä, mikä parantaa niiden vuorovaikutus- ja käyttöystävällisyyttä mobiililaitteilla. Suosittelemme käyttämään data-role="button" ominaisuuden <a> elementtiä luodaksesi linkkejä sivujen välillä, ja <input> tai <button> elementtejä lomakkeen lähettämiseen.

Navigaatiopainikkeet

Jos haluat linkittää sivut painikkeilla, käytä data-role="button" ominaisuuden <a> elementtiä:

Esimerkki

<a href="#pagetwo" data-role="button">Siirry sivulle kaksi</a>

Kokeile itse

Rivittäiset painikkeet

Oletuksena painikkeet vievät koko näytön leveyden. Jos haluat, että painike sopeutuu sisältöönsä tai jos haluat näyttää kaksi tai useampaa painiketta rinnakkain, lisää data-inline="true":

Esimerkki

<a href="#pagetwo" data-role="button" data-inline="true">Siirry sivulle kaksi</a>

Kokeile itse

Yhdistetyt painikkeet

jQuery Mobile tarjoaa yksinkertaisen tavan yhdistää painikkeita.

Käytä yhdessä data-role="controlgroup" ominaisuutta ja data-type="horizontal|vertical" määrittääksesi, miten painikkeet yhdistetään horisontaalisesti tai pystysuunnassa:

Esimerkki

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Painike 1</a>
  <a href="#anylink" data-role="button">Painike 2</a>
  <a href="#anylink" data-role="button">Painike 3</a>
</div>

Kokeile itse

Vinkki:Oletuksena yhdistetyt painikkeet ovat pystysuunnassa ryhmitettyjä, eikä niillä ole ulkopuolista reunaa tai tyhjyttä. Lisäksi vain ensimmäinen ja viimeinen painike omaavat pyöreät kulmat, mikä luo kauniin ulkoasun yhdistettynä.

Takaisin-painike

Jos haluat luoda takaisin-painikkeen, käytä data-rel="back" ominaisuutta (se sivuuttaa ankkurin href-arvon):

Esimerkki

<a href="#" data-role="button" data-rel="back">Palaa</a>

Kokeile itse

Lisää data-* ominaisuudet, jotka käytetään yleensä painikkeissa

Ominaisuus Arvo Kuvaus Esimerkki
data-corners true | false Määrittää, onko painikkeella kulmat. Testi
data-mini true | false Määrittää, onko painike pieni. Testi
data-shadow true | false Määrittää, onko painikkeella varjo. Testi

Jos tarvitset täydellistä tietoa jQuery Mobile data-* -ominaisuuksista, vieraile jQuery Mobile Data -ominaisuuksien viittausopas.

Seuraava osa näyttää, miten lisätään kuvakkeita painikkeisiin.