Toolbar ng jQuery Mobile

Toolbar ng jQuery Mobile

Ang mga elemento ng toolbar ay karaniwang ilalagay sa header at footer - upang maisagawa ang navigation na "na-accessed":

Title bar

Ang header ay karaniwang may header title/LOGO o isang hanggang dalawang pindutan (karaniwang home, opsyon o search button).

Maaari kang magdagdag ng pindutan sa kanan o sa kaliwa ng header.

Ang sumusunod na code, ay magdadagdag ng isang pindutan sa kanan at sa kaliwa ng header title text:

Halimbawa

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welcome to My Homepage</h1>
  <a href="#" data-role="button">Search</a>
</div>

Subukan nang personal

Ang sumusunod na code ay magdadagdag ng isang pindutan sa kanan ng header title:

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welcome to My Homepage</h1>
</div>

Gayunpaman, kung ikaw ay maglagay ng pindutang link sa ibabaw ng <h1> element, hindi ito magpapakita sa kanan ng teksto. Upang magdagdag ng pindutang sa kanan ng header title, palakain ang pangalan ng klase "ui-btn-right":

Halimbawa

<div data-role="header">
  <h1>Welcome to My Homepage</h1>
  <a href="#" data-role="button" class="ui-btn-right">Search</a>
</div>

Subukan nang personal

Tip:Ang header ay kayang maglalaman ng isang o dalawang pindutan, gayunpaman walang limitasyon ang footer.

Header na bar

Kumpara sa header, ang footer ay mas may kinabukasan - mas praktikal at may maraming versatilidad, kaya maaring maglalaman ng kahit anong bilang ng pindutan:

Halimbawa

<div data-role="footer">
  <a href="#" data-role="button">I-relay sa Sina Weibo</a>
  <a href="#" data-role="button">I-relay sa Tencent Weibo</a>
  <a href="#" data-role="button">I-relay sa QQ Space</a>
</div>

Subukan nang personal

Komento:Ang estilo ng footer ay iba sa header (itong bawasan ang padding at bakanteng loob, at ang mga button ay hindi naka-kapit-bahay). Kung gusto ay ayusin ang problema, maglagay ng klase "ui-btn" sa footer:

Halimbawa

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

Subukan nang personal

Maaari mo ring piliin kung magkakasama ang mga button sa horizontal o vertical sa footer:

Halimbawa

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

Subukan nang personal

Ilokalis ang header at footer

May tatlong paraan para ilagay ang header at footer:

  • Sa-linya - kaugalian. Ang header at footer ay nasa linya kasama ang nilalaman ng pahina.
  • Fixed - ang pahina at footer ay mananatili sa itaas at ibaba ng pahina.
  • Buong-laman - katulad ng fixed; ang pahina at footer ay mananatili sa itaas at ibaba ng pahina, ngunit makikita din sa nilalaman ng pahina. Ito rin ay bahagyang sadyang makikita

Gamitin ang attribute na data-position upang ilokalisa ang header at footer ng pahina:

Sa-linya na lokasyon (kaugalian)

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

Subukan nang personal

Sa-pag-iral na lokasyon

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

Subukan nang personal

Kung gusto magamit ang buong-laman na lokasyon, gamitin ang data-position="fixed" at magdagdag ng attribute na data-fullscreen sa elemento:

Buong-laman na lokasyon

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

Subukan nang personal

Tip:Ang fullscreen ay napaka-ideal para sa mga larawan, imahe at video.

Tip:Para sa fixed at fullscreen na posisyon, ang pagtugot sa screen ay mag-ihiwalay at ipakita ang header at footer.