jQuery Mobile knappar

Mobila applikationer byggas på bekvämligheten med beröringsoperationer.

Skapa knappar i jQuery Mobile

Knappar i jQuery Mobile kan skapas på tre sätt:

  • Använd elementet <button>
  • Använd elementet <input>
  • Använd elementet <a> med data-role="button"

<button>

<button>knapp</button>

Prova själv

<input>

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

Prova själv

<a>

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

Prova själv

Tips:Knappar i jQuery Mobile får automatiskt stilar, vilket ökar deras interaktions- och användbarhet på mobila enheter. Vi rekommenderar att du använder <a> element med data-role="button" för att skapa länkar mellan sidor, medan <input> eller <button> element används för formulärinlämningar.

Navigationsknappar

För att länka sidor via knappar, använd <a> elementet med data-role="button":

Exempel

<a href="#pagetwo" data-role="button">Gå till sida två</a>

Prova själv

Inre knappar

Som standard fyller knappen hela skärmens bredd. Om du behöver att knappen anpassar sig till sitt innehåll eller om du behöver visa två eller flera knappar bredvid varandra, lägg till data-inline="true":

Exempel

<a href="#pagetwo" data-role="button" data-inline="true">Gå till sida två</a>

Prova själv

Kombinerade knappar

jQuery Mobile erbjuder en enkel metod för att gruppera knappar.

Använd data-role="controlgroup" egenskapen tillsammans med data-type="horizontal|vertical" för att specificera att knappar ska grupperas horisontellt eller vertikalt:

Exempel

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

Prova själv

Tips:Som standard är kombinerade knappar vertikalt grupperade, utan marginaler eller tom utrymme mellan dem. Och endast den första och sista knappen har rundade hörn, vilket skapar ett vackert utseende.

Tillbaka-knapp

För att skapa en tillbaka-knapp, använd data-rel="back" egenskapen (komplettera med ignore href-värdet på ankar):

Exempel

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

Prova själv

Mer används för data-* egenskaper på knappar

Egenskap Värde Beskrivning Exempel
data-corners true | false Definiera om knappen har rundade hörn. Test
data-mini true | false Definiera om det är en liten knapp. Test
data-shadow true | false Definiera om knappen har skugga. Test

För fullständig information om jQuery Mobile data-* egenskaper, besök vår jQuery Mobile Data egenskaper referens manual.

Nästa avsnitt visar hur du lägger till ikoner till knappar.