Kolumne: Dino talks

Schaltflächen und Links in jQuery Mobile
Kommentare

jQuery Mobile wendet umfangreiche Transformationen auf das ursprüngliche Markup an. Das geschieht vor allem zugunsten einer attraktiveren Grafik und um einen visuellen Effekt bestimmter nativer, mobiler Benutzeroberflächen (vor allem iOS) zu erzielen. Dieses Feature bereitet aber zusätzliche Probleme und Entwicklern fallen unter Umständen sogar triviale Aufgaben schwer, wie zum Beispiel den Titel einer Schaltfläche zu ändern. In diesem Artikel soll die Logik hinter Schaltflächen und Links in jQuery Mobile und dem Programmiermodell, das auf diesen allgemeinen HTML-Elementen aufsetzt, betrachtet werden.

Windows Developer

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

Zu einem der ersten Hindernisse, auf die ein Einsteiger in jQuery Mobile trifft, gehört, dass alles Klickbare als Schaltfläche (Button) gerendert wird. Das mag zunächst eine angenehme Überraschung sein, doch wenn man dieses Feature nicht richtig verinnerlicht hat, kann es einen in den Wahnsinn treiben. Ein Anker-Link, der zu einer Schaltfläche mit einem undeutlichen 3-D-Design mutiert, ist einfach das Ergebnis eines Features in jQuery Mobile, das sich wesentlich stärker auf die Programmierung niederschlägt: die DOM-Manipulation.

In einer jQuery-Mobile-Seite werden die meisten HTML-Elemente mit dem Ziel einer attraktiveren Benutzeroberfläche automatisch manipuliert, wobei ihre Kernfunktionalität erhalten bleibt. Am stärksten greift jQuery Mobile bei Eingabeelementen wie Schaltflächen, Textfeldern, Optionsfeldern und Links ein.

Die Buttonrolle

Wie bereits erwähnt, passieren die meisten DOM-Transformationen automatisch und scheinbar ohne Ihren Einfluss als Entwickler. Allerdings ist das nur der erste Eindruck, da Sie unmittelbar die Kontrolle über das Markup zurückbekommen, wenn Sie irgendeine Standardrolle deaktivieren, die die Bibliothek manchen Elementen zuweist. Die jQuery-Mobile-Bibliothek greift ausgiebig auf data-*-Attribute zu. Diese Attribute repräsentieren reine Metainformationen, die bestimmten HTML-Elementen zugeordnet sind. Weder dem Namen noch den Werten des data-*-Attributs fällt irgendeine spezifische Bedeutung für den Browser zu. Alle Browser ignorieren unbekümmert (und korrekterweise) die data-*-Attribute. Sie sind dazu da, dass eine clientseitige JavaScript-Bibliothek sie verarbeitet. Anders ausgedrückt sind data-*-Attribute das HTML-Gegenstück zum klassischen Empfehlungsschreiben „to whom it may concern“, das Sie vielleicht mit sich führen, wenn Sie in bestimmte Länder reisen.

Das wichtigste data-*-Attribut in jQuery Mobile ist data-role. Es soll dem Element eine Rolle zuweisen. Man könnte das auch so formulieren: Beachte nicht das Aussehen und die DOM-Struktur dieses Teilbaums; trotz des Anscheins wird seine eigentliche Rolle durch das Attribut beschrieben. Ist das data-role-Attribut auf button gesetzt, erhalten Sie etwas zurück, das sich wie eine Schaltfläche präsentiert und verhält (und das Benutzer in der Seite sehen). Wenn der Wert des data-role-Attributs page lautet, wird das Element (in diesem Fall meistens ein DIV) durch die Bibliothek als Seite behandelt. Das heißt, dass dieses DIV als Navigationsziel in Frage kommt und Sie auch von diesem DIV aus zu anderen Pseudoseiten oder externen (und regulären) URLs navigieren können. Links und Schaltflächenelementen von HTML weist jQuery Mobile automatisch die Rolle einer Schaltfläche zu und rendert sie entsprechend. Das bedeutet, dass vom folgenden Markup ein DOM-Teilbaum, wie der in Abbildung 1 gezeigte, ausgeht:

Abb. 1: Der DOM-Teilbaum, der aus einer reinen INPUT-Schaltfläche in einer jQuery-Mobile-Seite resultiert
Abb. 1: Der DOM-Teilbaum, der aus einer reinen INPUT-Schaltfläche in einer jQuery-Mobile-Seite resultiert

Wie bereits erwähnt, ist der Endeffekt unabhängig von der expliziten Verwendung des data-role-Attributs der gleiche. Gerendert wird die Schaltfläche über ein DIV mit einem untergeordneten SPAN-Tag, um die Beschriftung darzustellen. Das innerste SPAN-Tag gehört zur Klasse ui-btn-text: Das ist die eigentliche Beschriftung der Schaltfläche und das ist das eigentliche HTML-Element, das Sie abrufen und festlegen müssen, um die Beschriftung der Schaltfläche über das Programm zu modifizieren. Das umgebende DIV-Element wird mithilfe der CSS-Formate geeignet formatiert. Diese sind in der CSS-Stylesheet-Begleitdatei vordefiniert, die jQuery Mobile mitbringt. CSS-Klassen wie ui-btn und ui-btn-corner-all bieten den netten, unscharfen 3-D-Effekt, den Sie aus den Beispielen der klassischen jQuery-Mobile-Benutzeroberfläche kennen. Selbstverständlich sind das auch die CSS-Klassen, die Sie modifizieren müssen, wenn Sie anspruchsvollere Anpassungen an Elementen der Benutzeroberfläche vornehmen möchten.

Das mit den Internet Explorer Developer Tools (F12) erfasste Codefragment zeigt hierzu einen anderen Aspekt, den Sie beachten sollten. Der DOM-Teilbaum enthält immer noch ein INPUT-Element des Typs button. Allerdings ist dieses Element verborgen. Es handelt sich um das Element, das Sie abrufen, wenn Sie das DOM mit einer reinen jQuery-Anweisung abfragen. Zum Beispiel findet die folgende Abfrage korrekt die (verborgene) Schaltfläche und gibt sie zurück: $ („#buttonStart“).

Leider haben alle weiteren Manipulationen, die Sie auf diesem DOM-Element ausführen, keinen sichtbaren Effekt, da das Element per Programm durch jQuery Mobile ausgeblendet ist. Auch wenn Sie dieses Element in der Größe ändern oder auf eine andere Weise formatieren und dabei auf die Kernbibliothek von jQuery zurückgreifen, passiert scheinbar nichts. Allerdings läuft alles korrekt ab, außer dass es auf einem verborgenen Element stattfindet. jQuery Mobile klinkt sich in die Ereignis-Handler für die Schaltfläche ein und verarbeitet die Ereignisse entsprechend, wenn die gleichen Ereignisse (vor allem Klicken) auf dem umgebenden DIV-Element auftreten. Wenn Sie diese Aspekte der jQuery-Mobile-Programmierung ignorieren, kann Sie das in den Wahnsinn treiben. Zumindest ist mir das einige Male passiert.

Wie können Sie nun die standardmäßige DOM-Transformation auf einem HTML-Element deaktivieren? Grob gesehen ist das recht einfach und unkompliziert. Wenn dem Wert button, der dem data-role-Attribut zugewiesen ist, alle diese Abläufe zuzuschreiben sind, bewirkt der Wert none, dass alles wie in einer Nicht-jQuery-Mobile-Seite beibehalten wird:

Dieser Code gibt lediglich im DOM der Seite eine reine Schaltfläche aus, die Sie per Skript bearbeiten und formatieren können, wie Sie es von einer regulären Webseite gewohnt sind.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -