Panel nawigacyjny jQuery Mobile

Panel nawigacyjny jQuery Mobile

Paskowy nawigacyjny składa się z zestawu poziomo ustawionych linków, które zwykle znajdują się w nagłówku lub stopce.

Domyślnie, linki w pasku nawigacyjnym są automatycznie przekształcane w przyciski (nie wymaga data-role="button").

Użyj atrybutu data-role="navbar", aby zdefiniować paskowy nawigacyjny:

przykład

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">strona główna</a></li>
      <li><a href="#anylink">strona druga</a></li>
      <li><a href="#anylink">wyszukiwanie</a></li>
    </ul>
  </div>
</div>

Spróbuj sam

Wskazówka:Szerokość przycisku, domyślnie, jest zgodna z jego zawartością. Użyj listy bezpośredniej, aby równomiernie podzielić przyciski: jeden przycisk zajmuje 100% szerokości, dwa przyciski dzielą po 50% szerokości, trzy przyciski 33.3%, itd. Jednak, jeśli w pasku nawigacyjnym masz pięć lub więcej przycisków, zagnie się na wielu wierszach (patrz dolna część strony "Więcej przykładów").

Aktywny przycisk

Kiedy link w pasku nawigacyjnym jest klikany, otrzymuje wygląd wybrany (naciśnięty).

Jeśli chcesz osiągnąć ten wygląd bez klikania linku, użyj klasy "ui-btn-active":

przykład

<li><a href="#anylink" class="ui-btn-active">Strona główna</a></li>

Spróbuj sam

Dla wielu stron, może być konieczne ustawienie wyglądu "wybranego" dla każdego przycisku, aby wskazać, że użytkownik przegląda tę stronę. Jeśli chcesz to zrobić, dodaj klasę "ui-state-persist" oraz klasę "ui-btn-active" do linku:

przykład

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Strona główna</a></li>

Spróbuj sam

Więcej przykładów

Panel nawigacyjny w zawartości
Jak dodać panel nawigacyjny w data-role="content".
Panel nawigacyjny w stopce
Jak dodać panel nawigacyjny w stopce.
Lokalizacja ikon w panelu nawigacyjnym
Jak umieścić ikony w panelu nawigacyjnym w stopce.
Pięć lub więcej przycisków
Dziesięć przycisków w panelu nawigacyjnym.