Erstellen eines mobilen Dokuments für mehrere Seiten für HTML5 und CSS3 Programmierung - Dummies

Es ist großartig, eine HTML5- und CSS3-Webseite so Es passt auf ein Mobilgerät, aber wenn die Seite kleiner ist, benötigen Sie mehr davon. Mobile Apps verwenden häufig eine Metapher, um mehr Daten in ein kleines Stück Bildschirmfläche zu packen, und die jQuery-Bibliothek hat ein weiteres wunderbares Werkzeug, um dies zu vereinfachen.

Bis jetzt sieht diese Anwendung genau wie die anderen jQuery-Apps aus, die Sie bisher gesehen haben. Eines ist anders, und das ist der Knopf in der Kopfzeile. Mobile Apps haben häufig Navigationsschaltflächen im Header. Drücken Sie die Weiter-Taste.

Nach einem raffinierten Überblendvorgang erscheint die nächste Seite. Dieser hat zwei Knöpfe in der Kopfzeile. Durch erneutes Drücken von Weiter gelangen Sie auf die dritte Seite.

Die dritte Seite ist wieder sehr vertraut, aber diesmal hat sie eine einzelne Schaltfläche auf der linken Seite der Kopfzeile und eine weitere Schaltfläche im Hauptinhaltsbereich.

Das Interessante an diesen drei Seiten ist, dass sie nicht drei Seiten umfassen! Es ist alles nur eine Seite, entworfen, um sich wie drei verschiedene Seiten zu verhalten. Es gibt ein paar Vorteile für 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ögerungszeit: Wenn das Dokument geladen wird, befindet sich das Ganze im Speicher, auch wenn immer nur ein Teil sichtbar ist. Auf diese Weise können Sie schnell zwischen Seiten wechseln, ohne auf den Serverzugriff warten zu müssen.

Normalerweise implementieren Sie diese Art von Mechanismus, wenn Sie eine große Seite haben, die Sie als mehrere kleinere Seiten behandeln möchten, damit der Benutzer nicht scrollen muss.

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

Mehrfachseite. html #foot {Schriftgröße: 75%; Schriftstil: Kursiv; text-align: center;} vor {margin-left: auto; margin-right: auto; Hintergrundfarbe: weiß; width: 8em;}

Seite One
next
Dies ist der Index

Seite 1
Seite 2
Seite 3
aus HTML All in One für Dummies prev

Seite zwei
nächste
Die zweite Seite ähnelt der ersten, nur dass sie nicht die erste Seite ist, und sie hat eher Text als Schaltflächen. Es ist die zweite Seite. Wenn du das erste magst, nehme ich an, dass du zurückgehen kannst, aber du solltest wirklich auf die nächste Seite gehen, weil ich höre, dass es wirklich nett ist.
aus HTML All in One für Dummies prev

Seite Three
3333333 3 3 3 33333 3 3 3 3333333

Zum Index
von HTML All in One for Dummies

Während der Code für dieses Beispiel lang ist, bricht es nicht viel Neuland.

1. Laden Sie den jQuery-Inhalt für Mobilgeräte hoch.

   Holen Sie die erforderlichen CSS- und JavaScript-Dateien aus der jQuery ein. com Website.

2. Wenden Sie Ihr eigenes CSS an.

   Selbst wenn Sie CSS-Code aus jQuery "ausleihen", können Sie Ihre eigenen hinzufügen. Sie können CSS hinzufügen, um die Fuß- und Vor-Elemente so zu gestalten, wie Sie möchten.

3. Erstellen Sie Ihre Seiten.

   Sie können so viele Seiten erstellen, wie Sie möchten, aber sie folgen alle dem gleichen allgemeinen jQuery-Muster: Erstellen Sie eine Div-Seite mit Kopf-, Inhalts- und Fußzeilen-Divs. Verwenden Sie das Datenrollenattribut, um die Rolle jedes div anzugeben.

4. Benennen Sie jedes Divis auf Seitenebene mit dem id-Attribut.

   Da der Benutzer die Seiten durchblättert, benötigt jede Seite eine Art Bezeichner. Geben Sie jeder Seite ein eindeutiges ID-Attribut.

5. Erstellen Sie Schaltflächen innerhalb der Header.

   Der einzige wirklich neue Teil dieses Beispiels (abgesehen vom Umblättern selbst) sind die Schaltflächen in den Überschriften. Gehen Sie weiter zur Seite 2 Header, und Sie werden etwas wirklich Interessantes sehen:

   prev
   
   Page Two
   next
   

   Wenn Sie einen Link innerhalb eines Elements mit der Header-Datenrolle definieren, wird dieser Link wird automatisch zu einem Button. Außerdem wird der erste definierte Link automatisch links neben dem Header platziert und der zweite Link wird rechts platziert.

6. Erzwingt eine einzelne Taste nach rechts.

   Wenn Sie eine Schaltfläche auf der rechten Seite haben möchten, fügen Sie der Schaltfläche eine Klasse hinzu:

   
   Seite Eins
   nächste
   

7. Verwenden Sie interne Anker, um zwischen den Seiten zu springen.

   Schauen Sie sich die URLs in allen Schaltflächen an. Sie beginnen mit einem Hash, der einen internen Link innerhalb des Dokuments anzeigt. Denken Sie daran, obwohl dies sich für den Benutzer wie drei verschiedene Seiten anfühlt, ist es wirklich nur eine einzige große Webseite.

8. Experimentiere mit Übergängen.

   Schauen Sie sich die Schaltfläche auf Seite 3 genau an:

   Zum Index
   

   Diese Schaltfläche hat ein spezielles Datenübergangsattribut. Standardmäßig werden mobile Seiten mit einer Überblendung ausgetauscht. Sie können die Überblendung auf "Dia", "Slideup", "Slidedown", "Pop", "Fade" oder "Flip" setzen. Sie können den Übergang auch umkehren, indem Sie ein anderes Attribut hinzufügen: data-direction = "reverse".