Kolumne: Dino talks

Schaltflächen und Links in jQuery Mobile (Teil 2)
Kommentare

Schaltflächen im Visier
Im Sinne einer einheitlichen Benutzeroberfläche werden Sie wahrscheinlich den Schaltflächen, die auf derselben Zeile erscheinen, die gleiche Breite geben wollen. Das ist nicht

Schaltflächen im Visier

Im Sinne einer einheitlichen Benutzeroberfläche werden Sie wahrscheinlich den Schaltflächen, die auf derselben Zeile erscheinen, die gleiche Breite geben wollen. Das ist nicht so leicht, solange jQuery Mobile die Schaltflächen komplett verwaltet. Das folgende Markup produziert einfach nicht die erwarteten Ergebnisse:

  

Unabhängig von Ihrem Format – ob inline oder über CSS-Klassen zugeordnet – wird das Element als Block mit einer Breite von 100 Prozent gerendert, wenn es die Rolle einer Schaltfläche zugewiesen bekommen hat. Mit nebeneinander angeordneten Containern können Sie sicherstellen, dass Schaltflächen gleiche Abstände aufweisen und auf derselben Zeile erscheinen. Hier können Sie jQuery-Mobile-Container oder einfache DIVs verwenden – oder sogar althergebrachte TABLE-Elemente wie in Listing 1.

Listing 1

Genauso komplex kann es sein, den Titel einer Schaltfläche per Programm zu ändern. Der Grund ist immer der gleiche: die unterschiedliche DOM-Struktur, die jQuery Mobile um die Rolle eines HTML-Elements erzeugt. Angesichts dieser Tatsache ist ein Ad-Hoc-API erforderlich, um diese Teile des DOM zu modifizieren und zu aktualisieren. Den Titel einer Schaltfläche ändern Sie wie folgt:

$("#buttonStart").prev('.ui-btn-inner')
                 .children('.ui-btn-text')
                 .html(newTitle);    

Derzeit haben Sie keine andere Möglichkeit, als den Baum gemäß Abbildung 1 zu durchlaufen, um das richtige SPAN-Tag zu finden. Dagegen liegen die Dinge einfacher, wenn Sie eine Schaltfläche aktivieren oder deaktivieren möchten. Denn hierfür bietet die Bibliothek ein direktes API:

$("#buttonStart").button("enable");  

Mit dem Befehl disable deaktivieren Sie die Schaltfläche. Das gesamte DOM wird daraufhin aktualisiert, um den Befehl widerzuspiegeln.

Windows Developer

Der Artikel „Schaltflächen und Links in jQuery Mobile“ von Dino Esposito ist erstmalig erschienen im Windows Developer 7.2012

Anker-Links

Links erfahren die gleiche Behandlung, sofern sie nicht mit einer leeren data-role (dem Wert none) markiert sind. Das A-Element wird mit seinem ursprünglichen URL verwaltet, doch der Inhalt des A-Elements wird über verschachtelte SPAN-Tags in der gleichen Weise wie für Schaltflächen gezeigt gerendert. Grafisch lassen sich Anker nicht von normalen und Submit-Schaltflächen unterscheiden und das API zur Programmierung ist das gleiche, mit denselben Vor- und Nachteilen. Da sich Links konzeptionell von Schaltflächen unterscheiden, bleiben noch einige weitere Unterschiede offen, doch darauf komme ich in einem späteren Artikel zurück.

Zusammenfassung

Aus dem Blickwinkel eines Programmierers hat jQuery Mobile viel mit jQuery UI gemeinsam: Beide Bibliotheken engagieren sich stark in HTML-Vorlagen und machen ein API für Entwickler zugänglich, um das resultierende DOM zu konfigurieren. Allerdings ist dies bei jQuery UI von Anfang an klar, da es sich um Widgets dreht, die in HTML nativ nicht existieren. Man kann sich vorstellen, dass es einiger Kunstgriffe bedarf und ein API erforderlich ist, um damit zu arbeiten. Überraschender ist das bei jQuery Mobile, da es hier um grundlegende HTML-Elemente geht. In beiden Fällen sind die Ergebnisse überzeugend; Sie müssen lediglich verstehen, was die Bibliothek von Ihnen erwartet.

Dino Esposito ist CTO bei e-tennis.NET, einer Firma, die sich auf webbasierte und mobile Lösungen für Sportereignisse in ganz Europa spezialisiert hat (www.e-tennis.net). Außerdem ist Dino der Autor von „Programming ASP.NET MVC3“, Microsoft Press, 2011.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -