Wie man eine einfache jQuery Mobile Seite für HTML5 und CSS3 erstellt Programmierung - Dummies

HTML5- und CSS3-Programmierer verwenden sehr gerne mobile Websites mit AJAX, um eine jQuery-Add-On-Bibliothek zu verwenden. genannt jQuery Mobile . Jquery Mobile ist eine leistungsstarke Kombination aus JavaScript und CSS-Code, der auf der Bibliothek aufgebaut ist.

Die jQuery-Bibliothek verwendet eine normale HTML5-Seite und ändert sie so, dass ein natives Erscheinungsbild emuliert wird. Der Code ähnelt gewöhnlicher HTML-Code:

Mobile Demo

JQuery Mobile Demo
jQuery Mobile Website

Dies ist eine gewöhnliche Liste
Codiert, um wie
eine mobile Liste

von > HTML All in One for Dummies Einige Details machen aus dieser Seite ein mobiles Wunder:

Fügen Sie das jQuery mobile CSS ein.

1. Dies ist eine spezielle CSS-Datei, die entworfen wurde, um HTML-Elemente in ihre mobilen Gegenstücke zu transformieren. Obwohl Sie es selbst herunterladen können, verweisen die meisten Entwickler direkt auf die jQuery-Site.

   Nehmen Sie die standardmäßige jQuery-Bibliothek auf.

2. Ein Großteil des Codes basiert auf jQuery, also integrieren Sie auch die jQuery-Bibliothek. Wieder einmal müssen Sie jQuery von der Haupt-jQuery-Website abrufen.

   Integrieren Sie die jQuery-Bibliothek für Mobilgeräte.

3. Dies ist eine JavaScript-Bibliothek, die die Bibliothek erweitert, um neues mobilespezifisches Verhalten hinzuzufügen.

   Fügt dem Hauptdiv ein data-role = "page" -Attribut hinzu.

4. Erstellen Sie ein Hauptdiv in Ihrer Seite und geben Sie das Attribut an. Dies ist ein benutzerdefiniertes Datenrollenattribut, das von jQuery mobile hinzugefügt wurde. jQuery betrachtet die Datenrollen der verschiedenen Elemente und wendet automatisch Stil- und Verhaltensänderungen auf diese Elemente an. Weisen Sie Ihrer Haupt-Div die Datenrollenseite zu. Dies weist den Browser an, das gesamte div als eine Seite zu behandeln.

   Geben Sie ein Datethema an.

5. Sie können ein Daten-Design auf ein beliebiges Element anwenden, aber Sie wenden fast immer ein Thema auf die Seite an. jquery mobile wird mit einer Reihe von integrierten Standardthemen geliefert, die "a" bis "e" genannt werden. "Experimentiere, um das zu finden, was dir gefällt, oder du kannst mit der speziellen mobilen Version des ThemeRoller deine eigenen erstellen.

   Fügen Sie weitere Divs in Ihre Seite ein.

6. Fügen Sie ein paar weitere Divs in Ihre Seiten-Div. Im Allgemeinen haben Sie drei: Kopfzeile, Inhalt und Fußzeile.

   Geben Sie den Header div mit data-role = "header" an.

7. Indem Sie Ihre Header-Informationen in ein div-Element mit der Datenrolle "header" einfügen, weisen Sie jQuery an, dieses Element als mobilen Header zu behandeln und die entsprechenden Stile anzuwenden. Der Header enthält normalerweise ein

   -Tag.

   In der Regel geben Sie den Header an, der mit dem Attribut data-position = "fixed" repariert werden soll. Dies stellt sicher, dass der Header an seinem Platz bleibt, wenn der Rest des Inhalts gescrollt wird, was ein typisches Verhalten in einer mobilen Anwendung ist.

   Richten Sie eine Inhalts-Div ein.

8. Fügen Sie ein div mit data-role = "content" hinzu, um den Hauptinhaltsbereich Ihrer Seite einzurichten. Jedes der Hauptkörperelemente Ihrer Website sollte in diesem Segment enthalten sein.

   Jeder Link kann in eine Schaltfläche umgewandelt werden.

9. Die Standardkonvention in Web-Apps besteht darin, Verknüpfungen in Schaltflächen umzuwandeln, die ein größeres Ziel als eine Maus-basierte Eingabe haben. Es ist einfach, einen Link zu einer Schaltfläche zu konvertieren, indem Sie das Attribut data-role = "button" zum Anker-Tag hinzufügen.

   Konvertiert Listen in mobile Listenansichten.

10. Listen haben auch spezielle Konventionen in der mobilen Welt. Sie können das Datenrollenattribut verwenden, um eine Liste in eine Listenansicht zu verwandeln.

    Erstellen Sie eine Fußzeile.

11. Fügen Sie ein weiteres div hinzu, dessen Datenrolle auf "footer" gesetzt ist. Normalerweise wird die Fußzeile (wie der Header) mit dem Datenpositionsattribut festgelegt.