Erstelle eine Seite
Auch wenn jQuery Mobile auf allen mobilen Geräten funktioniert, kann es einige Kompatibilitätsprobleme auf Desktop-Computern (aufgrund der begrenzten CSS3-Unterstützung) haben.
Für dieses Tutorial, empfehlen wir, dass Sie den Google Chrome-Browser für eine bessere Leseerfahrung verwenden.
Im Folgenden haben wir eine einfache, standard jQuery Mobile Seite erstellt:
Beispiel
<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> Versuch es selber " Erklärt Beispiel:
- Die data-role="page" ist die Seite im Browser angezeigt
- Die data-role="header" erstellt eine Symbolleiste am oberen Rand der Seite (oft für den Titel oder Such Tasten)
- Die data-role="main" definiert den Inhalt der Seite, wie Texte, Bilder, Buttons, Formulare, etc.
- Die "ui-content" Klasse sorgt für zusätzliche Polsterung und Marge in der Seiteninhalt
- Die data-role="footer" erstellt eine Symbolleiste am unteren Rand der Seite
- Innerhalb dieser Container, können Sie alle HTML-Elemente hinzufügen - Absätze, Bilder, Überschriften, Listen, usw.
Die HTML5 - data-* Attribute sind über jQuery Mobile verwendet , um eine zu erstellen "touch-friendly" und ansprechende Optik für mobile Geräte.
Hinzufügen von Seiten in jQuery Mobile
In jQuery Mobile, können Sie mehrere Seiten in einem einzigen HTML-Datei zu erstellen.
Trennen Sie jede Seite mit einer eindeutigen ID und verwenden Sie das href Attribut zwischen ihnen zu verknüpfen:
Beispiel
<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> Versuch es selber " Tipp: Die Ladezeit wird von Web - Anwendungen mit viel Inhalt (zB Text, Links, Bilder, Skripte etc.) betroffen sein. Verwenden Sie externe Dateien, wenn Sie intern keine Seiten verknüpfen möchten:
<a href="externalfile.html">Go To External Page</a>
Mit Seiten wie Dialoge
Ein Dialogfeld ist eine Art von Fenster verwendet, um spezielle Informationen oder Anforderung Eingang zu zeigen.
Um ein Dialogfeld zu erstellen , das sich öffnet , wenn ein Benutzer auf einen Link tippt, fügen Sie data-dialog="true" auf die Seite , die Sie als Dialog angezeigt werden soll:
Beispiel
<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> Versuch es selber "