jQuery Mobile verktygsfält

jQuery Mobile verktygsfält

Verktygsradselement placeras ofta i sidhuvudet och sidfoten för att uppnå en "besökt"-navigering:

Titelrad

Sidhuvudet innehåller vanligtvis sidhuvudets titel/LOGO eller en till två knappar (vanligtvis hem, alternativ eller sökknapp).

Du kan lägga till knappar till vänster eller/och höger i sidhuvudet.

Följande kod lägger till en knapp till vänster om sidhuvudets titeltext och en annan till höger:

Exempel

<div data-role="header">
  <a href="#" data-role="button">Hem</a>
  <h1>Välkommen till min startsida</h1>
  <a href="#" data-role="button">sök</a>
</div>

Prova själv

Följande kod lägger till en knapp till vänster om sidhuvudets titel:

<div data-role="header">
  <a href="#" data-role="button">Hem</a>
  <h1>Välkommen till min startsida</h1>
</div>

Men om du placerar en knapp-länk efter <h1>-elementet kommer den inte att visas till höger om texten. För att lägga till en knapp till höger om sidhuvudets titel, specificera klassnamnet "ui-btn-right":

Exempel

<div data-role="header">
  <h1>Välkommen till min startsida</h1>
  <a href="#" data-role="button" class="ui-btn-right">sök</a>
</div>

Prova själv

Tips:Sidhuvudet kan innehålla en eller två knappar, men sidfoten har inga begränsningar.

Sidfoten

Jämfört med sidhuvudet är sidfoten mer flexibel - den är mer praktisk och mångsidig, så den kan innehålla det nödvändiga antalet knappar:

Exempel

<div data-role="footer">
  <a href="#" data-role="button">Sänd till Sina Weibo</a>
  <a href="#" data-role="button">Sänd till Tencent Weibo</a>
  <a href="#" data-role="button">Sänd till QQ-rummet</a>
</div>

Prova själv

Kommentar:Sidfotens stil är annorlunda än sidhuvudets (den tar bort något inre marginaler och blanksteg, och knappar är inte centrerade). Om du vill korrigera detta, sätt klassnamnet "ui-btn" på sidfoten:

Exempel

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

Prova själv

Du kan också välja att kombinera knappar horisontellt eller vertikalt i sidfoten:

Exempel

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Sänd till Sina Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Sänd till Tencent Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Sänd till QQ-rummet</a>
  </div>
</div>

Prova själv

Positionera sidhuvud och sidfot

Det finns tre sätt att placera sidhuvud och sidfot på:

  • Inline - standard. Rubriker och fötter ligger i samma rad som sidinnehållet.
  • Fixed - sidhuvud och sidfot kommer att förbli på toppen och botten av sidan.
  • Fullscreen - liknar fixed; sidhuvud och sidfot kommer att förbli på toppen och botten av sidan, men också över sidinnehållet. Det är också något genomskinligt

Använd data-position-egenskapen för att positionera rubriker och fötter:

Inline-positionering (standard)

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

Prova själv

Fast positionering

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

Prova själv

Om du behöver aktivera fullskärmspositionering, använd data-position="fixed" och lägg till data-fullscreen-egenskapen till elementet:

Fullscreen-positionering

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

Prova själv

Tips:Fullscreen är mycket lämpligt för bilder, bilder och videor.

Tips:För fixed och fullscreen-position, berör skärmen för att dölja och visa rubrik och fot.