Share
Das offizielle Release von jQuery Mobile 1.0 wurde kürzlich angekündigt. In diesem Lernprogramm erhalten Sie einen Überblick darüber, wie dieses beliebte Framework Sie bei der plattformübergreifenden und webbasierten App-Entwicklung unterstützen kann!
jQuery Mobile ist eine Erweiterung des beliebten JavaScript-Frameworks von jQuery. Wie der Name vermuten lässt, handelt es sich um eine Implementierung, die speziell auf mobile Geräte ausgerichtet ist, und hat sich im letzten Jahr sehr weiterentwickelt. Es ist heute eines der beliebtesten Frameworks für die Entwicklung webbasierter Anwendungen auf mobilen Geräten. Neben einer hervorragenden Lösung für webbasierte Standalone-Apps wird es häufig auch in ein SDK wie PhoneGap eingebettet, das als wesentlicher Bestandteil vieler nativer Anwendungen dient.
Das Team von jQuery Mobile hat hart daran gearbeitet, die Rahmenbedingungen so zu gestalten, wie sie heute sind, und die letzten drei Monate haben es speziell von einer Betaversion zu einer offiziellen Veröffentlichung gebracht.
Werfen wir einen Blick auf einige der Funktionen, die jQuery Mobile bietet. So können Sie schnell feststellen, dass Sie mit dieser großartigen Lösung eine einfache App einrichten können!
Bevor wir beginnen, müssen wir sicherstellen, dass wir ein paar Dinge am richtigen Ort haben. Zuerst müssen wir sicherstellen, dass wir das Ansichtsfenster für unser Gerät mithilfe von festlegen Meta Etikett.
Dann, nur damit wir diese unter iOS als Startseite verwenden können, können wir das Meta-Tag für festlegen App-fähig.
Die oben genannten Meta-Tags sind nicht unbedingt erforderlich, aber ich denke, dass sie oft eine gute Idee sind.
Als Nächstes müssen wir CSS und Javascript für jQuery Mobile einschließen. Im Moment werden wir das Standard-CSS verwenden, später werden wir jedoch die Struktur vom Stil trennen. Für das JavaScript müssen wir sicherstellen, dass wir Version 1.6.4 von jQuery und jQuery Mobile 1.0 enthalten. jQuery ist eine Abhängigkeit von jQuery Mobile. Daher müssen Sie zuerst die Kernbibliothek einschließen. Zum jetzigen Zeitpunkt liegt die neueste Version von jQuery Core bei 1,7, jQuery Mobile bietet jedoch derzeit nur Unterstützung für 1.6.4. Nach Angaben des Teams hinter dem Projekt steht jedoch bald Unterstützung für 1.7 zur Verfügung!
Jetzt können wir uns in den Hauptteil des Dokuments bewegen und die typische Struktur einer Seite erstellen. jQuery Mobile verwendet HTML5 Daten- atrribute, um bestimmten Elementen bestimmte Verhaltensweisen zuzuweisen, Datenrolle am populärsten ist, da es die Elementrolle innerhalb der Anwendung definiert. Fügen Sie das Attribut hinzu data-role = "Seite" zu Ihrem ersten Element auf der Seite.
Es muss kein div sein, es kann ein Abschnitt sein, falls gewünscht, aber das Endergebnis ist dasselbe - Sie haben Ihre erste Seite mit jQuery Mobile erstellt.
Im Moment können Sie Ihre Seite nur mit der Datenrolle Attribute. Sie können verwenden data-role = "header" und data-role = "footer" für die Kopf- bzw. Fußzeile und data-role = "Inhalt" für den Hauptteil des Inhalts.
jQuery Mobile-Seite Die Kopfzeile
Dies ist eine einzelne Seitenvorlage, die Sie kopieren können, um Ihre erste jQuery Mobile-Seite zu erstellen. Jeder Link oder jedes Formular von hier aus wird über Ajax eine neue Seite einblenden, um die animierten Seitenübergänge zu unterstützen.
Sehen Sie sich einfach die Quelle an und kopieren Sie den Code, um zu beginnen. Alle CSS- und JS-Dateien sind mit den jQuery-CDN-Versionen verknüpft, sodass dies sehr einfach einzurichten ist. Denken Sie daran, ein Meta-Viewport-Tag in den Kopf aufzunehmen, um die Zoomstufe einzustellen.
Diese Vorlage ist ein Standard-HTML-Dokument mit einem einzelnen "Seiten" -Container, im Gegensatz zu einer mehrseitigen Vorlage mit mehreren Seiten. Wir empfehlen dringend, Ihre Website oder App als eine Reihe separater Seiten zu erstellen, da diese sauberer und leichter ist und ohne JavaScript besser funktioniert.
Ihre App sollte jetzt wie folgt aussehen.
Und der vollständige Code dafür ist unten:
Einzelseitenvorlage Die Kopfzeile
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Sed sitzen amet odio ipsum, nicht volutpat sapien. Sedfolat gravida eros, vitae convallis dui rutrum. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque Eget Molestie Mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque Eget Molestie Mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque Eget Molestie Mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar
Die Fußzeile
Was Web-Apps angeht, ist dies ziemlich einfach, aber es ist ein Anfang. Alles mit jQuery Mobile ist schnell erledigt und eignet sich hervorragend für die schnelle Entwicklung eines Prototyps und die Entwicklung voll ausgestatteter Apps.
Natürlich ist die Verwendung einer gesamten Bibliothek für eine einzelne Seiten-App ein wenig übertrieben. Lass uns also zu den süßen Sachen gehen und ein paar Seiten zu unserer App hinzufügen.
Sie können zwei zusätzliche div-Container nach dem schließenden Tag des div mit hinzufügen data-role = "Inhalt" und data-role = "Seite", Die Seitendatenrolle sollte jedoch das id-Attribut auf "zwei" bzw. "drei" setzen. Ich bin mir sicher, dass Sie sehen, wohin wir gehen, also fügen Sie der ersten Seite auch eine "Eins" hinzu. Fügen Sie den zusätzlichen Seiten nach Bedarf Kopfzeilen, Inhalt und Fußzeilen hinzu.
Der zusätzliche Code sollte ungefähr wie folgt aussehen:
Die Kopfzeile
Dies ist die zweite Seite
Die Fußzeile
Die Kopfzeile
Dies ist der dritte Seiteninhalt
Die Fußzeile
Wenn Sie Ihre App jetzt überprüfen, werden Sie keinen Unterschied feststellen. Das liegt daran, dass wir von der ersten Seite aus auf diese Seiten verlinken müssen, bevor sie angezeigt werden. Fügen Sie auf der ersten Seite einige beliebige Links hinzu:
Seite zwei Seite drei
Wenn Sie den ersten Link zu Seite zwei öffnen, sehen Sie Ihre erste Paging-Animation. Momentan gibt es jedoch keine Möglichkeit, zur ersten Seite zurückzukehren. Fügen Sie einen Link zu den Seiten zwei und drei hinzu, die auf Seite eins zurückgehen.
Alles sollte jetzt schön hin und her gehen. Süss!
Im Moment sind unsere Links etwas langweilig, aber ohne zu viel Aufwand können wir diese in ein paar hübsche Buttons umwandeln.
Wenn Sie das Attribut hinzufügen data-role = "button" Um die Links auf jeder Seite anzuzeigen und Ihre App zu aktualisieren, sollten Sie jetzt einige gut aussehende Schaltflächen haben.
Im Moment ist unsere Seite gut dargestellt und wir können durch ein paar Seiten navigieren, aber alles sieht ein bisschen langweilig aus. Glücklicherweise wird jQuery Mobile mit Themen gebündelt. Diese Themen ermöglichen es dem Entwickler, die Farben und das allgemeine Erscheinungsbild der App sehr schnell zu ändern. Dies geschieht durch die Daten-Thema Attribut. Fahren Sie fort und fügen Sie hinzu data-theme = "a", data-theme = "b" und data-theme = "a" zu jedem der oben beschriebenen Seitendateien. Aktualisieren Sie Ihre App und Sie werden sehen, was passiert ist. Jede Ihrer Seiten sollte etwas anders aussehen!
Bis vor kurzem bestand die einzige Möglichkeit, ein eigenes benutzerdefiniertes Design zu erstellen, darin, ein zusätzliches Stylesheet hinzuzufügen und das mit dem jQuery-CSS importierte CSS zu überschreiben. Als der zweite Release Candidate für jQuery Mobile im Oktober herauskam, wurde das Stylesheet zum Glück in zwei getrennte Bereiche aufgeteilt, um Platz für den neu erschienenen ThemeRoller zu schaffen. Das erste Stylesheet befasst sich mit der Struktur der Anwendung, und das zweite behandelt das gesamte Design der App.
Gehen Sie zur Theme Roller-Seite und Sie werden vom folgenden Bildschirm begrüßt:
Auf der linken Seite haben Sie Ihre Designeinstellungen. Sie können wählen, ob Sie die einzelnen Abschnitte nacheinander filtern und anpassen möchten, was Sie möchten. Alternativ können Sie die Farben nach oben ziehen und ablegen, um die gewünschte Farbe zu erhalten. Anschließend können Sie Ihre Auswahl verfeinern das Seitenmenü. Sie können Ihre Designs mit maximal 26 Themen erstellen und anschließend die Designdatei herunterladen, um sie in Ihrer Anwendung zu verwenden.
Wenn Sie die ZIP-Datei herunterladen und den Inhalt extrahieren, erhalten Sie eine index.html Diese Datei enthält einige grundlegende Stile und eine Bestätigung, dass Ihr Stylesheet ordnungsgemäß heruntergeladen wurde. Sie haben dann einen Themenordner und darin befinden sich ein Bilderordner und zwei Stylesheets mit dem Namen, den Sie dem Thema beim Exportieren gegeben haben. Es gibt eine reduzierte Version für die Produktion oder eine Vollversion für alle Änderungen, die Sie vornehmen möchten.
Wenn Sie jetzt Ihr mobiles Projekt beginnen, fügen Sie einfach dieses Style Roller-Stylesheet anstelle des Standarddesigns CSS hinzu.
jQuery Mobile
Nun, wenn Sie auf die Farbfelder zugreifen, die Sie wie üblich mit jQuery Mobile erstellt haben, indem Sie die Option Daten-Thema In diesem Attribut referenzieren Sie statt der Standardeinstellungen auf das von Ihnen erstellte Theme Roller-CSS.
jQuery Mobile Die Kopfzeile
Seiteninhalt geht hier.
Die Fußzeile
Sie können das hinzufügen Daten-Thema Attribut zu einem Element auf der Seite. Wenn Sie es dem hinzufügen div mit dem data-role = "Seite" Element, dann wird dieses Themenfeld auf alle Elemente auf dieser Seite angewendet. Sie werden wahrscheinlich nicht bis zu 26 verschiedene Farbfelder verwenden, aber Sie werden höchstwahrscheinlich 3 oder 4 verschiedene Farbfelder verwenden, um eine schöne Mischung verschiedener Farben in Ihrer Anwendung zu erhalten. Spielen Sie mit dem ThemeRoller, es gibt viel mehr Optionen als nur die Standardfarben zu ziehen und zu löschen! Sie können Farbverläufe anpassen, Schatten werfen und sogar die Helligkeit und Sättigung der Farben ändern.
In den letzten drei RC-Versionen gab es einige wichtige Neuerungen im Framework. Wenn Sie also noch eine der Beta-Versionen verwenden oder einfach nicht wissen, dass RC1, RC2 oder RC3 veröffentlicht wurde, ist Folgendes ein wenig die Änderungen nachholen.
RC1 Einige Design-Optimierungen für die Collapsibles wurden eingeführt, indem der zusätzliche Schaltflächenstil um das +/- Symbol entfernt wurde und die Möglichkeit zum reduzierbaren Inhaltscontainer hinzugefügt wurde. Attribut hinzufügen Daten-Inhalt-Thema Der zusammenklappbare Behälter wurde auch von den Ecken des Kopfstücks unten kantig, wodurch das Aussehen des Behälters eine flüssigere Ästhetik erhält.
Wenn Sie mit Collapsables beginnen möchten, finden Sie hier den grundlegenden Code. Im Folgenden erhalten Sie einen einzigen zusammenklappbaren Container:
Kopfzeile in der Titelleiste
Inhalt innerhalb des reduzierbaren Containers.
Wenn Sie mehrere zusammenklappbare Container zusammenfassen möchten, um den beliebten Akkordeoneffekt zu erzielen, müssen Sie lediglich eine Gruppe zusammenklappbarer Container in einen Wrapper packen div mit der Datenrolle von zusammenlegbares Set.
Die Fixing-Optionen für iOS 5-Positionen wurden seit der Betaversion mit diesem RC verbessert, sie waren jedoch standardmäßig deaktiviert. Um diese Funktion verwenden zu können, müssen Sie die Überschreibung anwenden, wenn die mobileinit Ereignis wird ausgelöst. Standardmäßig wendet jQuery Mobile einige Markup-Verbesserungen an, wenn es geladen wird und zuvor geladen wurde document.ready Feuer Glücklicherweise ist eines der großen Vorteile von jQuery Mobile, dass die Einstellungen mit jQuery leicht konfiguriert werden können $ .extend Methode und Bindung an die mobileinit Veranstaltung. Stellen Sie sicher, dass die Skriptdatei mit Ihren Optionen enthalten ist nach dem jQuery, aber vor jQuery Mobile. Dafür würde Ihr Code wie folgt aussehen:
Accentsconagua
$ (document) .bind ("mobileinit", function () $ .extend ($. mobile, touchOverflowEnabled: true);); Es gibt eine Reihe konfigurierbarer Optionen, über die Sie hier lesen können. Einige, die ich regelmäßig verwendet habe, sind:
loadingMessage welches eine Zeichenfolge ist und standardmäßig auf "loading" gesetzt ist. pageLoadErrorMessage Wieder ist eine Zeichenfolge und standardmäßig auf "Fehler beim Laden der Seite" gesetzt.. defaultPageTransition ist eine Zeichenfolge und standardmäßig auf "Folie" gesetzt. RC2 wurde Mitte Oktober veröffentlicht und kaufte einige wichtige Änderungen mit. Es wurden Ergänzungen für die HTML5-Unterstützung für Eingabetypen einschließlich hinzugefügt Zeit, Datum und Farbe. Dies stellte lediglich sicher, dass diese Elemente bei der Anzeige auf der Seite gestaltet wurden. Die Möglichkeit, benutzerdefinierte Auswahlen als Teil einer Gruppe zu haben - damit sie integrierter wirken - wurde eingeführt. Wenn Sie Ihre wickeln Feldsatz in einem div mit dem data-role = "Kontrollgruppe" Attribut erscheinen Ihre Felder in einem einzigen Modul. Hinzufügen Datentyp = "horizontal" wird sie horizontal gruppieren.
Eine der größten Änderungen in der letzten Version bestand darin, die Stylesheets nach Design und Struktur zu trennen. Früher war es so, dass Sie ein Stylesheet aus jQuery mit einschließen, das alle strukturierten CSS-Elemente und die Stile für die verschiedenen Designs enthält. Wenn Sie dem CSS Anpassungen hinzufügen möchten, müssen Sie über ein eigenes Stlyesheet verfügen, das alle bereits festgelegten Einstellungen überschreibt. Da wir für mobile Geräte entwickeln und Bandbreite wichtig ist, wurden die Struktur- und Themen-Stylesheets natürlich getrennt.
Es gab weitere Ergänzungen und Fehlerbehebungen, darunter das Erstellen von Formularen mit einer Standardbreite von 100%, Dialogfelder mit einer maximalen Breite und eine neue Hilfsklasse, um Elemente so zu verbergen, dass sie auch weiterhin von assistiven Technologien wie Bildschirmlesegeräten aufgerufen werden können. Überprüfen Sie die Versionshinweise und das Änderungsprotokoll auf alle Details.
Die Freisetzung von RC3 Einige waren am 13. November ein Schock, da das Team gesagt hatte, dass die offizielle Version 1.0 direkt nach RC2 erscheinen würde. RC3 hat sich gelohnt, da eine ganze Reihe von Leistungsverbesserungen vorgenommen wurde. Das Team wollte nur sicherstellen, dass der Code gut läuft, bevor eine endgültige Version herausgegeben wird. Sie können hier über die RC3-Version nachlesen. Als erstes werden Sie die Leistungsverbesserungen bemerken. Es gab auch einige neue Ergänzungen:
Sie können jetzt einstellen linkBindingEnabled auf false (standardmäßig true), wenn Sie alle Klickereignisse mit einer anderen Bibliothek oder mit benutzerdefiniertem Code behandeln möchten. Sie können die Überlagerung, die mit dem Dialogfeld angezeigt wird, auch durch Festlegen der Einstellungen anpassen Daten-Overlay-Thema entweder auf dem Overlay-Seitenwrapper oder auf dem Auswahlmodul.
Schließlich wurde die Dokumentation komplett überarbeitet und es gab ein Update mit Demos aller Funktionen, ein paar Tipps für den Einstieg und ein paar Tipps zum Erstellen von jQuery-Apps zusammen mit Phonegap, die hier zu finden sind.
jQuery Mobile hat in den letzten Monaten einen langen Weg zurückgelegt, ganz zu schweigen vom vergangenen Jahr, und wenn es sich um eine übergeordnete Bibliothek handelt, wird es zur ersten Wahl für viele Entwickler, die sich mit der Entwicklung mobiler Web-Apps befassen. Die Lernkurve ist weitaus weniger als eine Lösung wie SenchaTouch oder Titanium Mobile, und meiner Meinung nach wird diese Tatsache die Adoption ansteigen lassen. ThemeRoller und die globalen Konfigurationsoptionen bieten darüber hinaus ein Maß an Anpassungsmöglichkeiten, das so einfach zu bedienen ist, dass selbst die meisten Programmierer es schnell finden sollten, eigene Designs zu erstellen.
Es gibt einige Dinge, die wir sicherlich gerne hinzugefügt hätten, und mit der Zeit - genau wie bei jQuery - habe ich keinen Zweifel, dass weitere Verbesserungen vorgenommen werden. Wenn Sie dies noch nicht getan haben, sollten Sie sich jQuery Mobile ansehen. Wenn Sie eine ältere Version verwenden, überprüfen Sie, ob Sie vor der Aktualisierung eine Versionshinweise für die Versionshinweise in der Änderungsliste gefunden haben.
Wir werden Sie sicherlich auf Mobiletuts + auf dem Laufenden halten, wenn Sie mit jQuery Mobile fortfahren. Wenn Sie jedoch weitere Tipps und Tutorials für jQuery Mobile erhalten möchten, teilen Sie uns dies bitte in den Kommentaren mit!
