Bar jQuery Mobile Navigasi
Sebuah bar navigasi terdiri dari kelompok link yang sejajar horizontal, biasanya dalam header atau footer:
Bar dikodekan sebagai daftar unordered link dibungkus dalam sebuah <div> elemen yang memiliki data-role="navbar" atribut:
Contoh
<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>
Cobalah sendiri " Secara default, link di dalam sebuah bar navigasi akan otomatis berubah menjadi tombol (tidak perlu untuk class="ui-btn" atau data-role="button" ).
Tombol ini, secara default, selebar isinya. Menggunakan daftar unordered untuk membagi tombol sama: 1 tombol mengambil 100% dari lebar, 2 tombol berbagi masing-masing 50%, 3 tombol 33,3%, dll Namun, jika Anda menentukan lebih dari 5 tombol di navbar, itu akan membungkus ke beberapa baris (lihat "Lebih Contoh" di bawah).
Ikon di Tombol Navigasi
Untuk menambahkan ikon untuk tombol navigasi, menggunakan data atribut-icon:
Data-icon atribut menggunakan nilai yang sama seperti kelas CSS yang ditetapkan dalam "Ikon" bab. Satu-satunya perbedaan adalah bahwa, bukannya menetapkan class="ui-icon- value " , Anda menentukan atribut dari data-icon=" value " .
| atribut Nilai | Deskripsi | icon |
|---|---|---|
| data-icon="home" | Rumah | |
| data-icon="arrow-r" | Panah kanan | |
| data-icon="search" | Pencarian |
Untuk referensi lengkap semua tombol ikon jQuery Mobile, silakan kunjungi kami jQuery Mobile Icons Referensi .
positioning Ikon
Sama seperti dengan "ui-btn-icon- position " kelas (ditentukan dalam "Ikon" bab), Anda dapat memilih mana ikon harus diposisikan di tombol navigasi: top, right, bottom atau left .
Posisi ikon ditetapkan pada wadah navbar - tidak mungkin untuk posisi setiap link tombol individu. Gunakan data-iconpos atribut untuk menentukan posisi:
| atribut Nilai | Deskripsi | Contoh |
|---|---|---|
| data-iconpos="top" | Top ikon keselarasan | Cobalah |
| data-iconpos="right" | icon keselarasan yang tepat | Cobalah |
| data-iconpos="bottom" | Bawah ikon keselarasan | Cobalah |
| data-iconpos="left" | Meninggalkan ikon keselarasan | Cobalah |
Secara default, ikon di tombol navigasi ditempatkan di atas teks (data-iconpos="top") .
Tombol aktif
Ketika link di navbar tersebut disadap / diklik, itu akan dipilih (menekan) terlihat.
Untuk mencapai tampilan ini tanpa harus tekan link, gunakan class="ui-btn-active" :
Untuk beberapa halaman, Anda mungkin ingin "dipilih" tampilan untuk setiap tombol yang mewakili halaman pengguna aktif. Untuk melakukannya, tambahkan "ui-state-persist" kelas ke link Anda, serta "ui-btn-active" kelas:
Contoh
<li><a href="#anylink"
class="ui-btn-active ui-state-persist" >Home</a></li>
Cobalah sendiri " Contoh lebih
Navbars di konten
Cara menambahkan bar navigasi di dalam data-role="content" .
Navbars di footer
Cara menambahkan bar navigasi di dalam footer.
Lebih dari 5 tombol
Sebuah demonstrasi 10 tombol di bar navigasi