jQuery Mobile Værktøjslinje

jQuery Mobile Værktøjslinje

Værktøjslinjelementer placeres ofte i sidehovedet og bundtet for at opnå en "allerede besøgt"-navigation:

Titelfelt

Sidehovedet indeholder ofte sidehovedets titel/LOGO eller en til to knapper (som regel forsiden, indstillinger eller søgeknappen).

Du kan tilføje knapper til enten venstre eller/og højre i sidehovedet.

Følgende kode tilføjer en knap til venstre for sidehovedets titeltekst og en knap til højre:

Eksempel

<div data-role="header">
  <a href="#" data-role="button">Forside</a>
  <h1>Velkommen til min hjemmeside</h1>
  <a href="#" data-role="button">Søg</a>
</div>

Prøv det selv

Følgende kode tilføjer en knap til venstre for sidehovedets titel:

<div data-role="header">
  <a href="#" data-role="button">Forside</a>
  <h1>Velkommen til min hjemmeside</h1>
</div>

Men, hvis du placerer en knaplink efter <h1>-elementet, vil den ikke blive vist på tekstsiden. For at tilføje en knap til højre for sidehovedets titel, skal du specificere klassen "ui-btn-right":

Eksempel

<div data-role="header">
  <h1>Velkommen til min hjemmeside</h1>
  <a href="#" data-role="button" class="ui-btn-right">Søg</a>
</div>

Prøv det selv

Tip:Sidehovedet kan indeholde en eller to knapper, men bundtet har ingen begrænsning.

Bundt

I comparison med sidehovedet er bundtet mere fleksibelt - de er mere praktiske og varierende, så de kan indeholde det nødvendige antal knapper:

Eksempel

<div data-role="footer">
  <a href="#" data-role="button">播报到新浪微博</a>
  <a href="#" data-role="button">播报到腾讯微博</a>
  <a href="#" data-role="button">播报到 QQ 空间</a>
</div>

Prøv det selv

Bemærk:Sidefoden har en anden stil end sidehovedet (den fjerner nogle indre margener og mellemrum, og knapperne er ikke centreret). For at rette dette problem, brug klassenavn "ui-btn" i sidefoden:

Eksempel

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

Prøv det selv

Du kan også vælge at kombinere knapper horisontalt eller vertikalt i sidefoden:

Eksempel

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">播报到新浪微博</a>
    <a href="#" data-role="button" data-icon="plus">播报到腾讯微博</a>
    <a href="#" data-role="button" data-icon="plus">播报到 QQ 空间</a>
  </div>
</div>

Prøv det selv

定位页眉和页脚

Der er tre måder at placere sidehoved og sidefod på:

  • Inline - standard. Sidehoved og sidefod er placeret i linje med sideindholdet.
  • Fast - sidehoved og sidefod vil forblive øverst og nederst på siden.
  • Fuldskærm - ligesom fixed; sidehoved og sidefod vil forblive øverst og nederst på siden, men også over sideindholdet. Det er også lidt gennemsigtigt

Brug data-position-egenskaben til at定位页眉和页脚：

Inline定位（standard)

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

Prøv det selv

Fast定位

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

Prøv det selv

Hvis du skal aktivere fuldskærm定位, brug data-position="fixed" og tilføj data-fullscreen-egenskaben til dette element:

Fuldskærm定位

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

Prøv det selv

Tip:Fullscreen er meget ideelt til billeder, billeder og videoer.

Tip:For fixed og fullscreen placering, berøring af skærmen vil skjule og vise hjælpeprogrammet og foden.