jQuery Mobile Werkzeugleiste

jQuery Mobile Werkzeugleiste

Elemente der Werkzeugleiste werden oft in der Kopf- und Fußzeile platziert - um die Navigation "Besucht" zu ermöglichen:

Titelleiste

Die Kopfzeile enthält in der Regel den KopfzeilenTitel/LOGO oder eine bis zwei Schaltflächen (meistens Startseite, Optionen oder Suchschaltfläche).

Sie können in der Kopfzeile Schaltflächen auf der linken und/oder rechten Seite hinzufügen.

Nachstehender Code fügt eine Schaltfläche auf die linke und eine auf die rechte Seite des KopfzeilenTextes hinzu:

Beispiel

<div data-role="header">
  <a href="#" data-role="button">Startseite</a>
  <h1>Willkommen auf meiner Homepage</h1>
  <a href="#" data-role="button">Suche</a>
</div>

Probieren Sie es selbst aus

Nachstehender Code fügt eine Schaltfläche auf die linke Seite des KopfzeilenTitels hinzu:

<div data-role="header">
  <a href="#" data-role="button">Startseite</a>
  <h1>Willkommen auf meiner Homepage</h1>
</div>

Wenn Sie jedoch nach dem <h1>-Element Schaltflächenlinks platzieren, werden diese nicht auf der rechten Seite des Textes angezeigt. Um Schaltflächen auf die rechte Seite des KopfzeilenTitels hinzuzufügen, geben Sie den Klassennamen "ui-btn-right" an:

Beispiel

<div data-role="header">
  <h1>Willkommen auf meiner Homepage</h1>
  <a href="#" data-role="button" class="ui-btn-right">Suche</a>
</div>

Probieren Sie es selbst aus

Tipp:Der Kopf der Seite kann eine oder zwei Schaltflächen enthalten, der Fuß hat jedoch keine Begrenzung.

Fußzeile

Im Vergleich zum Kopf der Seite ist der Fuß der Seite anpassungsfähiger - er ist praktischer und vielseitig, daher kann er die erforderliche Anzahl von Schaltflächen enthalten:

Beispiel

<div data-role="footer">
  <a href="#" data-role="button">Live-Stream zu Sina Weibo</a>
  <a href="#" data-role="button">Live-Stream zu Tencent Weibo</a>
  <a href="#" data-role="button">Live-Stream zu QQ K空间</a>
</div>

Probieren Sie es selbst aus

Anmerkung:Der Footer hat eine andere Stil als der Header (er nimmt einige Innenabstände und Leerzeichen weg und die Schaltflächen sind nicht zentriert). Um dieses Problem zu beheben, fügen Sie der Footer-Klasse "ui-btn" hinzu:

Beispiel

<div data-role="footer" class="ui-btn">

Probieren Sie es selbst aus

Sie können auch wählen, ob die Schaltflächen horizontal oder vertikal im Footer kombiniert werden:

Beispiel

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Live-Stream zu Sina Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Live-Stream zu Tencent Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Live-Stream zu QQ K空间</a>
  </div>
</div>

Probieren Sie es selbst aus

Positionieren Sie Header und Footer

Es gibt drei Arten, Header und Footer zu platzieren:

  • Inline - Standard. Der Header und Footer sind in der Zeile mit dem Inhaltsbereich
  • Feste - Die Seite und der Footer bleiben oben und unten auf der Seite.
  • Vollbild - Ähnlich wie fixed; die Seite und der Footer bleiben oben und unten auf der Seite, aber auch über dem Inhaltsbereich. Es ist auch leicht durchsichtig

Verwenden Sie das Attribut data-position, um den Header und Footer zu positionieren:

Inline-Position (Standard)

<div data-role="header"> data-position="inline"</div>
<div data-role="footer"> data-position="inline"</div>

Probieren Sie es selbst aus

Feste Position

<div data-role="header"> data-position="fixed"</div>
<div data-role="footer"> data-position="fixed"</div>

Probieren Sie es selbst aus

Wenn Sie die vollständige Position aktivieren möchten, verwenden Sie data-position="fixed" und fügen Sie dem Element die Eigenschaft data-fullscreen hinzu:

Vollbild-Position

<div data-role="header" data-position="fixed"> data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Probieren Sie es selbst aus

Tipp:Full screen ist sehr ideal für Bilder, Bilder und Videos.

Tipp:Für die Positionen fixed und fullscreen wird der Kopf- und Fußbereich durch Berühren der Oberfläche ausgeblendet und angezeigt.