Wie man einen Grund jQuery Mobile-Seite für HTML5 und CSS3 Programmierung Bauen
Es ist ein sehr beliebter Ansatz unter HTML5 und CSS3-Programmierer für den Aufbau mobiler freundliche Websites mit AJAX, und das ist ein Add-on-Bibliothek jQuery verwenden genannt jQuery mobile. JQuery Mobile ist eine leistungsfähige Kombination von javascript und CSS-Code auf der Oberseite der Bibliothek gebaut.
Die jQuery-Bibliothek funktioniert, indem eine normale HTML5-Seite zu nehmen und sie in einer Weise ändern, die einen nativen Look and Feel emulieren. Der Code sieht viel wie gewöhnliche HTML:
Mobil Demo JQuery Mobile-Demo
- Dies ist ein gewöhnlicher Liste
- Codierte aussehen
- eine mobile Liste
von HTML All in One for Dummies
Einige Details machen diese Seite in ein mobiles Wunder:
Fügen Sie die jQuery Mobile CSS.
Dies ist eine spezielle CSS-Datei entwickelt, um HTML-Elemente in ihre mobilen Pendants verwandeln. Auch wenn Sie es sich herunterladen können, verknüpfen die meisten Entwickler direkt auf die jQuery Standort.
Fügen Sie die Standard-Bibliothek jQuery.
Ein Großteil der Code auf jQuery basiert, zu integrieren, so dass die jQuery Bibliothek als auch. Wieder einmal müssen Sie ziehen jQuery vom Haupt jQuery Webseite.
Integrieren Sie die jQuery mobile Bibliothek.
Dies ist eine javascript-Bibliothek, die Bibliothek erweitert neue mobile spezifisches Verhalten hinzuzufügen.
Füge hinzu ein data-role = # 148-Seite # 148- Attribut auf dem Haupt div.
Erstellen Sie ein Haupt div auf Ihrer Seite und bieten das Attribut zu. Dies ist ein Brauch Daten-Rolle Attribut von jQuery Mobile hinzugefügt. jQuery sieht über die Daten Rollen der verschiedenen Elemente und wendet Stil und Verhaltensänderungen auf diese Elemente automatisch. Weisen Sie die Daten Rolle Ihre Haupt div Seite. Dies teilt der Browser die gesamte div als Seite zu behandeln.
Geben Sie einen Datenthema.
Sie können eine Daten Thema auf jedes Element anwenden, aber Sie fast immer ein Thema für die Seite anwenden. jQuery Mobile kommt mit einer Reihe von Standard-Design eingebaut, genannt # 147-a # 148- durch # 147-e. # 148- Experiment, das zu finden Sie mögen, oder Sie können Ihre eigene mit der speziellen mobilen Version des Build Themeroller.
Fügen Sie mehr divs innerhalb Ihrer Seite.
Fügen Sie ein paar mehr divs innerhalb Ihrer Seite div. Im Allgemeinen haben Sie drei: Header, Inhalt und Fußzeile.
Geben Sie den Header div mit data-role = # 148-Header # 148-.
Durch die Zusammenarbeit mit einem alle Ihre Header-Informationen in einem div platzieren # 147-Header # 148- Daten Rolle, sind Sie jQuery zu sagen, dieses Element als mobile Header zu behandeln und die entsprechenden Stile anwenden. Der Header enthält typischerweise einen Tag.
Typischerweise werden geben Sie den Header mit den zu befestigenden data-position = # 148-Fest # 148- Attribut. Dadurch wird sichergestellt, der Header an Ort und Stelle bleiben, wenn der Rest der Inhalt verschoben wird, die in einer mobilen Anwendung typische Verhalten.
Richten Sie ein Inhalt div.
Fügen Sie ein div mit data-role = # 148-content # 148- den Hauptinhaltsbereich Ihrer Seite einrichten. Jede der Hauptkörper Elemente Ihrer Website sollte in diesem Segment gehen.
Jeder Link kann auf eine Schaltfläche konvertiert werden.
Die Standard-Konvention in Web-Anwendungen ist Links in Schaltflächen zu drehen, die eine größere Ziel als Maus-basierte Eingabe haben. Es ist einfach, indem Sie das auf einen Link zu einer Schaltfläche zu konvertieren data-role = # 148-Taste # 148- Attribut auf den Anker-Tag.
Konvertieren Sie Listen auf mobile Ansichten verwendet.
Listen haben auch spezielle Konventionen in der mobilen Welt. Sie können die Verwendung Daten-Rolle Attribut jede Liste in eine zu verwandeln Listenansicht.
Bauen Sie eine Fußzeile.
Fügen Sie eine weitere div mit Daten-Rolle einstellen # 147-footer # 148-. Normalerweise wird die Fußzeile (wie der Header) mit dem festen Daten-Position Attribut.