Latest web development tutorials

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="header">
<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 »

lampu 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:

contoh

<a href="#anylink" data-icon="search"> Cari </a>

Coba »

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
catatan 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":

contoh

<li><a href="#anylink" class="ui-btn-active" >首页</a></li>

Coba »

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

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

Coba »


contoh

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.