tutorial pengembangan web terbaru
 

jQuery Mobile Bar navigasi


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:

Contoh

<a href="#anylink" data-icon="search" >Search</a>
Cobalah sendiri "

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

Contoh

<li><a href="#anylink" class="ui-btn-active" >Home</a></li>
Cobalah sendiri "

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