jQuery Mobile Button

Mobile Anwendungen basieren auf einfachen klickbaren Dingen, die Sie anzeigen möchten.



Buttons in jQuery Mobile erstellen

In jQuery Mobile können Buttons auf drei Arten erstellt werden:

  • Verwenden des <button>-Elements
  • Verwenden des <input>-Elements
  • Verwenden des <a>-Elements mit data-role="button"

<button>

<button>Button</button>

Selbst ausprobieren »

<input>

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

Selbst ausprobieren »

<a>

<a href="../index.html" data-role="button">Button</a>

Selbst ausprobieren »

lamp In jQuery Mobile werden Buttons automatisch gestaltet, um sie auf mobilen Geräten attraktiver und benutzerfreundlicher zu machen.Wir empfehlen, ein <a>-Element mit data-role="button" zu verwenden, um zwischen Seiten zu verlinken, und <input>- oder <button>-Elemente für die Formularübermittlung zu verwenden.

Navigationsschaltflächen

Um mit Buttons zwischen Seiten zu verlinken, verwenden Sie ein <a>-Element mit dem Attribut data-role="button":

Beispiel

<a href="../index.html" data-role="button">Zur zweiten Seite</a>

Selbst ausprobieren »

Inline-Buttons

Standardmäßig nehmen Schaltflächen die volle Breite des Bildschirms ein. Wenn Sie eine Schaltfläche wünschen, die nur so breit wie ihr Inhalt ist, oder wenn Sie zwei oder mehr Schaltflächen nebeneinander anzeigen möchten, fügen Sie data-inline="true" hinzu:

Beispiel

<a href="../index.html" data-role="button" data-inline="true">Besuchen Sie die zweite Seite</a>

Selbst ausprobieren »

Gruppierte Schaltflächen

jQuery Mobile bietet eine einfache Möglichkeit, Schaltflächen zu gruppieren.

Verwenden Sie das Attribut data-role="controlgroup" zusammen mit data-type="horizontal|vertical", um anzugeben, ob Schaltflächen horizontal oder vertikal gruppiert werden sollen:

Beispiel

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

Selbst ausprobieren »

lamp Standardmäßig werden gruppierte Schaltflächen vertikal angeordnet, ohne Außenabstände oder Zwischenräume zwischen ihnen. Außerdem sind nur die erste und letzte Schaltfläche abgerundet, sodass sie zusammen gruppiert ein ansprechendes Aussehen ergeben.

Zurück-Schaltfläche

Um eine Zurück-Schaltfläche zu erstellen, verwenden Sie das Attribut data-rel="back" (dies ignoriert den href-Wert des Ankers):

Beispiel

<a href="../index.html" data-role="button" data-rel="back">Zurück</a>

Selbst ausprobieren »

Weitere Link-Button-Beispiele

Klasse Beschreibung Beispiel
ui-btn-b Buttonfarbe auf Schwarz und Schriftfarbe auf Weiß ändern (Standard ist grauer Hintergrund, schwarze Schrift). Selbst ausprobieren
ui-corner-all Fügt Buttons abgerundete Ecken hinzu Selbst ausprobieren
ui-mini Erzeugt kleine Buttons Selbst ausprobieren
ui-shadow Fügt Buttons Schatten hinzu Selbst ausprobieren

Note Wenn Sie mehr Stile verwenden möchten, trennen Sie jede Stilklasse durch ein Leerzeichen, z. B.: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

Standardmäßig haben <input>-Buttons abgerundete Ecken und Schatteneffekte. <a>- und <button>-Elemente nicht.

Eine vollständigere Sammlung von CSS-Klassen finden Sie in unsererjQuery Mobile CSS-Klassen-Referenz。

Das nächste Kapitel zeigt, wie man Icons zu Buttons hinzufügt.

Andere Erweiterungen