jQuery Mobile Seiten

Einführung in jQuery Mobile

Tipp:Obwohl jQuery Mobile für alle mobilen Geräte geeignet ist, kann es auf Desktop-Computern möglicherweise Kompatibilitätsprobleme geben (aufgrund begrenzter CSS3-Unterstützung).

Daher empfehlen wir Ihnen in diesem Tutorial, Google Chrome zu verwenden, um die beste Leserfahrung zu erhalten.

Beispiel

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Willkommen auf meiner Homepage</h1>
  </div>
  <div data-role="content">
    <p>Ich bin ein移动开发者！</p>
  </div>
  <div data-role="footer">
    <h1>Fußzeile Text</h1>
  </div>
</div>
</body>

Versuchen Sie es selbst

Beispiel Erklärung:

  • data-role="page" ist die Seite, die im Browser angezeigt wird
  • data-role="header" erstellt eine Werkzeugleiste am oberen Rand der Seite (wird oft für Überschriften und Suchbuttons verwendet)
  • data-role="content" definiert den Inhalt der Seite, z.B. Texte, Bilder, Formulare und Schaltflächen usw.
  • data-role="footer" erstellt eine Werkzeugleiste am unteren Rand der Seite

In diesen Containern können Sie beliebige HTML-Elemente hinzufügen - Absätze, Bilder, Überschriften, Listen usw.

Tipp:HTML5 data-*-Attribute werden verwendet, um mit jQuery Mobile eine "touchfreundliche" Interaktionsansicht für mobile Geräte zu erstellen.

Seite in jQuery Mobile hinzufügen

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

Separieren Sie jede Seite durch einzigartige id und verbinden Sie sie miteinander über das href-Attribut:

Beispiel

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Zum Seite zwei wechseln</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Zur Seite eins wechseln</a>
  </div>
</div>

Versuchen Sie es selbst

Anmerkung:Web-Anwendungen mit viel Inhalt können die Ladezeit beeinflussen (z.B. Texte, Links, Bilder und Skripte usw.). Verwenden Sie externe Dateien, wenn Sie nicht auf der internen Linkseite sind:

<a href="externalfile.html"> Zum externen Seite wechseln</a>

Seite als Dialog verwenden

Ein Dialogfenster ist ein Fenstertyp, der zur Anzeige von Informationen oder zur Erteilung von Eingaben verwendet wird.

Um ein Dialogfenster zu erstellen, wenn der Benutzer auf einen Link klickt (berührt), fügen Sie dem Link data-rel="dialog" hinzufügen:

Beispiel

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Zur Seite zwei wechseln</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Zur Seite eins wechseln</a>
  </div>
</div>

Versuchen Sie es selbst