jQuery Mobile Buttons - Steuerung mit Touch

Eigentlich sind wir bei mobilen Anwendungen auf Handy und Co. gewohnt, dass wir mindestens in der Kopfzeile anklickbare Schaltflächen (Buttons) haben um beispielsweise zur Startseite zu kommen oder weitere Menüpunkt aufrufen zu können. Aber bevor wir die Kopf- und Fußzeile mit Buttons bestücken brauchen wir erst noch ein wenig Theorie zu Buttons und wie diese aufgebaut sind und eingesetzt werden können.

Buttons (sprich Schaltflächen auf deutsch) sind bei mobilen Anwendungen sehr wichtig, da diese einfach über das Antippen mit Fingern genutzt werden können.

Dabei stehen uns 3 Möglichkeiten mit jQuery Mobile zur Verfügung, wie aus einem HTML-Element ein Button erzeugt wird:

• das HTML-Element <input>
• der Button <button> in Kombination mit der Klasse "ui-btn"
• der typische Link mit <a href="#andereseite"> in Kombination mit der Klasse "ui-btn"

Das Aussehen der Schaltflächen wird automatisch von jQuery Mobile erstellt - sowohl für die Desktop-Variante wie auch für mobile Geräte. Somit bekommen wir groß genuge Buttons, damit diese bequem mit Fingern bedienbar sind.

Hier als Code-Beispiel alle 3 Möglichkeiten:

<input type="button" value="Button 1">
<button class="ui-btn">Button 2</button>
<a href="#andereseite" class="ui-btn">Button 3</a>

Üblicherweise wird man die Elemente <input> und <button> in Formulare verwenden und das Element <a href="#andereseite"> für die Steuerelemente zwischen verschiedenen Seiten.

Steuerung mit Gruppierung

Eine Steuerung wird über die data-role="controlgroup" gruppiert. Die Ausrichtung der Steuerung kann über das Attribut data-type="horizontal" beeinflusst werden. Dabei erfolgt ohne die Angabe von data-type die Ausrichtung untereinander (vertikal) und mit Angabe von data-role="controlgroup" erfolgt die Ausgabe nebeneinander (sofern es der Platz zulässt).

<div data-role="controlgroup" data-type="horizontal">
  <a href="#seiteeins" class="ui-btn">Button 1</a>
  <a href="#seitezwei" class="ui-btn">Button 2</a>
  <a href="#seitedrei" class="ui-btn">Button 3</a>
</div>

Unser bisheriges Ergebnis auf einem Handy.

Es wird die komplette Seitenbreite für einen Button genutzt - es soll ja bestmöglich diese Schaltfläche mit dem Finger getroffen werden können. Ist diese Anzeigeart unerwünscht (also die maximale Breite) kann diese Anzeigeart „umgeschaltet“ werden, dass die Schaltfläche nur noch die Breite nutzt, die für den Inhalt notwendig ist.

Dazu wird die Klasse erweitert mit einer weiteren Klasse. Ja, es können mehrere Klassen für ein HTML-Element angegebene werden! Wir haben dann folgenden Aufbau:

<a href="#seitezwei" class="ui-btn ui-btn-inline">Seite 2</a>

Zurück-Button

Soll ein Zurück-Button erstellt werden, dann wird dies über das Attribut data-rel="back" erreicht.

Die Angabe im href wird ignoriert.

<a href="#" class="ui-btn" data-rel="back">Zurück zur aufrufenden Seite</a>

Klassen für Buttons

jQuery Mobile bietet einige Klassen an für das Aussehen unserer Buttons. Folgend eine kleine Auswahl davon:

class="ui-btn"

Anstelle der grauen Hintergrundfarbe und weißen Textfarbe wird der Button mit schwarzer Hintergrundfarbe und weißem Text dargestellt

ui-corner-all

Runde Ecken für die Schaltflächen

ui-mini

kleiner Ausgabe der Schaltflächen

ui-shadow

Schatten für die Schaltflächen

Zusätzlich können die Schaltflächen noch mit Icons versehen werden - das im folgenden Kapitel.