www.PHP-Kurs.com

PHP lernen für Einsteiger
und Fortgeschrittene

PHP-Tutorial mit Videos

Sie befinden sich: Startseite » Web-App mit Datenbankanbindung » jQuery Mobile Buttons - Steuerung mit Touch

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:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe