JQUERY MOBILE BAR NAVIGASI (TOOLBAR)

Bar navigasi terdiri dari kelompok link yang sejajar horizontal, dalam header atau footer. Bar
dikodekan sebagai daftar unordered link dibungkus dalam sebuah <div> elemen yang
memiliki data-role="navbar" atribut.

Bar Navigasi (Toolbar) adalah sekumpulan tombol (button) yang biasanya diletakkan di bagian
atas (bisa juga di bawah) dan memiliki fungsi yang berbeda-beda. Umumnya toolbar diwakili
oleh sebuah icon yang sekaligus menunjukkan fungsinya.

Toolbar biasa
Toolbar sederhana, beberapa text link yang dijadikan toolbar diletakkan pada bagian header
dari halaman jQuery Mobile. Simpan dengan nama : contoh5a.html (toolbar tanpa icon).

Perhatikan bahwa header dan toolbarnya ikut tergulung ketika layar di-scroll ke atas 
Nav_bar1.html

Secara default, link di dalam sebuah bar navigasi akan otomatis berubah menjadi tombol
(tidak perlu untuk class="ui-btn" atau data-role="button"). Tombol 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%.

Toolbar dengan Icon dan Teks

Konsepnya mirip dengan Membuat Button, untuk menampilkan iconnya dengan menggunakan

atribut data-icon, yaitu : data-icon="arrow-d" (jika ingin menampilkan icon panah ke bawah).
Berikut ini contoh script untuk membuat header dan toolbar yang posisinya tetap dan tidak
ikut tergulung ketika layar di-scroll (dengan menambahkan data-position="fixed" pada bagian
headernya). Simpan dengan nama file contoh5b.html (toolbar_icon_text).
Jadi untuk menambahkan ikon di tombol navigasi, menggunakan data atribut-icon
Contoh : <a href="#anylink" data-icon="search" >Search</a>

Data-icon atribut menggunakan nilai yang sama seperti kelas CSS yang ditetapkan dalam
"Ikon". Kita menentukan atribut dari data-icon=" value " .

atribut Nilai Deskripsi

data-icon="home" Rumah

data-icon="arrow-r" Panah kanan

data-icon="search" Pencarian
Untuk Referensi tombol ikon jQuery Mobile, kita bisa masuk ke jQuery Mobile Icons Referensi
Nav_bar2.html

Positioning Ikon
Sama seperti dengan "ui-btn-icon- position " class (ditentukan dalam "Ikon"), kita dapat
memilih posisi ikon di tombol navigasi: top, right, bottom atau left. Posisi ikon ditetapkan pada
navbar - Gunakan data-iconpos atribut untuk menentukan posisi.

Atribut Nilai Deskripsi

data-iconpos="top" Icon berada diatas teks

data-iconpos="right" icon berada disebelah kanan teks

data-iconpos="bottom" icon berada dibawah teks

data-iconpos="left" icon berada disebelah kiri teks

Contoh source code dimana icon berada diatas teks (navbars_pos_top)

Secara default, ikon di tombol navigasi ditempatkan di atas teks (data-iconpos="top") .

Toolbar dengan Icon tanpa Teks

Hampir sama dengan contoh yang kedua, bedanya hanya pada teks saja tidak ada. Cukup
hapus teks yang ada itu dan jadilah dia toolbar dengan icon tanpa teks. Berikut ini contoh
script untuk membuat toolbar yang ketiga. Simpan dengan nama file : Contoh5c.html
(toolbar_icon_notext).
Soal Latihan

Buatlah WEB Mobile dengan contoh kasus anda tentukan sendiri yang didalamnya terdapat Bar
Navigasi (Toolbar), dengan ketentuan :

1. Anda bisa menggunakan salah satu toolbar :

a. Toolbar Biasa

b. Toolbar Dengan Icon dan Teks

c. Toolbar dengan Icon Tanpa Teks.

2. Banyaknya tombol dalam bar navigasi minimal 4 button dan terdapat link diantara page dan
keempat button yang telah anda buat.

3. Tambahkan pengaturan warna dan gambar untuk memperindah tampilan web mobile yang dibuat.