Bar Alat jQuery Mobile

Bar Alat jQuery Mobile

Elemen alat biasanya diletakkan di tajuk halaman dan bandingan untuk mencapai navigasi 'telah di lawati':

Bar tajuk

Tajuk halaman biasanya mengandungi tajuk tajuk halaman/LOGO atau satu hingga dua tombol (biasanya laman utama, pilihan atau tombol cari).

Anda boleh menambahkan tombol ke sebelah kiri atau serta sebelah kanan tajuk halaman.

Kod berikut akan menambahkan tombol ke sebelah kiri teks tajuk tajuk halaman dan tombol ke sebelah kanan:

Contoh

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

Coba sendiri

Kod berikut akan menambahkan tombol ke sebelah kiri tajuk tajuk halaman:

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

walau bagaimanapun, jika anda meletakkan pautan tombol di belakang elemen <h1>, ia tidak akan dipaparkan di sebelah kanan teks. Untuk menambahkan tombol ke sebelah kanan tajuk tajuk halaman, 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:Tajuk halaman boleh mengandungi satu atau dua tombol, tetapi bandingan tidak mempunyai hadangan.

Bandingan bar

Bandingan adalah yang lebih fleksibel berbanding dengan tajuk halaman - ia lebih praktis dan beragam, sehingga dapat mengandungi jumlah tombol yang diperlukan:

Contoh

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

Coba sendiri

Keterangan:Gaya kaki halaman berbeda daripada tajuk halaman (ia akan mengurangi beberapa margin internal dan ruang, dan tombol tidak akan di tengah). Jika ingin memperbaiki masalah ini, gunakan class "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">Buat siaran ke Weibo Sina</a>
    <a href="#" data-role="button" data-icon="plus">Buat siaran ke Weibo Tencent</a>
    <a href="#" data-role="button" data-icon="plus">Buat siaran ke Ruang QQ</a>
  </div>
</div>

Coba sendiri

Lokasi tajuk dan kaki halaman

Ada tiga cara untuk menempatkan tajuk dan kaki halaman:

  • Inline - default. Tajuk dan kaki halaman berada di dalam baris konten.
  • Tetap - tajuk dan kaki halaman akan tinggal di atas dan bawah halaman.
  • Penuh Skrin - Mirip dengan fixed; tajuk dan kaki halaman akan tinggal di atas dan bawah halaman, tetapi juga melintasi konten halaman. Ia juga mengangkat sedikit

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

Lokasi Inline (default)

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

Coba sendiri

Lokasi Tetap

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

Coba sendiri

Jika anda ingin mengaktifkan lokasi penuh skrin, gunakan data-position="fixed" dan tambahkan atribut data-fullscreen kepada elemen itu:

Penuh Skrin Lokasi

<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:Full screen sangat ideal untuk foto, gambar, dan video.

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