Mobile App Design / Entwicklerhandbuch für Anfänger zu jQuery Mobile

In den letzten zwei bis drei Jahren haben wir ein enormes Wachstum bei der Browser- und Betriebssystemunterstützung für mobile Websites erlebt. Ich denke dabei vor allem an Apples iOS- und Googles Android-Plattformen. Andere wie PalmOS und Blackberry sind jedoch immer noch im Mix. Bis vor kurzem war es sehr schwierig, ein einziges mobiles Thema in all diese Plattformen zu integrieren.

JavaScript war ein Anfang, aber bis jetzt gab es noch keine wirklich einheitliche Bibliothek. jQuery Mobile nutzt die besten Funktionen von jQuery und portiert sie an eine mobile Webquelle. Die Bibliothek ähnelt eher einem Framework, das Animationen, Übergangseffekte und automatische CSS-Stile für grundlegende HTML-Elemente enthält. In diesem Handbuch hoffe ich, die Plattform so einzuführen, dass Sie sich beim Erstellen Ihrer eigenen mobilen jQuery-Apps wohlfühlen können.

Funktionen und Betriebssystemunterstützung

Ich schlage vor, jQuery Mobile über andere Frameworks zu lernen, weil es einfach ist. Der Code wurde auf dem jQuery-Kern aufgebaut und verfügt über ein aktives Team von Entwicklern, die Skripts schreiben und Fehler bearbeiten. Zu den zahlreichen Funktionen gehören HTML5-Unterstützung, von Ajax unterstützte Navigationslinks und Touch / Swipe-Ereignishandler.

Die Unterstützung variiert je nach Telefon und ist in drei Kategorien von A-C unterteilt. A ist die oberste Ebene mit vollständiger Unterstützung von jQuery Mobile, B bietet alles außer Ajax, während C grundlegendes HTML mit wenig bis kein JavaScript ist. Glücklicherweise werden die meisten gängigen Betriebssysteme vollständig unterstützt - ich habe unten eine Liste mit einigen Beispielen hinzugefügt.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Wenn Sie mehr darüber erfahren möchten, lesen Sie auf der offiziellen Dokumentseite nach. Es ist nicht in Kauderwelsch geschrieben und fühlt sich eigentlich sehr leicht an, ihm zu folgen. Konzentrieren wir uns nun auf die Grundlagen zum Erstellen einer jQuery-Mobilseite und wie wir eine kleine Anwendung erstellen können!

Die Standard-HTML-Vorlage

Damit Ihre erste mobile App funktioniert, gibt es eine Vorlage, mit der Sie beginnen sollten. Dies beinhaltet den jQuery-Basiscode zusammen mit dem mobilen JS und CSS, die alle extern vom jQuery-CDN gehostet werden. Schauen Sie sich meinen Beispielcode unten an.

Die einzigen Fremdelemente hier sollten die zwei Metatags sein. Die Spitze Sichtfenster Tag aktualisiert mobile Browser, um einen vollständigen Zoomeffekt zu verwenden. Wert einstellen width = Gerätebreite stellt die Seitenbreite genau auf die Breite des Telefonbildschirms ein. Und das Beste daran ist, dass die Zoom-Funktionen nicht deaktiviert werden, da sich jQuery Mobile an sich ändernde Layouts anpassen lässt.

Das nächste Meta-Tag X-UA-kompatibel zwingt Internet Explorer lediglich, das HTML in seiner letzten Iteration zu rendern. Ältere Browser und insbesondere mobile Geräte versuchen, unbekannte Rendering-Fehler zu umgehen.

Den Körperinhalt konstruieren

Hier kann jQuery mobile knifflig werden. Jede HTML-Seite ist nicht unbedingt eine Seite auf der mobilen Website. Das Framework verwendet die Datenattribute von HTML5, die Sie durch Anhängen nach Belieben erstellen können Daten- vorher. In ähnlicher weise data-role = "Seite" kann auf mehrere Divs in einer einzigen HTML-Datei festgelegt werden, sodass Sie mehr als eine Seite erhalten.

Sie würden dann mit Ankerverknüpfungen und einer eindeutigen ID zwischen diesen Seiten wechseln. Dieses Setup ist eine gute Idee für einfache, einfache Apps. Wenn Sie nur 3-5 Seiten benötigen, können Sie dies alles in einer einzigen Datei speichern. Sofern Sie nicht über viele schriftliche Inhalte verfügen, können Sie in diesem Fall die Verwendung von PHP einschließen, um Zeit zu sparen.

Überprüfen Sie das nachstehende Codebeispiel, wenn Sie verloren gehen.

 
 
 
Top-Titelleiste
 
 
 
Zeige eine andere Seite??
 
Tipp: Klicken Sie auf die Schaltfläche unten!
 
Über uns
 
  
 
 
 
Page 2 Hier
 
 
 
nur ein paar zusätzliche Inhalte.
 
Ich meine, du kannst geh zurück jederzeit.
 
 
   

Schauen Sie sich den Anker-Link auf der Indexseite für einen Moment an. Beachten Sie, dass ich das Attribut hinzugefügt habe data-role = "button" um den Link als Schaltfläche einzurichten. Aber anstatt die Standardstile zu verwenden, die wir verwenden data-theme = "c". Dadurch wird zwischen 1 von 5 Vorlagen (Themes a-e) gewechselt, die standardmäßig als CSS-Stile in jQ Mobile enthalten sind.

Meine Schaltfläche erstreckt sich auch über die gesamte Seitenbreite. Um das Verhalten zu entfernen, müssen Sie das Element von Block auf Inline-Anzeige setzen. Das Attribut dafür ist data-inline = "true" die Sie an jeden Ankertaster anhängen können.

Kopf- und Fußzeilenleisten

Ganz oben und unten in Ihren Anwendungen sollten Sie Kopf- und Fußzeileninhalt anhängen. Dieser Designstil wird häufig iOS-Apps zugeschrieben, die erst mit Apples App Store für Apples beliebt wurden. jQ Mobile verwendet Attribute der Datenrolle, um den Kopf-, Fuß- und Seiteninhalt zu definieren. Lassen Sie uns einen kurzen Blick auf diese Bereiche werfen.

Tasten der oberen Leiste

Standardmäßig unterstützt die obere Leiste einen Satz von zwei (2) Links auf ähnliche Weise wie andere mobile Apps. iOS verwendet standardmäßig a “zurück” Taste links und oft eine “Optionen” oder “Konfig” zur Rechten.

 
 die Einstellungen 
Page 2 Hier
 
 

Der obige Code konzentriert sich nur auf den div-Container für unsere About-Seite mit Header-Inhalt. Das zusätzliche HTML-Attribut data-add-back-btn = "true" funktioniert nur, wenn Sie zu einer Seitendatenrolle hinzugefügt werden. Der Zweck besteht darin, automatisch eine Zurück-Schaltfläche einzuschließen, die ähnlich der Zurück-Schaltfläche Ihres Browsers funktioniert.

Wir hätten manuell eine Zurück-Schaltfläche mit ähnlichem Code wie im Inhaltsbereich hinzufügen können. Ich finde, dass das Setup viel länger dauert, insbesondere auf mehreren Seiten. Alle Ankerverknüpfungen innerhalb des Kopfabschnitts werden standardmäßig in die Tastenpositionen links / rechts angezeigt. Durch die Nutzung class = "ui-btn-right" Dadurch wurde meine Schaltfläche Einstellungen neu positioniert, sodass Platz für die Zurück-Schaltfläche vorhanden ist. Außerdem verwende ich die sekundären Designstile, um etwas mehr Spunk zu erzeugen!

Fußzeilen-Navigation

Die Fußzeile fühlt sich auf den ersten Blick nicht sehr nützlich an. Hier können Sie urheberrechtlich geschütztes Material und andere wichtige Links speichern. Dies kann jedoch genauso einfach am unteren Rand Ihres Inhaltsbereichs hinzugefügt werden. Was nutzt also die Fußzeile??

Das beste Beispiel, das ich gesehen habe, verwendet Fußzeilen als Navigationssystem, bei dem Registerkartenlinks zur Steuerung der Seitennavigation angezeigt werden. Es gibt zahlreiche Optionen, mit denen Sie Vollbildeffekte auswählen, Symbole hinzufügen, die Platzierung anpassen und einige andere Attribute. Aber lassen Sie uns einfach eine einfache Fußzeilenavigation mit 3 Tasten erstellen, um eine Vorstellung davon zu bekommen, wie dies funktioniert.

• Vorschau der Live-Demo

Hier ist also ein Fußzeilencode für den About-Seitenabschnitt. data-role = "navbar" sollte dem Containerelement hinzugefügt werden, das eine ungeordnete Liste enthält, und NICHT das UL-Element selbst. Jeder Link innerhalb der Liste wird als Tab-Leiste behandelt, die dann basierend auf der Gesamtzahl der Links gleich aufgeteilt wird. Die zusätzliche Klasse von ui-body-b fügt nur ästhetische Effekte hinzu, wenn wir zwischen den wenigen verfügbaren Stilen wechseln.

Wenn Sie auf der ersten Schaltfläche feststellen, habe ich das Attribut Datenrichtung = "Rückwärts". Obwohl ich das Zurück-Button-Setup wie zuvor verwenden konnte, um zur Startseite zurückzukehren, habe ich stattdessen die Seiten-ID von verwendet #Index. Standardmäßig wechselt das App-Fenster nach rechts, was ziemlich kitschig wirkt, da Sie davon ausgehen, dass sich die Animation rückwärts bewegt. Sie können mit noch mehr dieser animierten Effekte herumspielen, wenn Sie Zeit haben. Schauen Sie sich die Seite mit den Übergängen in der jQuery-Dokumentation an.

Ajax & Dynamische Seiten

Das erste Segment hat wirklich die wichtigsten Punkte für die Erstellung einer mobilen App mit jQuery geöffnet. Ich möchte jedoch eine neue App starten, die Daten von einer externen Seite lädt. Ich verwende ein sehr einfaches PHP-Skript, um das zu erreichen $ _REQUEST [] variabel und zeigen entsprechend einen kleinen Dribbble-Schuss an. Die folgende Abbildung zeigt Ihnen, was wir bauen werden.

Zuerst mache ich eine index.html-Seite für die Standardvorlage. Für diesen Startbildschirm verwende ich eine Listenansicht, um jeden Link in der richtigen Reihenfolge anzuzeigen. Dies geschieht im Inhaltsbereich mit einem data-role = "listview" Attribut im Listencontainer. Ich habe das gleiche Header-Material wie zuvor herausgeschnitten und meinen gesamten Code von dieser neuen Indexseite hinzugefügt.

 
 
 
Oktober 2011 Aufnahmen
 
 
 
 
Erstes Bild
 
Zweites Bild
 
Drittes Bild
 
Viertes Bild
 
 
  
   

Alle Ankerlinks in meiner Listenansicht verweisen auf dieselbe Datei - index.php. Aber wir übergeben den Parameter imgid als Anforderungsvariable. In der Datei image.php nehmen wir die ID und testen sie anhand von 4 voreingestellten Werten. Bei Übereinstimmung verwenden wir die übereinstimmende Bild-URL und den Titel. Andernfalls wird nur eine Standard-Dribbble-Aufnahme angezeigt.

Image Loader-Skript

Das Script image.php hat immer noch die standardmäßige mobile jQuery-Vorlage im Code. Tatsächlich hat es eine sehr ähnliche Kopf- und Fußzeile, mit Ausnahme unseres Backlink-Attributs data-add-back-btn = "true". Beachten Sie, dass diese Schaltfläche nur angezeigt wird, wenn wir zuerst von index.html kommen! Laden Sie image.php direkt, und es wird nichts angezeigt, da es keine gibt “zurück” nach ... Ziehen.

Ich denke, wir können den Code ein wenig besser verstehen, wenn wir zuerst meine PHP-Logik untersuchen. Wir benutzen ein Schalter / Fall Methode zur Überprüfung der 4 verschiedenen IDs und Angabe eines Headertitels, einer Bild-URL und eines Original-Künstler-Quelllinks.

Alles scheint ziemlich unkompliziert - selbst ein PHP-Neuling sollte folgen können! Und wenn Sie es nicht verstehen, ist es für den jQuery-Code sowieso nicht wichtig, also machen Sie sich keine Sorgen. Wir sollten jetzt wechseln und die Vorlage betrachten, die ich auf dieser neuen Seite erstellt habe. Der gesamte HTML-Code wird nach diesem gesamten PHP-Block hinzugefügt. Ich habe die ID von verwendet “Bilder” für den Container und sogar die Kopfzeile für jedes neue Foto zu ändern.

 
 
 
 
 
 Original anzeigen
 
 
  
 

Sie können wahrscheinlich sehen, wie simpel diese Demo ist. Der ganze Zweck besteht jedoch darin, die Skalierbarkeit von jQuery mobile zu demonstrieren. PHP lässt sich problemlos in den Mix einbinden und mit ein paar Stunden Entwicklungszeit können Sie einige wirklich nette Apps erstellen.

Originelles Design mit Listen-Thumbnails

Ein letzter hinzugefügter Effekt, den wir implementieren können, ist die Verwendung von Miniaturansichten, um die Auflistungsseite zu beleben. Ich werde auch Text in ein Überschriften- und Beschreibungsfeld aufteilen, um sowohl den Titel als auch den Namen des Künstlers anzuzeigen.

Öffnen Sie zunächst Photoshop und erstellen Sie ein 80 × 80-Pixel-Dokument. Ich werde jedes Bild schnell in der Größe ändern und Miniaturbilder speichern, um sie an die jeweiligen Bilder anzupassen. Beim Aktualisieren der Listenansichtselemente sollten wir einige weitere Elemente hinzufügen.

Schauen Sie sich den folgenden Code und mein Demo-Beispiel an, um zu sehen, was ich meine.

[Vorschau Live Demo]

 
 
  
Wunderkit-Aufgaben
 
von Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
von Scott Hill
 
  
Forum-App für Facebook
 
von Ionut Zamfir
 
  
Twitter
 
von Sam Jones
 
 
 

Die Klassen für ui-li-Überschrift und ui-li-desc werden standardmäßig zum jQuery Mobile-Stylesheet hinzugefügt. Dies ist ähnlich wie bei der Bildklasse ui-li-daumen Dadurch wird jede Listenansichtsleiste automatisch an die Bildhöhe angepasst. Von hier aus können Sie nun mehr über das Frontend mit Animationen, Seiteneffekten, Stylesheets usw. Aufbauen.

Alternativ können Sie mit dem Aufbau eines Backend-Systems beginnen, um neue Bilder hochzuladen und automatisch Miniaturansichten zu trimmen, um sie in die Liste aufzunehmen. JQuery Mobile bietet so viel Flexibilität, dass Sie es fast nicht als JavaScript-Bibliothek bezeichnen können. Es handelt sich eher um ein komplettes HTML5 / CSS / jQuery-Framework für die Erstellung schneller und skalierbarer mobiler Apps.

Fazit

Zum Zeitpunkt der Erstellung dieses Artikels hat das jQuery Mobile-Team RC1.0 der Code-Bibliothek offiziell herausgegeben. Dies bedeutet, dass die meisten, wenn nicht alle wichtigen Bugfixes beseitigt wurden, und jetzt die Tester sich auf eine vollständige Veröffentlichung vorbereiten. Aus diesem Grund finden Sie im Internet nicht viele Informationen.

Aber im Laufe der Monate werden Webentwickler den Trend mit Sicherheit erkennen. Mobile Anwendungen und sogar mobile Weblayouts erfreuen sich mit der enormen Zunahme an Smartphones immer größerer Beliebtheit. Webentwickler haben keine Zeit, eine vollständige Programmiersprache für das Erstellen von Android- / iOS-Apps zu erlernen. Daher ist jQuery Mobile eine schlanke Alternative, die einen Großteil der Software für die mobile Industrie unterstützt und mit einer aktiven Entwicklergemeinschaft jeden Tag weiter wächst.