JQuery Mobile - Plattformunabhängige mobile Anwendungen

jQuery Mobile ist ein touch-optimiertes Web-Framework für Smartphones und Handhelds, das auf dem JavaScript-Framework jQuery basiert. Dieses top-aktuelle Buch bietet professionelle HTML5-, CSS3- und JavaScript-Code-Beispiele. Es ist eine Schritt-für-Schritt-Anleitung, um eine komplette, plattformunabhängige mobile Applikation mit jQuery Mobile zu erstellen.


Leseprobe:

KAPITEL 3 Seitenelemente (S. 27-28)

Wie jQuery besitzt auch jQuery Mobile eine Reihe von UI-Elementen, die auf den gängigen Merkmalen einer Benutzerschnittstelle von Mobilgeräten basieren. Zur Erstellung verwenden Sie die jQuery Mobile-Standardmethode: Schreiben Sie etwas semantisches Markup und geben Sie dem Element ein passendes data-Attribut. jQuery Mobile erweitert das Element daraufhin bei der Initialisierung selbstständig.

Hinter den Kulissen: jQuery-Mobile-Plugins und Widgets

In jQuery Mobile kommen zwei Entwicklungsmuster besonders häufig zum Einsatz: Plugins und Widgets.

Das Plugin-Muster von jQuery ist eine Methode, die Funktionalität von jQuery selbst zu erweitern, indem Sie eigene Methoden hinzufügen. Danach können Sie Ihre eigenen Methoden auf die gleiche Art aufrufen wie jede andere jQuery-Mobile-Methode auch. Das Plugin-Muster wird detailliert in der Dokumentation von jQuery behandelt. Wenn Sie sich noch nicht damit auskennen, empfehle ich Ihnen, bei Bedarf dort nachzulesen. Ich selbst verwende das jQuery-Plugin-Muster in meiner Entwicklertätigkeit täglich. In jQuery Mobile können Sie dieses Muster nutzen, um Funktionen der Applikation zur Initialisierung von Seiten und Verwaltung von Daten auf praktische Weise zu kapseln.

Das Widget-Muster von jQuery ist dagegen ein wenig komplizierter – aber auch vielseitiger. Widgets werden über die Factory-Methode jQuery.widget erstellt. Wie bei einem Plugin erhalten Sie als Ergebnis eine jQuery-Methode, die mit einem beliebigen Selektor aufgerufen werden kann. Einer der Hauptvorteile bei der Verwendung von Widgets liegt darin, dass ihr Zustand auch nach der Ausführung der entsprechenden Methode nicht verlorengeht. Außerdem übernimmt die Factory-Methode die Garbage Collection, wodurch Speicherlecks vermieden werden.

Nehmen Sie zum Beispiel eines meiner Lieblingswidgets, jQuery UI Accordion. Um einen Accordion-Effekt zu erzielen, schreiben Sie zunächst Ihren Markup-Code und wenden dann die Methode jQuery.accordion() darauf an. Während der Initialisierung erweitert das Widget den Markup-Code und erzeugt Events, an die Sie Ihre Methoden binden können.

Außerdem stellt es eigene Methoden zur Interaktion mit dem Accordion und Änderungen daran zur Verfügung. Kommt Ihnen das bekannt vor? Das sollte es auch, denn es entspricht genau dem Verhalten von jQuery Mobile. Viele der Seitenelemente, die wir uns im Folgenden ansehen wollen, wurden in Form von jQuery-Mobile-Widgets erstellt. Und genauso werden sie auch verwendet.