Kolumne: Dino talks

jQuery Mobile – nicht nur für mobile Apps
Keine Kommentare

Der jQuery-Mobile-Bibliothek liegt das Konzept zugrunde, die Entwicklung von mobilen Sites zu vereinfachen, sodass man mit einer einzigen Codebasis sowie auf HTML und JavaScript basierenden Fertigkeiten eine breite Palette von Telefonplattformen bedienen kann. Eine Site ist nicht dasselbe wie eine native Anwendung, doch eine jQuery-Mobile-Anwendung bietet eine benutzerfreundliche Lösung auf den meisten gängigen Smartphones und gleichzeitig grundlegende Funktionen auf älteren Browsern.

jQuery Mobile (jQM) setzt auf der bekannten jQuery-Bibliothek auf und ist von Grund auf als umfassendste Plattform für das Erstellen mobiler Sites konzipiert. Schreiben Sie einfach Ihren Code über die Bibliothek und sie kümmert sich in bestmöglicher Form um das Rendern des Markups auf den Browsern. Mithilfe von jQM brauchen Sie sich nicht (unbedingt) um Geräteerkennung und -fähigkeiten zu kümmern. Die Bibliothek garantiert, dass die Ausgabe auch auf älteren Browsern funktioniert; ob diese dann auch wirklich das gewünschte Ergebnis erzielt, steht auf einem anderen Blatt. Zunächst werden die Grundpfeiler der Bibliothek untersucht und dann einige Codebeispiele vorgestellt.

Das Fundament von jQM

Die offizielle Site von jQM finden Sie unter [1], die neueste Version unter [2]. Um jQuery Mobile verwenden zu können, benötigen Sie die übergeordnete jQuery-Bibliothek mindestens in der Version 1.5. Zudem ist die Bibliothek ohne eine begleitende CSS-Datei nahezu unbrauchbar. Die Bibliothek verarbeitet eine Seite und transformiert sie von einer reinen Sammlung aus DIV-Tags in ein zweckmäßiges und für mobile Geräte geeignetes Dokument. Hierzu sind jede Menge Styles und Bilder erforderlich, die nach strengen Standards erzeugt werden müssen. Die Bibliothek bringt eine vordefinierte CSS-Datei mit, die Sie einbinden können. Wie viele andere Dinge sind die Themen natürlich durch den Entwickler anpassbar. Bei jQM lässt sich dies über das Tool „ThemeRoller“ bewerkstelligen – ein Hilfsmittel, mit dem Sie Ihr eigenes Thema problemlos entwerfen können. Der Code in Listing 1 zeigt die Dateien, die in den jeweiligen Anwendungsseiten oder einfach in einer Master-Seite einzubinden sind.

Listing 1



    jQuery Mobile Demos
    
        			
        			
        
X
- Gib Deinen Standort ein -
- or -