Konstruieren Sie eine Mobile Website mit jQuery Mobile

jQuery mobile ist ein Touch-optimierte HTML5-basierten Benutzeroberfläche System.Es basiert auf dem jQuery und jQuery UI-Plattform gebaut, und es ist ideal für die schnelle mobile Entwicklung.Das jQuery Mobile Framework nutzt spezielle Attribute Ihre Elemente zu definieren und Stil, ohne detaillierte Klasse zu schreiben selbst-Regeln.

1. 1
   Navigieren Sie zu jQuery mobile Homepageklicken und dann auf dem Register "Laden" aus dem Hauptmenü.

   Werbung

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
2. 2
   Scroll down auf der Download-Seite helfen, bis Sie eine Copy-and-Paste-Snippet für CDN gehosteten Dateien Abschnitt sehen.

   Kopieren Sie die Zeilen Code in Ihre Zwischenablage.Diese drei Referenzdateien sind alles, was Sie brauchen, den Rahmen zu implementieren.

   instagram viewer

   Werbung

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
3. 3
   Öffnen Sie Ihre bevorzugte Software-Entwicklung helfen und eine neue HTML-Dokument erstellen.

   Wenn Sie keine Software-Entwicklung haben, öffnen Sie den Editor-Anwendung auf Ihrem Computer.

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
4. 4
   Fügen Sie die Verweise auf das HTML-Dokument helfen.

   In Ihrem Kopf Tags, fügen Sie die CDN-hosted-Datei Links.

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
5. 5
   Erstellen eines ersten "Seite" helfen.

   Mit dem jQuery Mobile Framework erstellen Sie mehrere Seiten innerhalb der gleichen HTML-Dokument.Innerhalb der Körper Tags, erstellen Sie einen div-Container.Fügen Sie die Daten-Rolle Attribut, und weisen Sie ihm einen Wert von Seite .Schließlich fügen Sie die ID Attribut und einen Wert von Hause zuweisen.

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
6. 6
   Fügen Sie den Header , Inhalt und Fußzeile div-Container helfen.

   In Ihrer Seite div-Container, erstellen Sie drei weitere div-Tags.Mit Hilfe der Daten-Rolle Attribut, weisen Werte von Header , Inhalt und Fußzeile sind.Dies ist die grundlegende Struktur einer jQuery Mobile Seite.

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
7. 7
   hinzufügen Kopf- und Fußzeile Titel helfen.

   Mit dem h1 Tag Überschrift, erstellen Titel für Ihre Kopf- und Fußzeilen-Tags Überschrift.

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
8. 8
   Erstellen Sie eine zweite Seite helfen.

   Außerhalb des div-Container, dessen Daten-Rolle Attribut auf Seite gesetzt, einen neuen div-Container erstellen.Fügen Sie die Daten-Rolle Attribut, und legen Sie es auf Seite.Fügen Sie die ID Attribut, und legen Sie es auf Seite 2. Schließlich fügen div-Container für den Header, Inhalt und Fußzeile, so dass die Struktur ähnelt der Homepage.

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
9. 9
   erstellen Menüseite helfen.

   Die Menüseite wird auf die gleiche Art und Weise wie die ersten beiden Seiten erstellt werden, aber ohne eine Fußzeile.Erstellen Sie ein div-Container, und legen Sie seine Daten-Rolle Attribut Seite.Fügen Sie die ID Attribut, und geben Sie ihm einen Wert von main_nav.

   War dieser Schritt hilfreich?Ja |Nein |Ich brauche
10. 10
    Erstellen der Navigationsmenüstruktur helfen.

    Im Inneren des Inhalt div-Container, eine ungeordnete Liste erstellen.Fügen Sie die Daten-Rolle Attribut und seinen Wert auf Listenansicht.Fügen Sie die Daten-Einschub Attribut, und setzen Sie den Wert auf true.Innerhalb der ul Tags für die ungeordnete Liste, fügen Sie zwei Listenelement-Tags( li-Tags).

    War dieser Schritt hilfreich?Ja |Nein |Ich brauche
11. 11
    Erstellen Sie die Menü-Links helfen.

    Innerhalb der ersten Listenelement-Tags, ein Anker-Tag erstellen.Fügen Sie den href Attribut auf den Anker-Tag.Verwenden Sie das Hashtag-Symbol ein ID Attribut zum Ziel, und geben Sie dann "nach Hause".Dies zielt auf die "Heimat" div-Container.Folgen Sie dem gleichen Vorgang für den zweiten Listenelement, aber diesmal Typ Hashtag "page2", um die zweite Seite zu zielen.

    War dieser Schritt hilfreich?Ja |Nein |Ich brauche
12. 12
    hinzufügen Menü Links zu anderen Seiten helfen.

    Nun, da Ihr Menü erstellt wird, müssen Sie Anker-Tags auf Ihrer "Heimat" zu setzen und "Seite 2" Seiten, darauf zuzugreifen.Blättern Sie nach oben und die Header Abschnitt Ihrer Homepage.Fügen Sie ein Anker-Tag im Header Container, kurz vor dem h1 -Tag.Unter Verwendung der gleichen Verknüpfungsvorgang, wie Sie mit dem Menü haben, setzen Sie die href Attribut Hashtag "main_nav".Fügen Sie die Daten-Rolle Attribut, und geben Sie ihm einen Wert von Taste.Fügen Sie die Daten-Symbol Attribut, und geben Sie ihm einen Wert von Bars.Schließlich fügen Sie die Daten-iconpos Attribut und einen Wert von notext geben.Dies schafft eine Taste auf der linken Seite Ihres Kopftitel.Wiederholen Sie diesen Schritt für die page2 Seite.

    War dieser Schritt hilfreich?Ja |Nein |Ich brauche
    Werbung

• Erstellen Sie so viele Seiten innerhalb der gleichen HTML-Dokument helfen, wie Sie möchten.jQuery Mobile verwendet ein System AJAX-Navigation, die automatisch anspringt, wenn Sie mehrere Seiten im selben Dokument erstellen.In
• die Daten-Übergang Attribut Anker für eine optisch Beschwichtigung Übergang zwischen den Seiten.Die zur Verfügung stehenden Übergänge sind fade, Pop, Flip, drehen, Fluss, slidefade, Rutsche, slideup und slidedown.
• Verwenden Sie die Daten-Thema Attribut fast jedes Element in Ihrem Projekt zu gestalten.Standardmäßig kommt jQuery Mobile mit fünf Farbmuster für Sie zu nutzen.Die Thematisierung System verwendet Buchstaben als Werte.Folglich nimmt die Daten Thema Attributwerte von a, b, c, d und e, wenn Sie es zuerst herunterladen.Überprüfen Sie die jQuery Mobile Themeroller aus ein eigenes Design zu erstellen, mit bis zu 26 verschiedenen Farbmuster!
• Verwenden Sie die Daten-Position Attribut "sticky" oder feste Kopf- und Fußzeilen für Ihre Website zu erstellen.Dieses Attribut auf einen div Container, der seine Daten-Rolle Set hat zu Kopf- oder Fußzeile, und die Daten-Position Wert festgelegt.
• Überprüfen Sie die jQuery Mobile Color Set aus mit 26 verschiedenen Themen Muster-Entwicklung zu beginnen.

• Seien Sie sicher, dass HTML-Kommentare zu verwenden, um Ihre jQuery Mobile Seiten trennen.Das spart Ihnen eine Menge Zeit auf der Straße, als einzelne HTML-Dokument mit mehreren "Seiten" ziemlich schnell aufgebläht wird.

• jQuery Mobile Farbe Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Wenn Sie Probleme mit einem dieser Schritte haben, fragen Sie einFrage für weitere Hilfe, oder per Post in den Kommentaren Abschnitt weiter unten.