Pagina jQuery Mobile
Iniziare ad imparare jQuery Mobile
 | Anche se jQuery Mobile è compatibile con tutti i dispositivi mobili, ma non lo fa completamente compatibile con il PC (grazie al supporto CSS3 limitata). Per leggere meglio questo tutorial, si consiglia di utilizzare il browser Google Chrome. |
|---|
Esempi
<body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
Prova »
Esempi di analisi:
- = "Pagina" dati-ruolo è la pagina nel browser per visualizzare.
- data-role = "header" è una barra degli strumenti nella parte superiore della pagina viene creato (normalmente usato per il titolo o il pulsante di ricerca)
- data-role = "main" definisce il contenuto della pagina, come testo, immagini, forme, pulsanti e così via.
- classe "Ui-content" per questa pagina padding e margini.
- data-role = "footer" utilizzato per creare il fondo della barra degli strumenti pagina.
- In questi contenitori è possibile aggiungere eventuali elementi HTML - paragrafi, immagini, titoli, liste, ecc
| jQuery Mobile si basano su HTML5 dati- * attributi per supportare vari elementi dell'interfaccia utente, di transizione, e struttura della pagina. Browser non li saranno scartati silenziosamente supporta. |
|---|
L'aggiunta di jQuery Mobile nella pagina
Utilizzare jQuery Mobile, è possibile quindi creare un unico file HTML in un numero di pagine diverse.
È possibile utilizzare l'attributo href diverso per distinguere tra utilizzando lo stesso ID univoco della pagina:
Esempi
<Div data-role = "pagina " id = "pageone">
<Div data-role = "principale" class = "ui-content">
<a href="#pagetwo"> per passare a una seconda pagina </a>
</ Div>
</ Div>
<Div data-role = "pagina " id = "pagetwo">
<Div data-role = "principale" class = "ui-content">
<a href="#pageone"> per saltare alla prima pagina </a>
</ Div>
</ Div>
<Div data-role = "principale" class = "ui-content">
<a href="#pagetwo"> per passare a una seconda pagina </a>
</ Div>
</ Div>
<Div data-role = "pagina " id = "pagetwo">
<Div data-role = "principale" class = "ui-content">
<a href="#pageone"> per saltare alla prima pagina </a>
</ Div>
</ Div>
Prova »
Nota: quando le applicazioni web hanno un sacco di contenuti (testo, immagini, script, ecc), avrà serie ripercussioni sul tempo di caricamento. Se non si desidera utilizzare i collegamenti in-page è possibile utilizzare un file esterno:
<a href="externalfile.html">访问外部文件</a>
Pagina come gli usi di dialogo
finestra di dialogo viene utilizzata per visualizzare le informazioni di visualizzazione delle informazioni pagina o un modulo di ingresso.
Aggiungere nella linea di trasmissione-rel = finestra di dialogo pop-up "dialogo" consente agli utenti di cliccare sul link:
Esempi
<Div data-role = "pagina" id = "pageone">
<Div data-role = "principale" class = "ui-content">
<a href="#pagetwo"> salto ad una seconda pagina </a>
</ Div>
</ Div>
<Div data-role = "pagina "-finestra Dati = "true" id = "pagetwo">
<Div data-role = "principale" class = "ui-content">
<a href="#pageone"> salto alla prima pagina </a>
</ Div>
</ Div>
<Div data-role = "principale" class = "ui-content">
<a href="#pagetwo"> salto ad una seconda pagina </a>
</ Div>
</ Div>
<Div data-role = "pagina "-finestra Dati = "true" id = "pagetwo">
<Div data-role = "principale" class = "ui-content">
<a href="#pageone"> salto alla prima pagina </a>
</ Div>
</ Div>
Prova »