jQuery Mobile ist ein originales jQuery-Plugin und erfordert, dass dieses zuvor installiert wurde, damit es funktioniert.
Sobald jQuery Mobile aktiviert ist, werden zwei Aktionen ausgeführt:
Erstens werden native Funktionen optimiert, um die Leistung in mobilen Teams zu verbessern.
Zweitens ändert es den HTML-Code und generiert ein Layout mit einer Reihe vordefinierter grafischer Elemente, die die Produktionsgeschwindigkeit erheblich beschleunigen.
Installieren Sie jQuery Mobile
Obwohl die Installation von jQuery Mobile, das direkt mit den in der Cloud gespeicherten Dateien verknüpft ist, auf Websites möglich und eine weit verbreitete Technik ist, wird dringend empfohlen, diese Technik nicht für PhoneGap-Anwendungen anzuwenden. Sehr oft wird Ihre Anwendung ohne Internetverbindung oder zeitweilige Verbindung verwendet. Wenn die jQuery-Dateien mit Dokumenten in der Cloud verknüpft sind, ist die Anwendung möglicherweise unbrauchbar.
Um dieses Framework zu installieren, müssen Sie zunächst jQuery auf der offiziellen Seite herunterladen:
http://docs.jQuery.com/Downloading_jQuery#Current_Release
Nach dem Herunterladen von jQuery müssen Sie das jQuery Mobile-Plugin von der offiziellen Website herunterladen:
http://jquerymobile.com/download/
Wir beginnen mit einem Beispiel, das es uns ermöglicht, die Programmierung und Struktur der Anwendung zu verstehen.
Wir werden eine HTML-Datei mit dem folgenden Code erstellen
<! DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = Gerätebreite, anfänglicher Maßstab = 1,0, maximaler Maßstab = 2" /> <title> Mobile Jquery-Anwendung </ title> <meta charset = "utf-8"> <link rel = "stylesheet" href = "js / jQueryMobile / jQuery.mobile.theme-1.1.0.min.css" /> <script src = "js / jQuery-1.7.2.min.js"> </ script> <script src = "js / jQueryMobile / jQuery.mobile-1.1.0.min.js"> </ script> </ head> <body> </ body> </ html>
j Mit Query Mobile können wir sehr schnell und mit relativ geringem Aufwand optimierte Schnittstellen für mobile Geräte erstellen.
Die Funktionsweise besteht darin, den ursprünglichen Code des Dokuments neu zu schreiben und einen neuen, komplexeren Code entsprechend den angeforderten Merkmalen und Argumenten zu generieren.
Eine interessante Funktion von jQuery Mobile ist, dass im Gegensatz zu einer Website, die von einem HTML-Dokument zu einem anderen wechselt, um Informationen anzuzeigen, die Seiten oder Bildschirme einer Anwendung von einem einzigen HTML-Dokument verarbeitet werden.
Die Seiten oder Bildschirme befinden sich in einer einzelnen Datei. In jQuery Mobile wird nur der Teil des Dokuments angezeigt, der den einzelnen Bildschirmen entspricht, während der Rest ausgeblendet bleibt. Auf diese Weise wird das Laden von Seiten erheblich beschleunigt und es können auch Ereignisse und Animationen zwischen einem Bildschirm und einem anderen verwaltet werden.
jQuery Mobile nutzt die neuen HTML5-Elemente in vollem Umfang und verwendet intensiv benutzerdefinierte Attribute, die mit dem Präfix “data-” definiert sind.
Mit data-role , einem der am häufigsten verwendeten Attribute in jQuery Mobile, können Sie beispielsweise die Rolle auf der Ebene der Funktionalität und des Erscheinungsbilds des Elements definieren, in dem sie enthalten ist. Bei der Definition der Rolle eines Elements können Sie mit diesem Attribut Seiten, Schaltflächen, Menüs und viele andere Elemente erstellen.
Durch Einfügen des Datenrollenattributs in ein beliebiges Tag konvertieren wir es in ein Element der Schnittstelle. Kein zusätzlicher Code erforderlich jQuery fügt alle grafischen Elemente, Klassen und sogar Animationen hinzu, die für den Betrieb dieses bestimmten Elements erforderlich sind.
Um beispielsweise eine Seite zu erstellen, verwenden wir das Attribut data-role = “page” auf folgende Weise:
<div data-role = "page" id = screen1 "> <h1> Bildschirm 1 </ h1> <ul data-role = "listview"> <li> <a href="#pantalla1"> Bildschirm 1 </a> </ li> <li> <a href="#pantalla2"> Bildschirm 2 </a> </ li> </ ul> </ div> <div data-role = "page" id = "pantall2"> <h1> Bildschirm 2 </ h1> <a href="#" data-rel="back" data-role="button"> Zurück </a> </ div>
Über den Beispiellink können Sie nicht nur zu Bildschirm 2 wechseln, jQuery Mobile hat automatisch eine Übergangsanimation eingefügt, die dem Erscheinungsbild einer nativen Anwendung ähnelt.
Nehmen wir den Link, den wir gerade erstellt haben, weiter und fügen das jQuery-Attribut Mobile data-role = “button” hinzu, sodass sich dieser Link wie ein Button verhält:
Um zur Hauptseite zurückzukehren, können Sie die vorherige Methode zum Verknüpfen eines Links mit der ID der Hauptseite anwenden oder, noch einfacher, das Attribut data-rel = “back” verwenden, mit dem die Anwendung zum unmittelbar vorherigen Bildschirm zurückkehrt .