jQuery Mobile Button

Mobiele applicaties zijn gebouwd op de gemakkelijkheid van touch-acties.

Knoppen maken in jQuery Mobile

Knoppen in jQuery Mobile kunnen op drie manieren worden gemaakt:

  • Gebruik het <button> element
  • Gebruik het <input> element
  • Gebruik de <a> element met data-role="button"

<button>

<button>knop</button>

Probeer het zelf uit

<input>

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

Probeer het zelf uit

<a>

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

Probeer het zelf uit

Tip:Knoppen in jQuery Mobile krijgen automatisch stijlen, wat hun interactiviteit en bruikbaarheid op mobiele apparaten verhoogt. We raden aan om de <a> element met data-role="button" te gebruiken om links tussen pagina's te maken, en de <input> of <button> elementen voor formulierindieningen.

Navigatieknop

Gebruik de <a> element met data-role="button" om pagina's te koppelen via knoppen:

Example

<a href="#pagetwo" data-role="button">Ga naar pagina twee</a>

Probeer het zelf uit

Inline knop

Standaard neemt de knop de volledige breedte van het scherm in. Als je de knop wilt laten aanpassen aan zijn inhoud, of als je twee of meerdere knoppen naast elkaar wilt tonen, voeg dan data-inline="true" toe:

Example

<a href="#pagetwo" data-role="button" data-inline="true">Ga naar pagina twee</a>

Probeer het zelf uit

Combinatieknop

jQuery Mobile biedt een eenvoudige methode om knoppen te combineren.

Gebruik de data-role="controlgroup" eigenschap samen met data-type="horizontal|vertical" om horizontaal of verticaal knoppen te combineren:

Example

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

Probeer het zelf uit

Tip:Standaard is de combinatieknop horizontaal gegroepeerd, zonder buitenranden en witruimte. En alleen de eerste en laatste knoppen hebben ronde hoeken, wat een mooi uiterlijk creëert.

Terugknop

Om een terugknop te maken, gebruik dan de data-rel="back" eigenschap (deze negeert de href waarde van de anker):

Example

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

Probeer het zelf uit

Meer data-* eigenschappen gebruikt voor knoppen

Eigenschap Value Description Example
data-corners true | false Stelt vast of de knop ronde hoeken heeft. Test
data-mini true | false Stelt vast of het een klein knopje is. Test
data-shadow true | false Stelt vast of de knop een schaduw heeft. Test

Voor volledige informatie over de jQuery Mobile data-* attributes, bezoek onze jQuery Mobile Data Attribute Reference Manual.

De volgende sectie demonstreert hoe je een pictogram aan een knop toevoegt.