1. Casa
  2. Pagina jQuery Mobile

Il miglior tutorial Pagina jQuery Mobile Nel 2024, in questo tutorial puoi imparare Iniziare ad imparare jQuery Mobile,Esempi,L'aggiunta di jQuery Mobile nella pagina,Esempi,Pagina come gli usi di dialogo,Esempi,

Pagina jQuery Mobile

Iniziare ad imparare jQuery Mobile

lampada 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>

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
lampada 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>

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">访问外部文件</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>

Prova »

Tutorial caldi

Contattaci

Pagina jQuery Mobile
10/30