jQuery Toolbars Ponsel
elemen Toolbar sering ditempatkan dalam header dan footer - untuk navigasi "akses yang mudah":
Bar Header
header terletak di bagian atas halaman dan biasanya mengandung halaman judul / logo atau satu atau dua tombol (biasanya rumah, opsi atau pencarian).
Anda dapat menambahkan tombol ke kiri dan / atau ke sisi kanan di header.
Kode di bawah, akan menambahkan tombol "Home" ke kiri dan tombol "Cari" di sebelah kanan teks judul judul:
Contoh
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Cobalah sendiri " Kode berikut hanya akan menambahkan tombol ke sisi kiri judul header:
Contoh
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Cobalah sendiri " Kode berikut hanya akan menambahkan tombol ke sisi kanan judul header:
Contoh
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Cobalah sendiri " Sebuah header dapat berisi satu atau dua tombol, sedangkan footer tidak memiliki batas.
Bar Footer
footer terletak di bagian bawah halaman.
footer lebih fleksibel daripada header - lebih fungsional dan berubah sepanjang halaman, dan karena itu dapat berisi banyak tombol yang diperlukan:
Contoh
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Cobalah sendiri " Tip: Tombol di footer tidak terpusat secara default. Untuk mengatasinya, cukup gunakan CSS:
Anda dapat juga tombol kelompok di footer horizontal atau vertikal:
Contoh
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Cobalah sendiri " Positioning header dan footer
Header dan footer dapat diposisikan dalam tiga cara:
- Inline - default. Header dan footer yang inline dengan konten halaman
- Fixed - Header dan footer akan tetap diposisikan di bagian atas dan bawah halaman
- Fullscreen - Berjalan seperti tetap; header dan footer akan tetap diposisikan di bagian atas dan bawah, tetapi juga atas konten halaman. Hal ini juga sedikit tembus
Menggunakan atribut data posisi ke posisi header dan footer:
Inline Posisi (Default)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> Cobalah sendiri " Posisi tetap
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Cobalah sendiri " Untuk mengaktifkan posisi fullscreen, penggunaan data posisi = "tetap" dan menambahkan data atribut-fullscreen untuk elemen:
Posisi fullscreen
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Cobalah sendiri " Tip: Posisi fullscreen ideal untuk foto, gambar dan video.
Tip: Tapping layar akan menyembunyikan dan menunjukkan header dan footer untuk kedua posisi tetap dan fullscreen.
Contoh lebih
Hanya menampilkan ikon di toolbar
Menggunakan ui-btn-icon-notext kelas untuk hanya menampilkan ikon di tombol header dan footer.