Inhaltsverzeichnis
Einmal aktiv, jQuery Mobile macht zwei Dinge:
Erstens optimiert es native Funktionen, um deren Leistung auf mobilen Geräten zu verbessern.
Zweitens modifiziert es den HTML-Code und generiert ein Layout mit einer Reihe vordefinierter grafischer Elemente, die die Produktionsgeschwindigkeit erheblich beschleunigen.
jQuery Mobile installieren
Obwohl es möglich und eine sehr gängige Technik auf Websites ist, jQuery Mobile durch direktes Verknüpfen mit in der Cloud gespeicherten Dateien zu installieren, wird dringend empfohlen, diese Technik nicht für PhoneGap-Anwendungen anzuwenden. Sehr oft wird Ihre Anwendung ohne Internetverbindung oder mit einer zeitweiligen Verbindung verwendet. Werden die jQuery-Dateien mit Cloud-Dokumenten verknüpft, würde die Anwendung möglicherweise unbrauchbar.
Um dieses Framework zu installieren, sollten Sie als erstes jQuery von seiner offiziellen Seite herunterladen:
http://docs.jQuery.com/Downloading_jQuery#Current_Release
Sobald jQuery heruntergeladen wurde, müssen Sie das jQuery Mobile-Plugin von seiner offiziellen Website herunterladen:
http://jquerymobile.com/download/
Wir beginnen mit einem Beispiel, das es uns ermöglicht, die Programmierung und den Aufbau der Anwendung zu verstehen.
Wir erstellen eine HTML-Datei mit dem folgenden Code
Jquery-Mobilanwendung
Mit jQuery Mobile können wir sehr schnell und mit relativ geringem Aufwand mobilfreundliche Oberflächen erstellen.
Die Funktionsweise besteht darin, den ursprünglichen Code des Dokuments umzuschreiben und einen neuen, komplexeren Code gemäß den Merkmalen und angeforderten Argumenten zu generieren.
Ein interessantes Feature von jQuery Mobile ist, dass im Gegensatz zu einer Website, die von einem HTML-Dokument in ein anderes übergeht, um Informationen anzuzeigen, die Seiten oder Bildschirme einer Anwendung von einem einzigen HTML-Dokument verwaltet werden.
Die Seiten oder Bildschirme befinden sich in einer einzigen Datei, jQuery Mobile verwaltet sie so, dass nur der Teil des Dokuments angezeigt wird, der jedem Bildschirm entspricht, während der Rest verborgen bleibt. Auf diese Weise wird das Laden von Seiten erheblich beschleunigt, außerdem können Ereignisse und Animationen zwischen Bildschirmen verwaltet werden.
jQuery Mobile nutzt die neuen HTML5-Elemente voll aus und macht intensiven Gebrauch von benutzerdefinierten Attributen, die mit dem Präfix "data-" definiert sind
Zum Beispiel Datenrolle, eines der am häufigsten verwendeten Attribute in jQuery Mobile, ermöglicht es Ihnen, die Rolle auf der Ebene der Funktionalität und des Aussehens des Elements zu definieren, das sie enthält. Indem Sie die Rolle eines Elements definieren, können Sie mit diesem Attribut Seiten, Schaltflächen, Menüs und viele weitere Elemente erstellen.
Durch Einfügen des data-role-Attributs in ein beliebiges Tag machen wir es zu einem Interface-Element. Sie müssen keinen zusätzlichen Code hinzufügen jQuery Fügen Sie 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 Sie das Attribut Datenrolle = ”Seite” daher:
- Bildschirm 1
- Bildschirm 2
Nehmen wir den soeben erstellten Link noch etwas weiter und fügen das jQuery Mobile-Attribut data-role = ”button” hinzu, damit sich dieser Link wie ein Button verhält:
Um zur Hauptseite zurückzukehren, können Sie die vorherige Technik anwenden, einen Link mit der ID der Hauptseite zu verknüpfen, oder noch einfacher, Sie können das Attribut data-rel = ”back” verwenden, das die Anwendung zum unmittelbar vorherigen Bildschirm zurückbringt .Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
