Spricht man von jQuery Mobile, denken die meisten Webentwickler an eine leichtfüßige Sencha-Touch-Alternative. Doch jQuery Mobile ist viel mehr. Wie ihr es einsetzen könnt, erfahrt ihr in unserer Reihe zum Thema jQuery Mobile.
Wie wir vor kurzem berichtet haben, ist jQuery Mobile in der Beta 2 seiner Version 1.0 erschienen. Grund genug, sich das Framework ein Mal genauer anzuschauen.
Voraussetzungen für den Einsatz von jQuery Mobile
jQuery Mobile benötigt einen halbwegs modernen Smartphone- oder Tablet-Browser um seine Stärken auszuspielen. Es funktioniert auf den meisten Geräten, die in den letzten Jahren erschienen sind. Eine grundlegende Voraussetzung ist ein aktiviertes JavaScript, da es auf dem JavaScript-Framework jQuery aufbaut.
Um zu starten brauchen wir nun eine vernünftige DOM-Struktur, am besten mit einem aktuellen Doctype. Wir nehmen dafür den HTML5-Doctype um zukunftssicher zu sein. Dazu müssen wir die JS-Dateien für jQuery und jQuery-Mobile einbinden sowie die passende CSS-Dateien. Dabei greifen wir auf die jQuery CDN zu, um diese nicht extra runterladen zu müssen und gleich beginnen zu können. Jetzt muss nur noch der Viewport gesetzt werden und wir sind startbereit und haben ungefähr folgenden Code.
<!DOCTYPE html> <html> <head> <title>Seitentitel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> </head> <body> </body> </html>
Die erste Seite in jQuery Mobile
Glückwunsch, du hast jetzt deine erste Seite in jQuery-Mobile aufgesetzt. Nur leider ist da noch nicht all zu viel zu sehen. Tauchen wir nun einfach etwas tiefer in die Materie jQuery-Mobile ein.
Dazu ändern wir den Bereich zwischen den body-Tags etwas ab mit folgendem Code:
<div data-role="page"> <div data-role="header"><h1>Willkommen</h1></div> <div data-role="content"> <h2>Inhaltslos</h2> <p>Keiner denkt an den <strong>Inhalt</strong></p> </div> <div data-role="footer"><h4>Auf Wiedersehen</h4></div> </div>
Wir haben jetzt also 4 DIV’s erstellt. Ein Parent-DIV und 3 Child-DIV’s. Jedem DIV weisen wir eine data-role zu, je nachdem welche Rolle das jeweilige DIV einnehmen soll. Das Parent-DIV ist sozusagen der Container in dem die erste Seite dargestellt werden soll. Die restlichen DIV’s stehen für folgende Rollen:
header für die Kopfzeile am Anfang der Seite
content für den Inhalt
footer für eine Fußzeile am Ende
Zugegeben, das war nicht sonderlich kompliziert, aber das ist alles was wir brauchen um die erste Seite in jQuery Mobile zu erstellen. Den Beweis könnt ihr euch im Screenshot ansehen oder das Ganze einfach auf euren eigenen Smartphones testen.
jQuery Mobile - die erste Seite
Viele Seiten in einer HTML-Datei
Das Problem vieler Smartphones ist die Verbindungsgeschwindigkeit und ihre Performance, wenn viele Seiten geladen werden müssen. jQuery Mobile löst dieses Problem indem ihr mehrere Seiten in einer HTML-Datei festlegen könnt, die nur ein Mal geladen werden muss. So kann ein User ziemlich schnell auf eurer Seite surfen. Mehrere Seiten anzulegen ist dabei nach wie vor ziemlich simpel.
<div data-role="page" id="seite1"> <div data-role="header"><h1>Willkommen</h1></div> <div data-role="content"> <h2>Inhaltslos</h2> <p>Keiner denkt an den <strong>Inhalt</strong></p> </div> <div data-role="footer"><h4>Auf Wiedersehen</h4></div> </div> <div data-role="page" id="seite2"> <div data-role="header"><h1>Willkommen auf Seite 2</h1></div> <div data-role="content"> <h2>Lorem Ipsum</h2> <p>Wer ist eigentlich Lorem Ipsum ?</p> </div> <div data-role="footer"><h4>Auf Wiedersehen</h4></div> </div>
Navigation mit jQuery Mobile
Wir verfahren also genauso wie zuvor, nur dass wir in diesem Beispiel zwei page’s anlegen und jeweils eine ID vergeben. Das Problem, welches noch besteht, ist die Navigation. Wir ändern also unseren Footer mit folgenden Daten für Seite 1:
<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#seite1" class="ui-btn-active" data-iconpos="top" data-icon="home">Seite 1</a></li> <li><a href="#seite2" data-iconpos="top" data-icon="search">Seite2</a></li> </ul> </div>
Für die Seite 2 verschieben wir die CSS-Klasse ui-btn-active in den Link für die Seite 2:
<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#seite1" data-iconpos="top" data-icon="home">Seite 1</a></li> <li><a href="#seite2" class="ui-btn-active" data-iconpos="top" data-icon="search">Seite2</a></li> </ul> </div>
Eine Navigation erstellt man mit der Rolle navbar. Am besten geht das wie in vielen nativen Apps in der Fußzeile, damit erhöhen wir auch die Usability und nähern uns dem Look & Feel einer nativen App. Verlinkungen zu anderen page's erstellt man, indem man einfach die Anchor-Tags auf die jeweilige page-ID verlinkt. Mit data-icon legt man ein Icon für die Navigation fest. Das ist nicht zwingend notwendig, erhöht aber die Übersicht. Mit „data-iconpos“ wird die Position des Icons festgelegt und wir weisen dem Link der jeweils aktiven Page noch die CSS-Klasse ui-btn-active zu. Die Navigationselemente selber stehen in einer Liste, man kann dazu auch Unterlisten anlegen um zum Beispiel breitere und schmalere Elemente erzeugen zu können.
jQuery Mobile - Navbar
Dialogboxen mit jQuery Mobile
Um beispielsweise auf Nutzereingaben zu reagieren, bieten sich Dialoge an. Diese können entweder aus externen HTML-Dateien bestehen oder auch als eine weitere Page dargestellt werden, müssen aber explizit als Dialog aufgerufen werden. Wie das geht, möchte ich euch an einem Beispiel zeigen.
Als erstes fügen wir unserer Seite eine weitere Page hinzu:
<div data-role="page" id="dialog"> <div data-role="header"><h2>Dialogbox</h2></div> <div data-role="content"><p>Inhalt des Dialoges</p> <a href="#seite1" data-rel="back" data-role="button">Schliessen</a> </div> </div>
Wir ihr seht, haben wir wirklich nur eine normale Page ohne Footer angelegt, weil wir diesen auch nicht benötigen. Dazu haben wir einen Button angelegt (Buttons bekommen die Rolle button) und haben ihm die Beziehung back zugewiesen und einen Link zu ersten Seite. Das ist der Befehl zum Schließen des Dialogs.
Dann fügen wir auf Seite 1 im Content-Bereich einen Button zum Öffnen des Dialogs hinzu:
<p><a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox</a></p>
Hier haben wir einfach nur einen Button mit der Beziehung Dialog mit dem Übergang (transition) pop, dieser Befehl ist ähnlich einer Animation zum Öffnen des Dialogs. Man kann zum Beispiel zwischen pop, slidedown oder flip wählen.
Öffnet ihr nun den Dialog, könnt ihr diesen auch wieder mit dem Schließen-Button schließen.
jQuery Mobile - Dialoge
Quellcode und Aussichten
Abschließend hier noch einmal der gesamte Quellcode unserer HTML-Datei:
<!DOCTYPE HTML>
<html>
<head>
<title>Seitentitel </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale=1>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"> </script>
</head>
<body>
<div data-role="page" id="seite1">
<div data-role="header"> <h1>test </h1> </div>
<div data-role="content"> <h3>TEST </h3>
<p> <a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox </a> </p>
</div>
<div data-role="footer"> <div data-role="navbar">
<ul>
<li> <a href="#seite1" class="ui-btn-active" data-iconpos="top" data-icon="home">Seite1 </a> </li>
<li> <a href="#seite2" data-iconpos="top" data-icon="home">Seite2 </a> </li>
</ul>
</div> </div>
</div>
<div data-role="page" id="seite2">
<div data-role="header"> <h1>test2 </h1> </div>
<div data-role="content"> <h3>TEST </h3> </div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li> <a href="#seite1" data-iconpos="top" data-icon="home">Seite1 </a> </li>
<li> <a href="#seite2" class="ui-btn-active" data-iconpos="top" data-icon="home">Seite2 </a> </li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header"> <h2>Dialogbox </h2> </div>
<div data-role="content"> <p>Inhalt des Dialoges </p>
<a href="#seite1" data-rel="back" data-role="button">Schliessen </a>
</div>
</div>
</body>
</html>
In den nächsten Ausgaben dieser How-To-Reihe erhaltet ihr Einblicke in die Zusammenarbeit von jQuery Mobile mit HTML5-Elementen wie die Geolocation oder Webstorage und wie ihr am Ende aus eurer Web-App mit Hilfe von Phone-Gap eine native App macht.
Ich hoffe, ihr habt einen guten ersten Eindruck von der Arbeit mit jQuery Mobile bekommen und seht wie relativ einfach es tatsächlich ist, eine mobile Seite mit diesem Framework zu erstellen. Was sagt ihr? Hat jQuery Mobile bereits Einzug in euren Workflow erhalten oder bleibt ihr lieber doch bei Sencha-Touch ?
Weiterführende Links zum Thema jQuery Mobile:
jQuery Mobile Beta ist da – Die Features auf einen Blick - t3n News
Dokumentationen und Demos zu jQuery Mobile - jquerymobile.com
Icons für die Navbar - jquerymobile.com
Wie wir vor kurzem berichtet haben, ist jQuery Mobile in der Beta 2 seiner Version 1.0 erschienen. Grund genug, sich das Framework ein Mal genauer anzuschauen.
Voraussetzungen für den Einsatz von jQuery Mobile
jQuery Mobile benötigt einen halbwegs modernen Smartphone- oder Tablet-Browser um seine Stärken auszuspielen. Es funktioniert auf den meisten Geräten, die in den letzten Jahren erschienen sind. Eine grundlegende Voraussetzung ist ein aktiviertes JavaScript, da es auf dem JavaScript-Framework jQuery aufbaut.
Um zu starten brauchen wir nun eine vernünftige DOM-Struktur, am besten mit einem aktuellen Doctype. Wir nehmen dafür den HTML5-Doctype um zukunftssicher zu sein. Dazu müssen wir die JS-Dateien für jQuery und jQuery-Mobile einbinden sowie die passende CSS-Dateien. Dabei greifen wir auf die jQuery CDN zu, um diese nicht extra runterladen zu müssen und gleich beginnen zu können. Jetzt muss nur noch der Viewport gesetzt werden und wir sind startbereit und haben ungefähr folgenden Code.
<!DOCTYPE html> <html> <head> <title>Seitentitel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> </head> <body> </body> </html>
Die erste Seite in jQuery Mobile
Glückwunsch, du hast jetzt deine erste Seite in jQuery-Mobile aufgesetzt. Nur leider ist da noch nicht all zu viel zu sehen. Tauchen wir nun einfach etwas tiefer in die Materie jQuery-Mobile ein.
Dazu ändern wir den Bereich zwischen den body-Tags etwas ab mit folgendem Code:
<div data-role="page"> <div data-role="header"><h1>Willkommen</h1></div> <div data-role="content"> <h2>Inhaltslos</h2> <p>Keiner denkt an den <strong>Inhalt</strong></p> </div> <div data-role="footer"><h4>Auf Wiedersehen</h4></div> </div>
Wir haben jetzt also 4 DIV’s erstellt. Ein Parent-DIV und 3 Child-DIV’s. Jedem DIV weisen wir eine data-role zu, je nachdem welche Rolle das jeweilige DIV einnehmen soll. Das Parent-DIV ist sozusagen der Container in dem die erste Seite dargestellt werden soll. Die restlichen DIV’s stehen für folgende Rollen:
header für die Kopfzeile am Anfang der Seite
content für den Inhalt
footer für eine Fußzeile am Ende
Zugegeben, das war nicht sonderlich kompliziert, aber das ist alles was wir brauchen um die erste Seite in jQuery Mobile zu erstellen. Den Beweis könnt ihr euch im Screenshot ansehen oder das Ganze einfach auf euren eigenen Smartphones testen.
jQuery Mobile - die erste Seite
Viele Seiten in einer HTML-Datei
Das Problem vieler Smartphones ist die Verbindungsgeschwindigkeit und ihre Performance, wenn viele Seiten geladen werden müssen. jQuery Mobile löst dieses Problem indem ihr mehrere Seiten in einer HTML-Datei festlegen könnt, die nur ein Mal geladen werden muss. So kann ein User ziemlich schnell auf eurer Seite surfen. Mehrere Seiten anzulegen ist dabei nach wie vor ziemlich simpel.
<div data-role="page" id="seite1"> <div data-role="header"><h1>Willkommen</h1></div> <div data-role="content"> <h2>Inhaltslos</h2> <p>Keiner denkt an den <strong>Inhalt</strong></p> </div> <div data-role="footer"><h4>Auf Wiedersehen</h4></div> </div> <div data-role="page" id="seite2"> <div data-role="header"><h1>Willkommen auf Seite 2</h1></div> <div data-role="content"> <h2>Lorem Ipsum</h2> <p>Wer ist eigentlich Lorem Ipsum ?</p> </div> <div data-role="footer"><h4>Auf Wiedersehen</h4></div> </div>
Navigation mit jQuery Mobile
Wir verfahren also genauso wie zuvor, nur dass wir in diesem Beispiel zwei page’s anlegen und jeweils eine ID vergeben. Das Problem, welches noch besteht, ist die Navigation. Wir ändern also unseren Footer mit folgenden Daten für Seite 1:
<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#seite1" class="ui-btn-active" data-iconpos="top" data-icon="home">Seite 1</a></li> <li><a href="#seite2" data-iconpos="top" data-icon="search">Seite2</a></li> </ul> </div>
Für die Seite 2 verschieben wir die CSS-Klasse ui-btn-active in den Link für die Seite 2:
<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#seite1" data-iconpos="top" data-icon="home">Seite 1</a></li> <li><a href="#seite2" class="ui-btn-active" data-iconpos="top" data-icon="search">Seite2</a></li> </ul> </div>
Eine Navigation erstellt man mit der Rolle navbar. Am besten geht das wie in vielen nativen Apps in der Fußzeile, damit erhöhen wir auch die Usability und nähern uns dem Look & Feel einer nativen App. Verlinkungen zu anderen page's erstellt man, indem man einfach die Anchor-Tags auf die jeweilige page-ID verlinkt. Mit data-icon legt man ein Icon für die Navigation fest. Das ist nicht zwingend notwendig, erhöht aber die Übersicht. Mit „data-iconpos“ wird die Position des Icons festgelegt und wir weisen dem Link der jeweils aktiven Page noch die CSS-Klasse ui-btn-active zu. Die Navigationselemente selber stehen in einer Liste, man kann dazu auch Unterlisten anlegen um zum Beispiel breitere und schmalere Elemente erzeugen zu können.
jQuery Mobile - Navbar
Dialogboxen mit jQuery Mobile
Um beispielsweise auf Nutzereingaben zu reagieren, bieten sich Dialoge an. Diese können entweder aus externen HTML-Dateien bestehen oder auch als eine weitere Page dargestellt werden, müssen aber explizit als Dialog aufgerufen werden. Wie das geht, möchte ich euch an einem Beispiel zeigen.
Als erstes fügen wir unserer Seite eine weitere Page hinzu:
<div data-role="page" id="dialog"> <div data-role="header"><h2>Dialogbox</h2></div> <div data-role="content"><p>Inhalt des Dialoges</p> <a href="#seite1" data-rel="back" data-role="button">Schliessen</a> </div> </div>
Wir ihr seht, haben wir wirklich nur eine normale Page ohne Footer angelegt, weil wir diesen auch nicht benötigen. Dazu haben wir einen Button angelegt (Buttons bekommen die Rolle button) und haben ihm die Beziehung back zugewiesen und einen Link zu ersten Seite. Das ist der Befehl zum Schließen des Dialogs.
Dann fügen wir auf Seite 1 im Content-Bereich einen Button zum Öffnen des Dialogs hinzu:
<p><a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox</a></p>
Hier haben wir einfach nur einen Button mit der Beziehung Dialog mit dem Übergang (transition) pop, dieser Befehl ist ähnlich einer Animation zum Öffnen des Dialogs. Man kann zum Beispiel zwischen pop, slidedown oder flip wählen.
Öffnet ihr nun den Dialog, könnt ihr diesen auch wieder mit dem Schließen-Button schließen.
jQuery Mobile - Dialoge
Quellcode und Aussichten
Abschließend hier noch einmal der gesamte Quellcode unserer HTML-Datei:
<!DOCTYPE HTML>
<html>
<head>
<title>Seitentitel </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale=1>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"> </script>
</head>
<body>
<div data-role="page" id="seite1">
<div data-role="header"> <h1>test </h1> </div>
<div data-role="content"> <h3>TEST </h3>
<p> <a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox </a> </p>
</div>
<div data-role="footer"> <div data-role="navbar">
<ul>
<li> <a href="#seite1" class="ui-btn-active" data-iconpos="top" data-icon="home">Seite1 </a> </li>
<li> <a href="#seite2" data-iconpos="top" data-icon="home">Seite2 </a> </li>
</ul>
</div> </div>
</div>
<div data-role="page" id="seite2">
<div data-role="header"> <h1>test2 </h1> </div>
<div data-role="content"> <h3>TEST </h3> </div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li> <a href="#seite1" data-iconpos="top" data-icon="home">Seite1 </a> </li>
<li> <a href="#seite2" class="ui-btn-active" data-iconpos="top" data-icon="home">Seite2 </a> </li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header"> <h2>Dialogbox </h2> </div>
<div data-role="content"> <p>Inhalt des Dialoges </p>
<a href="#seite1" data-rel="back" data-role="button">Schliessen </a>
</div>
</div>
</body>
</html>
In den nächsten Ausgaben dieser How-To-Reihe erhaltet ihr Einblicke in die Zusammenarbeit von jQuery Mobile mit HTML5-Elementen wie die Geolocation oder Webstorage und wie ihr am Ende aus eurer Web-App mit Hilfe von Phone-Gap eine native App macht.
Ich hoffe, ihr habt einen guten ersten Eindruck von der Arbeit mit jQuery Mobile bekommen und seht wie relativ einfach es tatsächlich ist, eine mobile Seite mit diesem Framework zu erstellen. Was sagt ihr? Hat jQuery Mobile bereits Einzug in euren Workflow erhalten oder bleibt ihr lieber doch bei Sencha-Touch ?
Weiterführende Links zum Thema jQuery Mobile:
jQuery Mobile Beta ist da – Die Features auf einen Blick - t3n News
Dokumentationen und Demos zu jQuery Mobile - jquerymobile.com
Icons für die Navbar - jquerymobile.com