Crea una pagina
Anche se jQuery Mobile funziona su tutti i dispositivi mobili, può avere alcuni problemi di compatibilità su computer desktop (grazie al supporto CSS3 limitata).
Per questo tutorial, si consiglia di utilizzare il browser Google Chrome per una migliore esperienza di lettura.
Qui di seguito, abbiamo creato una semplice pagina standard di jQuery Mobile:
Esempio
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> Prova tu stesso " Esempio spiegato:
- L' data-role="page" è la pagina visualizzata nel browser
- Il data-role="header" crea una barra degli strumenti nella parte superiore della pagina (spesso usato per i tasti di titolo o di ricerca)
- Il data-role="main" definisce il contenuto della pagina, come testo, immagini, pulsanti, moduli, ecc
- Il "ui-content" classe aggiunge chilo in più e il margine all'interno del contenuto della pagina
- Il data-role="footer" crea una barra degli strumenti in fondo alla pagina
- All'interno di questi contenitori, è possibile aggiungere eventuali elementi HTML - paragrafi, immagini, titoli, liste, ecc
HTML5 data-* attributi sono utilizzati in tutto jQuery Mobile per creare un "touch-friendly" aspetto e attraente per i dispositivi mobili.
Aggiunta di pagine in jQuery Mobile
In jQuery Mobile, è possibile creare più pagine in un unico file HTML.
Separare ogni pagina con un ID univoco e utilizzare il href attributo per collegare tra di loro:
Esempio
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> Prova tu stesso " Suggerimento: il tempo di caricamento sarà influenzato da applicazioni web con un sacco di contenuti (ad esempio testo, link, immagini, script, ecc). Utilizzare file esterni se non si desidera collegare pagine interne:
<a href="externalfile.html">Go To External Page</a>
Utilizzando le pagine come finestre di dialogo
Una finestra di dialogo è un tipo di finestra utilizzata per visualizzare le informazioni speciali o richiesta di ingresso.
Per creare una finestra di dialogo che si apre quando un utente tocca su un collegamento, aggiungere data-dialog="true" alla pagina che si desidera visualizzare come finestra di dialogo:
Esempio
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> Prova tu stesso "