jQuery Mobile Toolbar
elemen toolbar biasanya terletak di kepala dan ekor - membuat navigasi akses mudah ke:
Head Bar
Kolom kepala biasanya berisi halaman judul / logo atau satu atau dua tombol (biasanya halaman rumah, atau pilihan pencarian).
Anda dapat menambahkan tombol ke sisi kiri atau kanan kepala.
Kode berikut akan menambahkan tombol di sebelah kiri kepala teks judul, menambahkan tombol di sebelah kanan kepala teks judul:
contoh
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left"> Depan </a>
<H1> Selamat datang di halaman rumah saya </ h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left"> pencarian </a>
</ Div>
Coba »
Kode berikut akan menambahkan tombol di sebelah kiri kepala teks judul:
contoh
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left"> Depan </a>
<H1> Selamat datang di halaman rumah saya </ h1>
</ Div>
Coba »
Namun, jika Anda menempatkan link tombol ditempatkan setelah <h1> elemen akan tidak dapat menampilkan teks ke kanan. Untuk menambahkan tombol di sebelah kanan kepala judul, menetapkan kelas sebagai "ui-btn-benar":
contoh
<H1> Selamat datang di halaman rumah saya </ h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left"> pencarian </a>
</ Div>
Coba »
 | Header dapat berisi satu atau dua tombol, ekor tanpa batasan. |
|---|
ekor bar
Lebih fleksibel daripada bar tajuk kolom belakang - seluruh halaman mereka lebih fungsional dan variabilitas, itu dapat berisi banyak tombol:
contoh
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Ikuti saya di Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Ikuti saya di Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Ikuti saya di Instagram </a>
</ Div>
Coba »
Catatan: Ekor dan kepala gaya yang berbeda (ada padding dan ruang, dan tombol tidak berpusat). Kita dapat menggunakan pola sederhana untuk mengatasi masalah ini:
Anda juga dapat menggunakan tombol di kombinasi horizontal atau vertikal belakang:
contoh
<Div Data-role = "controlgroup " Data-type = "horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Ikuti saya di Facebook </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Ikuti saya di Twitter </a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left"> Ikuti saya di Instagram </a>
</ Div>
</ Div>
Coba »
Posisi kepala dan ekor bar bar
Kepala dan ekor dapat diposisikan dalam tiga cara:
- Inline - default. Inggris dalam tajuk bar dan belakang bar dan halaman konten.
- Tetap - kepala dan ekor bar bar tetap ke atas dan bawah halaman.
- Fullscreen - modus posisi Tetap pada dasarnya sama dengan kepala dan ekor bar bar tetap ke atas dan bawah halaman. Tapi ketika ia keluar dari layar ketika bergulir toolbar tidak akan ditampilkan lagi secara otomatis, kecuali sentuh layar, yang gambar atau kategori video yang telah dibangkitkan ke dalam rasa aplikasi ini sangat berguna. Perhatikan bahwa modus toolbar ini akan mencakup konten halaman, sehingga sangat baik digunakan pada acara-acara khusus.
Menggunakan properti Data-posisi untuk mencari kepala dan ekor bar bar:
Inline positioning (default)
<div data-role="footer" data-position="inline" ></div>
Coba »
Lokasi tetap
<div data-role="footer" data-position="fixed" ></div>
Coba »
Untuk mengaktifkan posisi layar penuh, menggunakan data-posisi = "tetap", dan menambahkan data atribut-fullscreen untuk elemen:
fullscreen Lokasi
<div data-role="footer" data-position="fixed" data-fullscreen="true" ></div>
Coba »
Tip: Penuh penargetan berlaku untuk foto, gambar dan video.
Tip: positioning tetap dan menargetkan layar penuh dengan mengklik layar akan menampilkan dan menyembunyikan kepala kolom dan ekor bar.
contoh yang lebih
Pada ikon menampilkan toolbar hanya
Pada toolbar menampilkan ikon hanya Anda dapat menggunakan kelas ui-btn-icon-notext.