Pagina jQuery Mobile

Inizia con jQuery Mobile

Suggerimento:Nonostante jQuery Mobile sia adatto a tutti i dispositivi mobili, potrebbe comunque esistere problemi di compatibilità sui computer desktop (a causa del supporto limitato di CSS3).

Pertanto, in questo tutorial, raccomandiamo di utilizzare il browser Google Chrome per ottenere la migliore esperienza di lettura.

Esempio

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Benvenuti sul mio sito</h1>
  </div>
  <div data-role="content">
    <p>Sono un sviluppatore mobile!</p>
  </div>
  <div data-role="footer">
    <h1>Testo del footer</h1>
  </div>
</div>
</body>

Prova personalmente

Esempio di spiegazione:

  • data-role="page" è la pagina visualizzata nel browser
  • data-role="header" crea una barra degli strumenti nella parte superiore della pagina (usata spesso per titoli e pulsanti di ricerca)
  • data-role="content" definisce il contenuto della pagina, come testo, immagini, moduli e pulsanti, ecc.
  • data-role="footer" crea una barra degli strumenti nella parte inferiore della pagina

In questi contenitori, puoi aggiungere qualsiasi elemento HTML - paragrafi, immagini, titoli, elenchi, ecc.

Suggerimento:Le proprietà data-* di HTML5 sono utilizzate per creare un'interfaccia di interazione "touch-friendly" per dispositivi mobili tramite jQuery Mobile.

Aggiungere pagine in jQuery Mobile

In jQuery Mobile, puoi creare più pagine in un singolo file HTML.

Separare ogni pagina con un ID unico e connetterle utilizzando l'attributo href:

Esempio

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Vai alla pagina due</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Vai alla pagina uno</a>
  </div>
</div>

Prova personalmente

Nota:Un'applicazione web con molto contenuto può influenzare il tempo di caricamento (ad esempio testo, link, immagini e script, ecc.). Se non desideri utilizzare un file interno per le pagine di link, usa un file esterno:

<a href="externalfile.html">Vai alla pagina esterna</a>

Usare la pagina come finestra di dialogo

Una finestra di dialogo è un tipo di finestra di visualizzazione utilizzata per mostrare informazioni o richiedere input.

Per creare una finestra di dialogo quando l'utente clicca (tocca) su un link, aggiungi data-rel="dialog" al link:

Esempio

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Vai alla pagina due</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Vai alla pagina uno</a>
  </div>
</div>

Prova personalmente