jQuery Mobile Toolbalk

jQuery Mobile Toolbalk

Werkbalk-elementen worden vaak geplaatst in de kop en voettekst - om de "bezoekt"-navigatie te realiseren:

Titelbalk

De kop bevat meestal de kopkop/LOGO of één tot twee knoppen (meestal home, opties of zoekknoppen).

Je kunt knoppen aan zowel de linkerkant als de rechterkant van de kop toevoegen.

Het volgende codevoorbeeld voegt een knop aan de linkerkant van de kopkop toe en een knop aan de rechterkant:

Voorbeeld

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welkom op mijn homepage</h1>
  <a href="#" data-role="button">Zoek</a>
</div>

Probeer het zelf uit

Het volgende codevoorbeeld voegt een knop aan de linkerkant van de kopkop toe:

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welkom op mijn homepage</h1>
</div>

Maar als je een knoplink achter het <h1>-element plaatst, wordt deze niet weergegeven aan de rechterkant van de tekst. Om een knop aan de rechterkant van de kopkop toe te voegen, geef de klasse "ui-btn-right" op:

Voorbeeld

<div data-role="header">
  <h1>Welkom op mijn homepage</h1>
  <a href="#" data-role="button" class="ui-btn-right"> Zoek</a>
</div>

Probeer het zelf uit

Tip:De kop kan een of twee knoppen bevatten, maar de voettekst heeft geen limiet.

Voettekstbalk

In vergelijking met de kop, is de voettekst meer elastisch - ze zijn praktischer en variabel, dus ze kunnen de benodigde hoeveelheid knoppen bevatten:

Voorbeeld

<div data-role="footer">
  <a href="#" data-role="button">Broadcast naar Sina Weibo</a>
  <a href="#" data-role="button">Broadcast naar Tencent Weibo</a>
  <a href="#" data-role="button">Broadcast naar QQ Space</a>
</div>

Probeer het zelf uit

Opmerking:De stijl van de footer is anders dan die van de header (het verwijdert enige indentatie en ruimte, en de knoppen zijn niet centrally geplaatst). Als je dit probleem wilt oplossen, voeg dan de klasse "ui-btn" toe aan de footer:

Voorbeeld

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

Probeer het zelf uit

Je kunt ook kiezen of je de knoppen horizontaal of verticaal wilt combineren in de footer:

Voorbeeld

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Broadcast naar Sina Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Broadcast naar Tencent Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Broadcast naar QQ Space</a>
  </div>
</div>

Probeer het zelf uit

Positioneer de header en footer

Er zijn drie manieren om de header en footer te plaatsen:

  • Inline - standaard. De header en footer zijn ingesloten in de inhoud van de pagina.
  • Vaste - de pagina en footer blijven bovenaan en onderaan de pagina.
  • Volledig scherm - soortgelijk aan fixed; de pagina en footer blijven bovenaan en onderaan de pagina, maar ook over de inhoud van de pagina. Het is ook enigszins doorzichtig

Gebruik de data-position-eigenschap om de header en footer te positioneren:

Inline定位（standaard）

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

Probeer het zelf uit

Vaste定位

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

Probeer het zelf uit

Als je volledige定位 wilt inschakelen, gebruik dan data-position="fixed" en voeg de data-fullscreen-eigenschap toe aan dit element:

Volledig scherm定位

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

Probeer het zelf uit

Tip:Fullscreen is zeer geschikt voor foto's, afbeeldingen en video's.

Tip:Voor fixed en fullscreen positie wordt het hoofd- en voettekst verborgen en weergegeven door het aanraken van het scherm.