jQuery Mobile navigasi bar
Navigasi bar adalah seperangkat link disusun secara horizontal komposisi, biasanya terkandung dalam kepala atau ekor.
Secara default, link di bar navigasi akan secara otomatis menjadi tombol (tidak ada data-role = "button").
Menggunakan data-role = "navbar" atribut untuk menentukan bar navigasi:
contoh
<div data-role="navbar" >
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
Coba »
Secara default, lebar tombol dan isinya sama. Menggunakan daftar unordered untuk merata membagi lebar tombol: satu tombol untuk 100% dari lebar dua tombol masing-masing menyumbang 50% dari lebar tiga tombol masing-masing menyumbang 33,3% dari lebar, dan sebagainya. Namun, jika Anda menetapkan lebih dari lima tombol pada panel navigasi akan dipecah menjadi beberapa baris (Lihat "Lebih contoh"). |
tombol ikon Navigasi
Kita dapat menggunakan data atribut-ikon untuk menambahkan ikon untuk tombol navigasi:
Data-icon atribut dengan bagian kelas CSS dari ikon menggunakan nilai yang sama. kelas CSS untuk menggunakan class = "value ui-ikon-" , Data-ikon atribut untuk menggunakan data-icon = "value".
Nilai properti | deskripsi | icon |
---|---|---|
Data-icon = "rumah" | rumah | |
Data-icon = "panah-r" | Di panah kanan | |
Data-icon = "search" | pencarian |
Untuk referensi manual yang lengkap untuk semua ikon tombol jQuery Mobile, kunjungi ikon Referensi jQuery Mobile .
lokasi icon
Seperti "ui-btn-ikon- posisi" kategori yang sama (icon bagian dijelaskan secara rinci), Anda dapat mengatur lokasi ikon ditampilkan: top (kepala), kanan (di sebelah kanan), bawah (bottom) atau kiri (di sebelah kiri ).
Lokasi icon pada wadah bar navigasi yang disediakan, dengan menggunakan data-iconpos atribut untuk menentukan lokasi:
Nilai properti | deskripsi | contoh |
---|---|---|
Data-iconpos = "top" | Menyelaraskan ikon atas | mencoba |
Data-iconpos = "right" | Ikon di kanan-blok | mencoba |
Data-iconpos = "bawah" | Sejajarkan bagian bawah ikon | mencoba |
Data-iconpos = "kiri" | Menyelaraskan ikon kiri | mencoba |
Secara default, ikon terletak di atas teks tombol navigasi (data-iconpos = "top"). |
tombol aktivasi
Ketika link pada bar navigasi diklik, maka akan mendapatkan dipilih (ditekan) penampilan.
Jika Anda ingin mendapatkan tampilan ini jangan klik link, gunakan class = "ui-btn-aktif":
Untuk beberapa halaman, Anda mungkin ingin memeriksa penampilan masing-masing tombol atas nama halaman saat pengguna berada. Untuk melakukan hal ini, tambahkan "ui-negara bertahan" dan "ui-btn-aktif" untuk kelas:
contoh yang lebih
bar navigasi konten
Bagaimana Anda menambahkan bar navigasi dalam data-role = "content".
Ekor bar navigasi
Bagaimana Anda menambahkan bar navigasi di bagian belakang.
icon target di bar navigasi
Bagaimana menemukan ikon bar navigasi di bagian ekor.
Lebih dari lima tombol
tombol 10 Demo di bar navigasi.