Wie baue ich eine Multi-Seite Mobile Dokument für HTML5 und CSS3 Programmierung

Es ist toll, ein HTML5 und CSS3 Webseite abspecken zu können, so dass es auf einem mobilen Gerät passt, aber offensichtlich, wenn die Seite kleiner ist, werden Sie mehr von ihnen brauchen. Mobile Anwendungen verwenden häufig eine Seite-Flipping Metapher mehr Daten in einem kleinen Stück Bildschirm Immobilien zu packen und die jQuery mobile Bibliothek hat ein weiteres wunderbares Werkzeug, das leicht zu machen.

bild0.jpg

Bisher sieht diese Anwendung genau wie die anderen jQuery Mobile Apps, die Sie bisher gesehen haben. Eine Sache ist anders, und das ist der Button in der Kopfzeile. Es ist sehr häufig für mobile Anwendungen Navigationsschaltflächen im Header zu haben. Drücken Sie die Schaltfläche Weiter.

image1.jpg

Nach einem geschickten Fade Übergang erscheint die nächste Seite. Dieser hat zwei Schaltflächen in der Kopfzeile. Mit Weiter nimmt wieder den Benutzer auf der dritten Seite.

image2.jpg

Die dritte Seite ist wieder sehr vertraut, aber dieses Mal hat es eine einzige Taste auf der linken Seite des Kopfes, und eine andere Taste im Hauptinhaltsbereich.

Das Interessante an diesen drei Seiten ist sie nicht drei Seiten überhaupt nicht! Es ist alles nur eine Seite, entworfen, zu handeln, wie drei verschiedene Seiten. Es gibt eine Reihe von Vorteilen auf diese Anordnung.

  • CSS und javascript-Ressourcen müssen nur einmal geladen werden: Dies hält das System konsistent und verbessert die Ladezeiten geringfügig.

  • Es gibt keine Verzögerung der Zeit: Wenn das Dokument geladen wird, das Ganze in Erinnerung, auch wenn nur ein Teil ist in einer Zeit sichtbar. Auf diese Weise können Sie schnell zwischen den Seiten zu bewegen, ohne dass für den Serverzugriff zu warten.

Sie würden normalerweise diese Art von Mechanismus implementieren, wenn Sie eine große Seite haben Sie als mehrere kleinere Seiten zu behandeln wollen, damit der Benutzer nicht scrollen muss.

Hier ist der Code für multiPage.html in seiner Gesamtheit.

multiPage.html  
Dies ist der Index
 
Die zweite Seite ist ähnlich wie die erste, exceptit ist nicht das erste, und es hat Text eher thanbuttons. Es ist das zweite page.If Sie die erste mögen, ich nehme an, Sie Cango zurück, aber Sie sollten wirklich auf die next gehen, weil ich es ist wirklich schön zu hören.
  
33333333 333333333 33333333

Zum Index

Während der Code für dieses Beispiel lang ist, ist es nicht viele neue Wege beschreiten.

  1. Laden Sie die jQuery mobile Inhalte auf.

    Ziehen Sie in der notwendigen CSS und javascript-Dateien aus dem jQuery.com Website.

  2. Bewerben Sie Ihre eigenen CSS.

    Selbst wenn Sie # 147-Anleihe # 148- CSS-Code von jQuery, sind Sie immer noch Ihre eigene hinzufügen. Sie können CSS hinzufügen, die Fußzeile und Pre-Elemente handeln, wie Sie wollen zu machen.

  3. Erstellen Sie Ihre Seiten.

    Sie können so viele Seiten zu bauen, wie Sie wollen, aber sie alle die gleiche allgemeine jQuery Mobile Muster folgen: Erstellen Sie eine Seite div mit Kopf, Inhalt und Fußzeile divs. Verwenden Sie die Daten-Rolle schreiben die Rolle jedes div anzuzeigen.

  4. Benennen Sie jede der Seitenebene divs mit der Ich würde Attribut.

    Da der Benutzer durch die Seiten werden Spiegeln wird, muss jede Seite eine Art Kennung. Geben Sie jeder Seite eine einzigartige Ich würde Attribut.

  5. Bauen Sie Schaltflächen in den Header.

    Die einzige wirklich neue Teil dieses Beispiels (abgesehen von der Seite-Spiegeln selbst # # 8202- 8202-) ist die Tasten in den Headern. Fahren Sie mit der Seite 2-Header, und Sie werden sehen, was wirklich interessant:

    zurück
    Seite Zwei
    Nächster

    Wenn Sie einen Link innerhalb eines Elements mit der Definition Kopfdaten-Rolle, dass Link wird automatisch eine Schaltfläche werden. Darüber hinaus wird die erste derartige Verbindung definiert automatisch nach links des Headers platziert werden, und der zweite nach rechts angeordnet werden.

  6. Erzwingen Sie eine einzige Taste auf der rechten Seite.

    Wenn Sie eine Taste wollen auf der rechten Seite zu sein, fügen Sie eine Klasse auf die Schaltfläche:

    Seite eins
    Nächster

  7. Verwenden Sie den internen Anker zwischen den Seiten zu überspringen.

    Werfen Sie einen Blick auf die URLs in allen Tasten. Sie beginnen mit einem Hash, der einen internen Link im Dokument anzeigt. Denken Sie daran, wenn dies fühlt sich an wie drei verschiedenen Seiten für den Benutzer, ist es wirklich alle eine große Web-Seite.

  8. Experimentieren Sie mit den Übergängen.

    Werfen Sie einen sorgfältigen Blick auf die Schaltfläche auf Seite drei:

    Zum Index

    Diese Schaltfläche hat eine besondere Daten-Übergang Attribut. Standardmäßig tauschen mobilen Seiten mit einem Fade. Sie können den Übergang auf gleiten, slideup, herunterrutschen, Pop, verblassen, oder Flip. Sie können auch den Übergang umkehren, indem Sie ein anderes Attribut hinzu: Daten-Richtung = # 148-Reverse # 148-.

Ähnliche

Menü