Creaza o pagina
Chiar dacă jQuery Mobile funcționează pe toate dispozitivele mobile, ar putea avea unele probleme de compatibilitate pe computere desktop (due to limited CSS3 support) din (due to limited CSS3 support) .
Pentru acest tutorial, vă recomandăm să utilizați browserul Google Chrome pentru o mai bună experiență de lectură.
Mai jos, am creat un standard simplu, pagina jQuery Mobil:
Exemplu
<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> Încearcă - l singur » Exemplu explicat:
- data-role="page" este pagina afișată în browser
- data-role="header" creează o bară de instrumente în partea de sus a paginii ( de multe ori folosite pentru butoanele titlu sau de căutare)
- data-role="main" definește conținutul paginii, cum ar fi text, imagini, butoane, formulare, etc.
- "ui-content" clasa adaugă padding suplimentare și marja în interiorul conținutul paginii
- data-role="footer" creează o bară de instrumente în partea de jos a paginii
- In interiorul acestor containere, puteți adăuga orice elemente HTML - paragrafe, imagini, titluri, liste, etc.
HTML5 data-* Atributele sunt folosite în jQuery Mobile pentru a crea un "touch-friendly" uite și atractiv pentru dispozitive mobile.
Adăugarea de pagini în jQuery Mobile
În jQuery Mobile, puteți crea mai multe pagini într-un singur fișier HTML.
Separați fiecare pagină cu un cod unic și de a folosi href atributul de a lega între ele:
Exemplu
<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> Încearcă - l singur » Sfat: Timpul de încărcare va fi afectată de aplicații web , cu o mulțime de conținut ( de exemplu , text, link - uri, imagini, scripturi , etc). Utilizați fișiere externe, dacă nu doriți să conectați pagini pe plan intern:
<a href="externalfile.html">Go To External Page</a>
Utilizarea Pagini ca Dialoguri
O casetă de dialog este un tip de fereastră utilizată pentru a afișa informații speciale, sau o cerere de intrare.
Pentru a crea o casetă de dialog care se deschide atunci când un utilizator pune pe un link, se adaugă data-dialog="true" de data-dialog="true" la pagina pe care doriți să fie afișat un dialog:
Exemplu
<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> Încearcă - l singur »