Barru Navigasi jQuery Mobile

Barru Navigasi jQuery Mobile

Navigasi bar terdiri dari sekumpulan tautan yang berbaris horizontal, biasanya berada di dalam tajuk atau kaki halaman.

Secara baku, tautan di dalam navigasi bar akan secara otomatis diubah menjadi tombol (tanpa data-role="button").

Gunakan atribut data-role="navbar" untuk menentukan navigasi bar:

实例

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Halaman Utama</a></li>
      <li><a href="#anylink">Halaman Kedua</a></li>
      <li><a href="#anylink">Cari</a></li>
    </ul>
  </div>
</div>

Coba sendiri

Petunjuk:Lebar tombol, secara baku, sejalan dengan kontennya. Gunakan daftar tak berurutan untuk membagi tombol secara seimbang: satu tombol mengambil 100% lebar, dua tombol berbagi 50% lebar, tiga tombol 33.3%, dan seterusnya. Namun, jika anda mengatur lima tombol atau lebih di dalam navigasi bar, dia akan berbelah menjadi beberapa baris (lihat contoh di bawah halaman "Lebih Banyak Contoh").

Tombol aktif

Ketika tautan di dalam navigasi bar di tekan, dia akan memperoleh gaya pilihan (ditekan).

Untuk mencapai gaya ini tanpa menekan tautan, gunakan class="ui-btn-active":

实例

<li><a href="#anylink" class="ui-btn-active">Halaman Utama</a></li>

Coba sendiri

Untuk halaman yang berbagai, anda mungkin perlu mengatur gaya "terpilih" untuk setiap tombol untuk menandakan pengguna yang sedang melihat halaman tersebut. Jika anda ingin melakukan hal ini, tambahkan kelas "ui-state-persist" serta "ui-btn-active" ke alamat penghubung:

实例

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Halaman Utama</a></li>

Coba sendiri

Beberapa contoh lain

Barru navigasi di dalam konten
Bagaimana menambahkan barru navigasi di dalam 'data-role="content"'.
Barru navigasi di dalam kaki halaman
Bagaimana menambahkan barru navigasi di dalam kaki halaman.
Menempatkan ikon di dalam navigasi
Bagaimana menempatkan ikon di dalam navigasi di dalam kaki halaman.
Lebih dari lima tombol
Demonstrasi sepuluh tombol di dalam barru navigasi.