jQuery Mobile Knapper

Mobile applikationer bygges på komforten af berøringsoperationer.

Opret knapper i jQuery Mobile

Knapper i jQuery Mobile kan oprettes på tre måder:

  • Brug af <button> element
  • Brug af <input> element
  • Brug af <a> element med data-role="button"

<button>

<button>knappen</button>

Prøv det selv

<input>

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

Prøv det selv

<a>

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

Prøv det selv

Tip:Knapper i jQuery Mobile får automatisk stil, hvilket forbedrer deres interaktions- og brugervenlighed på mobile enheder. Vi anbefaler, at du bruger data-role="button"'s <a>-element til at oprette links mellem sider, mens <input>- eller <button>-elementer bruges til formularindsendelse.

Navigationsknapper

Hvis du vil linke sider gennem en knap, skal du bruge data-role="button"'s <a>-element:

Eksempel

<a href="#pagetwo" data-role="button">Gå til side to</a>

Prøv det selv

Indlejrede knapper

Som standard tager knapper hele skærmbredden. Hvis du har brug for, at knapperne tilpasses deres indhold, eller hvis du har brug for at vise to eller flere knapper ved siden af hinanden, skal du tilføje data-inline="true":

Eksempel

<a href="#pagetwo" data-role="button" data-inline="true">Gå til side to</a>

Prøv det selv

Kombinerede knapper

jQuery Mobile tilbyder en simpel metode til at kombinere knapper.

Brug data-role="controlgroup" egenskaben sammen med data-type="horizontal|vertical", for at definere, om knapperne skal kombineres vandret eller lodret:

Eksempel

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

Prøv det selv

Tip:Som standard er kombinerede knapper lodrette grupperede, uden ekstern kantlinje og tom plads. Og kun den første og den sidste knap har runde kanter, hvilket skaber et smukt udseende efter kombination.

Tilbage-knap

Hvis du vil oprette en tilbage-knap, skal du bruge data-rel="back" egenskaben (vil ignorere ankerets href-værdi):

Eksempel

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

Prøv det selv

Flere bruges til knapper data-* egenskaber

Egenskab Værdi Beskrivelse Eksempel
data-corners true | false Bestemmer om knappen har runde hjørner. Test
data-mini true | false Bestemmer om det er en lille knap. Test
data-shadow true | false Bestemmer om knappen har skygge. Test

For fuldstændig information om jQuery Mobile data-* egenskaber, besøg vores jQuery Mobile Data Egenskaber Reference Manual.

Næste afsnit viser, hvordan du tilføjer ikoner til knapper.