jQuery Mobile Seite
Starten Learning jQuery Mobile
 | Obwohl jQuery Mobile ist mit allen mobilen Geräten kompatibel, aber nicht vollständig kompatibel mit dem PC (aufgrund der begrenzten CSS3-Unterstützung). Um dieses Tutorial besser lesen, empfehlen wir, dass Sie den Google Chrome-Browser verwenden. |
|---|
Beispiele
<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>
Versuchen »
Analyse Beispiele:
- data-role = "Seite" ist die Seite im Browser angezeigt werden soll.
- data-role = "header" ist eine Werkzeugleiste am oberen Rand der Seite erstellt (in der Regel für den Titel oder die Suchtaste verwendet wird)
- Daten-role = "main" definiert den Inhalt der Seite, wie Text, Bilder, Formulare, Schaltflächen und so weiter.
- "Ui-content" Klasse für diese Seite Polsterung und Margen.
- data-role = "footer" verwendet, um den unteren Rand der Seite Symbolleiste zu erstellen.
- In diesen Behältern können Sie alle HTML-Elemente hinzufügen - Absätze, Bilder, Überschriften, Listen, usw.
| jQuery Mobile basieren auf HTML5 Attribute data- * verschiedene UI-Elemente, Übergangs- und Seitenstruktur zu unterstützen. Browser unterstützt diese Funktion nicht, wird sie stillschweigend verworfen. |
|---|
Hinzufügen von jQuery Mobile in der Seite
Verwenden Sie jQuery Mobile, können Sie dann eine einzelne HTML-Datei in einer Reihe von verschiedenen Seiten zu erstellen.
Sie können verschiedene href Attribut zwischen der Verwendung der gleichen eindeutigen ID der Seite zu unterscheiden:
Beispiele
<Div data-role = "page " id = "PageOne">
<Div Daten-role = "main" class = "ui-content">
<a href="#pagetwo"> zu einer zweiten Seite </a> zu springen
</ Div>
</ Div>
<Div data-role = "page " id = "pagetwo">
<Div Daten-role = "main" class = "ui-content">
<a href="#pageone"> auf die erste Seite </a> zu springen
</ Div>
</ Div>
<Div Daten-role = "main" class = "ui-content">
<a href="#pagetwo"> zu einer zweiten Seite </a> zu springen
</ Div>
</ Div>
<Div data-role = "page " id = "pagetwo">
<Div Daten-role = "main" class = "ui-content">
<a href="#pageone"> auf die erste Seite </a> zu springen
</ Div>
</ Div>
Versuchen »
Hinweis: Wenn die Web - Anwendungen , die eine Menge von Inhalten haben (Texte, Bilder, Skripte, etc.) wird ernsthaft die Ladezeit auswirken. Wenn Sie möchten, in Seiten-Links nicht verwenden können Sie eine externe Datei:
<a href="externalfile.html">访问外部文件</a>
Seite als den Dialog Nutzungen
Das Dialogfeld wird verwendet, um die Seite Informationsanzeige oder Eingabeformular Informationen angezeigt werden.
Fügen Sie in der Verbindungsdaten-rel = "Dialog" Pop-up-Dialogfeld Benutzer auf den Link zu klicken können:
Beispiele
<Div Daten-role = "page" id = "PageOne">
<Div Daten-role = "main" class = "ui-content">
<a href="#pagetwo"> Sprung zu einer zweiten Seite </a>
</ Div>
</ Div>
<Div data-role = "Seite " Daten-Dialog = "true" id = "pagetwo">
<Div Daten-role = "main" class = "ui-content">
<a href="#pageone"> Sprung auf die erste Seite </a>
</ Div>
</ Div>
<Div Daten-role = "main" class = "ui-content">
<a href="#pagetwo"> Sprung zu einer zweiten Seite </a>
</ Div>
</ Div>
<Div data-role = "Seite " Daten-Dialog = "true" id = "pagetwo">
<Div Daten-role = "main" class = "ui-content">
<a href="#pageone"> Sprung auf die erste Seite </a>
</ Div>
</ Div>
Versuchen »