jQuery Telefony Paski
Elementy paska narzędzi są często umieszczane wewnątrz nagłówków i stopek - dla "łatwy dostęp" nawigacji:
Bary header
Nagłówek znajduje się u góry strony i zazwyczaj zawierać stronę tytułową / logo lub jeden lub dwa przyciski (zazwyczaj w domu, opcje lub przeszukiwanie).
Możesz dodać przyciski po lewej i / lub prawej stronie w nagłówku.
Poniższy kod, doda przycisk "Home" na lewo i przycisk "Szukaj" po prawej stronie tekstu tytułowej nagłówek:
Przykład
<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> Spróbuj sam " Poniższy kod doda przycisk tylko po lewej stronie tytułu nagłówka:
Przykład
<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> Spróbuj sam " Poniższy kod doda przycisk tylko po prawej stronie tytułu nagłówka:
Przykład
<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> Spróbuj sam " Nagłówek może zawierać jeden lub dwa przyciski, natomiast stopka ma limitu.
Bary stopki
Stopka znajduje się na dole strony.
Stopka jest bardziej elastyczny niż cel - jest bardziej funkcjonalny i zmienne całej strony, a zatem może zawierać wiele przycisków w zależności od potrzeb:
Przykład
<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> Spróbuj sam " Wskazówka: Przyciski w stopce nie są wyśrodkowane domyślnie. Aby rozwiązać ten problem, wystarczy użyć CSS:
Można również przyciski grupowe w stopce poziomo lub pionowo:
Przykład
<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> Spróbuj sam " Pozycjonowanie nagłówki i stopki
Nagłówek i stopka mogą być umieszczone na trzy sposoby:
- Inline - domyślna. Nagłówki i stopki są inline z zawartości strony
- Fixed - Nagłówki i stopki pozostanie umieszczony na górze i na dole strony
- Fullscreen - zachowuje się jak stały; nagłówki i stopki pozostanie umieszczony na górze i na dole, ale również nad treścią strony. Jest też nieco przezroczyste
Użyj atrybutu danych pozycji do pozycji nagłówków i stopek:
Inline Position (domyślne)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> Spróbuj sam " stałej pozycji
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Spróbuj sam " Aby włączyć funkcję pełnoekranowego, wykorzystanie danych pozycja = "stałe" i dodać atrybut danych-fullscreen do elementu:
Stanowisko fullscreen
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Spróbuj sam " Wskazówka: Pozycja fullscreen jest idealny do zdjęć, obrazów i filmów.
Wskazówka: Po naciśnięciu ekran ukryje i pokazać nagłówki i stopki dla obu stanowisk stacjonarnych i na pełnym ekranie.
Więcej przykładów
Wyświetlanie tylko ikony w paskach narzędzi
Korzystanie z ui-btn-icon-notext klasę tylko wyświetla ikonę przycisków nagłówka i stopki.