Barru Alat jQuery Mobile

Barru Alat jQuery Mobile

Elemen toolbar sering disempatkan di header dan footer - untuk mencapai navigasi "telah diakses":

Bar judul

Header biasanya mengandung judul header/LOGO atau satu hingga dua tombol (biasanya tombol beranda, pilihan, atau pencarian).

Anda dapat menambahkan tombol di sebelah kiri atau/ dan kanan header.

Kode di bawah ini akan menambahkan tombol di sebelah kiri dan kanan teks judul header:

Contoh

<div data-role="header">
  <a href="#" data-role="button">Beranda</a>
  <h1>Selamat datang ke halaman utama saya</h1>
  <a href="#" data-role="button">Cari</a>
</div>

Coba sendiri

Kode di bawah ini akan menambahkan tombol di sebelah kiri judul header:

<div data-role="header">
  <a href="#" data-role="button">Beranda</a>
  <h1>Selamat datang ke halaman utama saya</h1>
</div>

Namun, jika Anda menempatkan tautan tombol setelah elemen <h1>, mereka tidak akan muncul di sebelah kanan teks. Untuk menambahkan tombol di sebelah kanan judul header, tentukan nama kelas "ui-btn-right":

Contoh

<div data-role="header">
  <h1>Selamat datang ke halaman utama saya</h1>
  <a href="#" data-role="button" class="ui-btn-right">Cari</a>
</div>

Coba sendiri

Petunjuk:Header dapat mengandung satu atau dua tombol, tetapi footer tidak membatasi.

Bar footer

Dengan dibandingkan dengan header, footer lebih fleksibel - mereka lebih praktis dan beragam, sehingga dapat menempatkan jumlah tombol yang dibutuhkan:

Contoh

<div data-role="footer">
  <a href="#" data-role="button">Tayangkan ke Weibo Sina</a>
  <a href="#" data-role="button">Tayangkan ke Weibo Tencent</a>
  <a href="#" data-role="button">Tayangkan ke Ruang QQ</a>
</div>

Coba sendiri

Catatan:Gaya kaki halaman berbeda dengan tajuk halaman (ia akan mengurangi beberapa margin internal dan ruang, dan tombol tidak akan berada di tengah). Jika ingin memperbaiki masalah ini, gunakan kelas "ui-btn" di pengaturan kaki halaman:

Contoh

<div data-role="footer" class="ui-btn">

Coba sendiri

Anda juga dapat memilih untuk menggabungkan tombol secara horizontal atau vertikal di kaki halaman:

Contoh

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Tayangkan ke Weibo Sina</a>
    <a href="#" data-role="button" data-icon="plus">Tayangkan ke Weibo Tencent</a>
    <a href="#" data-role="button" data-icon="plus">Tayangkan ke Ruang QQ</a>
  </div>
</div>

Coba sendiri

Pemosisian tajuk dan kaki halaman

Ada tiga cara untuk menempatkan tajuk dan kaki halaman:

  • Inline - baku. Tajuk dan kaki halaman berada di dalam baris konten halaman.
  • Tetap - Tajuk dan kaki halaman akan tinggal di atas dan bawah halaman.
  • Penuh Layar - Mirip dengan fixed; tajuk dan kaki halaman akan tinggal di atas dan bawah halaman, tetapi juga di atas konten halaman. Ini juga sedikit lembut

Gunakan atribut data-position untuk memosisikan tajuk dan kaki halaman:

Pemosisian Inline (baku)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Coba sendiri

Pemosisian Tetap

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Coba sendiri

Jika Anda ingin mengaktifkan penuh layar, gunakan data-position="fixed" dan tambahkan atribut data-fullscreen ke elemen itu:

Penuh Layar

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Coba sendiri

Petunjuk:Mode fullscreen sangat idealkan untuk foto, gambar, dan video.

Petunjuk:Untuk pengaturan fixed dan fullscreen, sentuh layar akan menyembunyikan dan menampilkan tajuk dan kaki halaman.