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
    
        			
        			
        

Eine Seite wird durch ein DIV-Element gekennzeichnet, das mit dem auf den Wert page gesetzten Attribut data-role versehen ist. Sie kann über eine eigene ID verfügen und mit dem Attribut class die Style-Einstellungen überschreiben. Mit dem Attribut data-theme lässt sich das Thema für die gesamte Seite auswählen. Standardmäßig akzeptiert das theme-Attribut Werte wie a, b, c, d und e.

Listing 3


...
...

Wenn Sie mehrere logische Seiten verwenden, sollten Sie sie ihnen jeweils eindeutige IDs zuweisen, was Navigation und auch Initialisierung ermöglicht.

Zwei häufig verwendete Werte für das Attribut data-role sind header und footer. Die Kopfzeile (header) enthält den Seitentitel sowie rechts und links einige optionale Schaltflächen (um die iPhone-Vorlage nachzuahmen). Die header-Rolle erhält vom Framework einen speziellen Stil und wird einigen Standardmanipulationen unterzogen. Als Entwickler können Sie sowohl die header-Vorlage als auch den Text und das Ziel der Schaltflächen vollständig anpassen. Listing 4 zeigt eine Seite mit Kopf- und Fußzeilen:

Listing 4


Demos

This is the body of the page
Company info

Mithilfe des data-position-Attributs lässt sich die Position konstant am unteren Rand der Seite halten.

Zusammenfassung

In diesem Artikel habe ich lediglich das "Hello World" von jQuery Mobile vorgestellt. Es gibt weit mehr über dessen Fähigkeit herauszufinden und zu entdecken, um anspruchsvolle Webseiten und mobile Oberflächen zu erzeugen - mehr zu diesen und anderen Aspekten lesen Sie in den kommenden Monaten. Wenn Sie die kurzen Listings in eine HTML-Textdatei kopieren und die jQuery-Bibliotheken ordnungsgemäß damit verknüpfen, können Sie sich sogar auf Desktopbrowsern der neuesten Versionen von Internet Explorer, Chrome, Firefox und ähnlichen eine telefonartige Oberfläche ansehen. Das heißt, Sie können jQM auch auf normalen Sites verwenden, um beispielsweise HTML-5-Funktionen browserübergreifend einzuführen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -