Barru Navigasi jQuery Mobile

Barru Navigasi jQuery Mobile

Navigasi terdiri dari sekelompok link yang berada di baris horizontal, biasanya berada di dalam judul atau kaki halaman.

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

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

contoh

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

Coba sendiri

Peringatan:Lebar tombol, secara default, sama dengan kontennya. Gunakan daftar tak berurutan untuk membagi tombol secara rata: satu tombol mengambil 100% lebar, dua tombol membagi 50% lebar, tiga tombol 33.3%, dan seterusnya. Namun, jika Anda menetapkan lima tombol atau lebih di dalam navigasi, dia akan berbelah menjadi berbagai baris (lihat contoh di bawah halaman "Lebih Banyak Contoh").

Tombol yang Aktif

Ketika link di dalam navigasi ditekan, dia akan mendapatkan gaya pilihan (ditekan).

Jika Anda ingin mencapai gaya ini tanpa menekan link, gunakan class="ui-btn-active":

contoh

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

Coba sendiri

Untuk halaman banyak, Anda mungkin perlu menetapkan gaya "terpilih" untuk setiap tombol untuk menandai bahwa pengguna sedang melihat halaman tersebut. Jika Anda ingin melakukannya, tambahkan kelas "ui-state-persist" serta "ui-btn-active" ke link:

contoh

<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 footer
Bagaimana menambahkan barru navigasi di dalam footer.
Menempatkan ikon di dalam barru navigasi
Bagaimana menempatkan ikon di dalam footer navigasi.
Lebih dari lima tombol
Demos sepuluh tombol di dalam barru navigasi.