Bary jQuery Mobile Navigation
Pasek nawigacyjny składa się z grupy linków, które są wyrównane poziomo, zazwyczaj w nagłówku lub stopce:
Pasek jest kodowana jako nieuporządkowanej listy linków owinięty wewnątrz <div> element, który ma data-role="navbar" atrybutu:
Przykład
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Spróbuj sam " Domyślnie linki wewnątrz pasku nawigacyjnym automatycznie zmieni się w przycisk (bez konieczności class="ui-btn" lub data-role="button" ).
Przyciski są domyślnie tak szeroki jak jego treści. Użyj listę nieuporządkowaną podzielić równo przyciski: jeden przycisk wykonuje 100% szerokości, 2 przyciski podziela 50% każda, 3 przyciski 33,3%, itd. Jednakże, jeśli podasz więcej niż 5 przycisków na pasku nawigacyjnym, to będą zawijać do wiele linii (patrz "Więcej przykładów" poniżej).
Ikony w przyciski nawigacyjne
Aby dodać ikonę do przycisku nawigacyjnym użyć atrybutu danych ICON:
atrybut danych ikona używać tych samych wartości jako klas CSS określonych w rozdziale "Ikony". Jedyną różnicą jest to, że zamiast określania class="ui-icon- value " , należy określić atrybut data-icon=" value " .
| wartość atrybutu | Opis | Ikona |
|---|---|---|
| data-icon="home" | Dom | |
| data-icon="arrow-r" | Prawa strzałka | |
| data-icon="search" | Szukanie |
Aby uzyskać pełny opis wszystkich ikon przycisków jQuery telefonów, przejdź do naszej jQuery Ikony Telefony Reference .
pozycjonowanie ikony
Podobnie jak z "ui-btn-icon- position " klasy (określonej w rozdziale "Ikony"), można wybrać, gdy ikona powinna być umieszczona w przycisku nawigacyjnego: top, right, bottom lub left .
Ikona pozycji jest ustawiony na kontenerze NavBar - nie jest możliwe umieszczenie każdego indywidualnego związku przycisku. Użyj data-iconpos atrybut, aby określić położenie:
| wartość atrybutu | Opis | Przykład |
|---|---|---|
| data-iconpos="top" | Top wyrównanie ikona | Spróbuj |
| data-iconpos="right" | Wyrównanie do prawej ikony | Spróbuj |
| data-iconpos="bottom" | Dno wyrównanie ikona | Spróbuj |
| data-iconpos="left" | Wyrównanie do lewej ikona | Spróbuj |
Domyślnie, ikony przycisków nawigacyjnych są umieszczone nad tekstem (data-iconpos="top") .
aktywne przyciski
Gdy link na pasku nawigacyjnym jest na podsłuchu / kliknięciu robi wybrana (wciśnięty) wyglądają.
Aby osiągnąć taki wygląd bez konieczności wybierz łącze, należy użyć class="ui-btn-active" :
Na wielu stronach, może chcesz "wybrane" wygląd dla każdego przycisku, który reprezentuje stronę użytkownika jest dalej. Aby to zrobić, należy dodać "ui-state-persist" klasy do linków, a także "ui-btn-active" klasy:
Więcej przykładów
NavBars w treści
Jak dodać pasek nawigacji wewnątrz data-role="content" .
NavBars w stopce
Jak dodać pasek nawigacji wewnątrz stopce.
Ponad 5 przycisków
Demonstracja 10 przycisków w pasku nawigacyjnym