jQuery Mobile Toolbars
Elementele barei de instrumente sunt adesea plasate în interiorul antete și note de subsol - pentru "easy-access" de navigare:
Bare de antet
Antetul este situat în partea de sus a paginii și , de obicei , conține o pagină de titlu / logo - ul sau unul sau două butoane (typically home, options or search) de (typically home, options or search) , la (typically home, options or search) de (typically home, options or search) .
Puteți adăuga butoane de la stânga și / sau în partea dreaptă în antet.
Codul de mai jos, se va adăuga un "Home" butonul spre stânga și o "Search" buton în dreapta textului din titlu antet:
Exemplu
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Încearcă - l singur » Codul de mai jos se va adăuga doar un buton în partea stângă a titlului antet:
Exemplu
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Încearcă - l singur » Codul de mai jos se va adăuga doar un buton în partea dreaptă a titlului antet:
Exemplu
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Încearcă - l singur » Un antet poate conține una sau două butoane, în timp ce subsol are nici o limită.
Subsol Baruri
Subsolul este situat în partea de jos a paginii.
Subsolul este mai flexibilă decât antetul - este mai funcțională și schimbătoare de-a lungul pagini, și, prin urmare, pot conține cât mai multe butoane după cum este necesar:
Exemplu
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Încearcă - l singur » Sfat: Butoanele din subsol nu sunt centrate în mod implicit. Pentru a remedia acest lucru, pur și simplu utilizați CSS:
De asemenea, puteți butoane de grup din subsol orizontal sau vertical:
Exemplu
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Încearcă - l singur » Poziționarea Cap și Footers
Antet și subsol poate fi poziționată în trei moduri:
- Inline - implicit. Anteturile și subsolurile sunt în linie cu conținutul paginii
- Fixed - anteturile și subsolurile va rămâne poziționat în partea de sus și de jos a paginii
- Fullscreen - se comportă ca fix; anteturile și subsolurile va rămâne poziționat în partea de sus și de jos, dar, de asemenea, asupra conținutului paginii. Este, de asemenea, ușor se vedea prin
Utilizați data-position de data-position atribut pentru a poziționa antete și note de subsol dumneavoastră:
Inline Poziția (Default)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> Încearcă - l singur » Poziție fixă
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Încearcă - l singur » Pentru a activa poziția pe tot ecranul, utilizați datele din poziția = „fix“ și adăugați data-fullscreen atributul elementului:
Poziția pe tot ecranul
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Încearcă - l singur » Sfat: Poziția este ideal pentru ecran complet fotografii, imagini și clipuri video.
Sfat: Atingerea ecranului va ascunde și afișează antetele și subsolurile pentru ambele poziții fixe și ecran complet.
Mai multe exemple
Afișarea numai pictograma în bare de instrumente
Utilizarea ui-btn-icon-notext clasa pentru a afișa numai pictograma în butoanele antet și subsol.