jQuery Mobile - Pagine

L'utente può interagire con le pagine jQuery Mobile, che raggruppa il contenuto in visualizzazioni logiche e visualizzazioni di pagina. La visualizzazione della pagina può essere animata utilizzando le transizioni di pagina. È possibile creare più pagine utilizzando un documento HTML e quindi non è necessario richiedere il contenuto al server.

La tabella seguente mostra i tipi di pagine in dettaglio.

Sr.No. Tipo e descrizione
1 Pagina singola

Una singola pagina viene creata nel documento HTML utilizzando un modo standard di scrivere un modello.
2 Modello multipagina

È possibile includere più pagine nel singolo documento HTML, che viene caricato insieme aggiungendo più div con data-role = "page" .
3 Pagina Dialoghi

Le finestre di dialogo modali aprono il contenuto in una sovrapposizione interattiva sopra la pagina.

Convenzioni, non requisiti

  • Gli elementi dell'attributo data-role come intestazione, piè di pagina, pagina e contenuto vengono utilizzati per fornire il formato e la struttura di base di una pagina.

  • Per i documenti a pagina singola, il wrapper della pagina richiesto per l'inizializzazione automatica è impostato come opzionale.

  • L'elemento strutturale può essere escluso per una pagina web con layout personalizzato.

  • Per gestire le pagine, il wrapper della pagina viene iniettato dal framework quando non è incluso dal markup.

Precaricamento delle pagine

Includendo l'attributo data-prefetch , possiamo precaricare le pagine nel DOM nei modelli di pagina singola. Per maggiori informazioni clicca qui .

Cache DOM

Quando la memoria del browser si riempie in DOM, rallenta il browser mobile o potrebbe bloccarsi a causa del caricamento di più pagine. C'è un metodo semplice per mantenere in ordine il DOM:

  • Quando una pagina viene caricata tramite ajax, indica di rimuovere la pagina dal DOM quando si reindirizza a un'altra pagina.

  • La pagina precedente che hai visitato può essere recuperata dalla cache quando la visiti di nuovo.

  • Invece di rimuovere le pagine, puoi dire a jQuery mobile di tenerlo in DOM utilizzando la seguente riga:

$.mobile.page.prototype.options.domCache = true;

  • Imposta l'opzione domCache come true nel plug-in della pagina per mantenere tutte le pagine nel DOM, che è stato visitato in precedenza.

pageContainerElement.page({ domCache: true });