jQuery Mobile-Schaltflächen

Mobile Anwendungen werden auf die Bequemlichkeit von Berührungseingaben aufgebaut.

Knöpfe in jQuery Mobile erstellen

Knöpfe in jQuery Mobile können auf drei Arten erstellt werden:

  • Verwenden Sie das <button>-Element
  • Verwenden Sie das <input>-Element
  • Verwenden Sie das <a>-Element mit data-role="button"

<button>

<button>Knopf</button>

Probieren Sie es selbst aus

<input>

<input type="button" value="Schaltfläche">

Probieren Sie es selbst aus

<a>

<a href="#" data-role="button">Schaltfläche</a>

Probieren Sie es selbst aus

Hinweis:Schaltflächen in jQuery Mobile erhalten automatisch Stile, was ihre Interaktivität und Zugänglichkeit auf mobilen Geräten verbessert. Wir empfehlen Ihnen, das <a>-Element mit data-role="button" zur Erstellung von Links zwischen Seiten zu verwenden, während <input> oder <button>-Elemente für Formular-Übermittlungen verwendet werden.

Navigations-Schaltfläche

Verwenden Sie das <a>-Element mit data-role="button", um durch Schaltflächen zu navigieren:

Beispiel

<a href="#pagetwo" data-role="button"> zur Seite zwei wechseln</a>

Probieren Sie es selbst aus

Inline-Schaltfläche

Standardmäßig nimmt die Schaltfläche die gesamte Breite des Bildschirms ein. Fügen Sie data-inline="true" hinzu, um die Schaltfläche an ihr Inhalt anzupassen oder um zwei oder mehrere Schaltflächen nebeneinander anzuzeigen:

Beispiel

<a href="#pagetwo" data-role="button" data-inline="true"> zur Seite zwei wechseln</a>

Probieren Sie es selbst aus

Kombinierte Schaltflächen

jQuery Mobile bietet einfache Methoden zur Kombination von Schaltflächen.

Verwenden Sie das Attribut data-role="controlgroup" zusammen mit data-type="horizontal|vertical", um die Kombination der Schaltflächen horizontal oder vertikal zu bestimmen:

Beispiel

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

Probieren Sie es selbst aus

Hinweis:Standardmäßig sind die kombinierten Schaltflächen vertikal gruppiert, ohne Außenabstand und Leerzeichen. Und nur die erste und letzte Schaltfläche hat abgerundete Ecken, was ein schönes Aussehen erzeugt.

Zurück-Button

Um einen Zurück-Button zu erstellen, verwenden Sie das Attribut data-rel="back" (das href-Wert des Ankers wird ignoriert):

Beispiel

<a href="#" data-role="button" data-rel="back"> zurück</a>

Probieren Sie es selbst aus

Mehrere data-*-Attribute werden für Schaltflächen verwendet

Eigenschaft Wert Beschreibung Beispiel
data-corners true | false Regelt, ob der Button abgerundete Ecken hat. Test
data-mini true | false Regelt, ob es sich um einen kleinen Button handelt. Test
data-shadow true | false Regelt, ob der Button einen Schatten hat. Test

Für detaillierte Informationen zu den jQuery Mobile data-*-Attributen besuchen Sie bitte unsere jQuery Mobile Data-Attribute Referenzhandbuch.

Der nächste Abschnitt zeigt, wie man einem Button ein Symbol hinzufügt.