jQuery Mobile Seiten

Jetzt jQuery Mobile lernen

lamp Obwohl jQuery Mobile mit allen mobilen Geräten kompatibel ist, ist es nicht vollständig mit PCs kompatibel (aufgrund der begrenzten CSS3-Unterstützung).

Für ein besseres Leseerlebnis dieses Tutorials wird empfohlen, den Google Chrome Browser zu verwenden.

Beispiele

<body>
<div data-role="page">

  <div data-role="header">
<h1>Willkommen auf meiner Startseite</h1>
  </div>

  <div data-role="main" class="ui-content">
<p>Ich bin jetzt ein Mobile-Entwickler!!</p>
  </div>

  <div data-role="footer">
<h1>Fußzeilentext</h1>
  </div>

</div>
</body>

Selbst ausprobieren »

Beispielanalyse:

  • data-role="page" ist die Seite, die im Browser angezeigt wird.
  • data-role="header" ist eine Symbolleiste, die oben auf der Seite erstellt wird (normalerweise für Titel oder Suchschaltflächen verwendet).
  • data-role="main" definiert den Inhalt der Seite, wie Text, Bilder, Formulare, Schaltflächen usw.
  • Die Klasse "ui-content" wird verwendet, um der Seite Innen- und Außenabstände hinzuzufügen.
  • data-role="footer" wird verwendet, um eine Symbolleiste am unteren Rand der Seite zu erstellen.
  • Sie können beliebige HTML-Elemente in diese Container einfügen – Absätze, Bilder, Überschriften, Listen usw.
lamp jQuery Mobile stützt sich auf HTML5-data-*-Attribute, um verschiedene UI-Elemente, Übergänge und Seitenstrukturen zu unterstützen. Browser, die sie nicht unterstützen, ignorieren sie stillschweigend.

jQuery Mobile zu Ihrer Seite hinzufügen

Mit jQuery Mobile können Sie mehrere verschiedene Seiten in einer einzigen HTML-Datei erstellen.

Sie können verschiedene href-Attribute verwenden, um auf Seiten mit eindeutigen IDs zu verweisen:

Beispiele

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <a href="#pagetwo">Zur zweiten Seite springen</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">Zur ersten Seite springen</a>
  </div>
</div>

Selbst ausprobieren »

Hinweis:Wenn eine Webanwendung eine große Menge an Inhalten (Text, Bilder, Skripte usw.) enthält, beeinträchtigt dies die Ladezeit erheblich. Wenn Sie keine internen Seitenlinks verwenden möchten, können Sie externe Dateien verwenden:

<a href="externalfile.html">访问外部文件</a>

Seiten als Dialoge

Ein Dialog dient zur Anzeige von Seiteninformationen oder zur Eingabe von Formularinformationen.

Fügen Sie einem Link data-rel="dialog" hinzu, damit ein Dialog angezeigt wird, wenn der Benutzer auf den Link klickt:

Beispiele

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
<a href="#pagetwo">Zur zweiten Seite springen</a>
  </div>
</div>

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="main" class="ui-content">
<a href="#pageone">Zur ersten Seite springen</a>
  </div>
</div>

Selbst ausprobieren »
Andere Erweiterungen