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.
Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).
Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button: