jQuery Mobile - Seiten
Der Benutzer kann mit jQuery Mobile-Seiten interagieren, die den Inhalt in logische Ansichten und Seitenansichten gruppieren. Die Seitenansicht kann mithilfe von Seitenübergängen animiert werden. Mit einem HTML-Dokument können mehrere Seiten erstellt werden, sodass der Inhalt nicht vom Server angefordert werden muss.
Die folgende Tabelle zeigt die Seitentypen im Detail.
| Sr.Nr. | Typ & Beschreibung |
|---|---|
| 1 | Einzelne Seite Eine einzelne Seite wird in einem HTML-Dokument mit einer Standardmethode zum Schreiben einer Vorlage erstellt. |
| 2 | Mehrseitige Vorlage Das einzelne HTML-Dokument kann mehrere Seiten enthalten, die zusammen geladen werden, indem mehrere Divs mit data-role = "page" hinzugefügt werden . |
| 3 | Dialogseite Modale Dialoge öffnen Inhalte in einem interaktiven Overlay über der Seite. |
Konventionen, keine Anforderungen
Die Datenrollenattributelemente wie Kopf-, Fuß-, Seiten- und Inhaltselemente werden verwendet, um das Grundformat und die Struktur einer Seite bereitzustellen.
Für Einzelseitendokumente wurde der für die automatische Initialisierung erforderliche Seitenumbruch als optional festgelegt.
Das Strukturelement kann für eine Webseite mit benutzerdefiniertem Layout ausgeschlossen werden.
Zum Verwalten von Seiten wird der Seitenumbruch vom Framework eingefügt, wenn er nicht im Markup enthalten ist.
Seiten vorab abrufen
Mit dem Attribut data-prefetch können wir Seiten in den Einzelseitenvorlagen in das DOM vorabrufen. Für weitere Informationen klicken Sie hier .
DOM-Cache
Wenn der Browserspeicher im DOM voll ist, verlangsamt er den mobilen Browser oder kann aufgrund des Ladens mehrerer Seiten abstürzen. Es gibt eine einfache Methode, um das DOM aufgeräumt zu halten -
Wenn eine Seite über Ajax geladen wird, bedeutet dies, dass die Seite aus dem DOM entfernt werden muss, wenn Sie auf eine andere Seite umleiten.
Die vorherige Seite, die Sie besucht haben, kann beim erneuten Aufrufen aus dem Cache abgerufen werden.
Anstatt die Seiten zu entfernen, können Sie jQuery Mobile über die folgende Zeile anweisen, sie im DOM zu belassen:
$.mobile.page.prototype.options.domCache = true;Setzen Sie die Option domCache im Seiten-Plugin auf true, um alle Seiten im zuvor besuchten DOM zu behalten.
pageContainerElement.page({ domCache: true });