tutorial pengembangan web terbaru
 

jQuery Mobile panel


jQuery Mobile Panel

Panel di jQuery Mobile akan meluncur keluar dari kiri atau sisi kanan layar dengan konten tambahan.



Untuk membuat panel, menambahkan data-role="panel" atribut untuk <div> elemen dan menentukan id .

Menambahkan markup HTML di dalam ini <div> yang ingin ditampilkan di panel Anda:

<div data-role="panel" id="myPanel" >
  <h2>Panel Header..</h2>
  <p>Some text..</p>
</div>

Catatan: markup panel harus ditempatkan sebelum atau sesudah header, konten dan footer dalam halaman jQuery Mobile.

Untuk mengakses panel, membuat link yang menunjuk ke id panel <div> . Ketika pengguna mengklik pada link, panel akan terbuka:

<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>

Berikut ini adalah contoh panel dasar:

Contoh

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel" >
    <h2>Panel Header..</h2>
    <p>Some text in the panel..</p>
  </div>

  <div data-role="header">
    <h1>Standard Page Header</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>Click on the button below to open the Panel.</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>
Cobalah sendiri "

penutupan Panel

Anda dapat menutup panel dengan mengklik di luar itu, dengan menggesekkan atau dengan menekan Esc kunci. Anda dapat menonaktifkan mengklik dan fitur menggesekkan dengan menambahkan tambahan data-* atribut untuk panel <div> :

Atribut Nilai Deskripsi Contoh
data-dismissible true | false Menentukan apakah panel dapat ditutup dengan mengklik di luar itu, atau tidak Cobalah
data-swipe-close true | false Menentukan apakah panel dapat ditutup dengan menggesekkan, atau tidak Cobalah

Anda juga dapat menutup panel dengan menggunakan tombol: Hanya menambahkan link di dalam panel <div> dengan data-rel="close" atribut yang melekat padanya. Dan untuk alasan kompatibilitas, Anda juga harus menentukan href atribut untuk menunjuk ke ID dari halaman pengguna harus pergi ke ketika menutup panel:

Contoh

<div data-role="panel" id="myPanel">
  <h2>Panel Header..</h2>
  <p>Some text in the panel..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div>
Cobalah sendiri "

panel Display

Anda dapat mengontrol mode tampilan panel dengan data atribut-display:

atribut Nilai Deskripsi
data-display="overlay" Menampilkan panel atas konten
data-display="push" Menjiwai kedua panel dan halaman pada saat yang sama
data-display="reveal" Default. Panel akan duduk di bawah halaman dan mengungkapkan sebagai halaman slide pergi

Contoh

<div data-role="panel" id="overlayPanel" data-display="overlay" >
<div data-role="panel" id="revealPanel" data-display="reveal" >
<div data-role="panel" id="pushPanel" data-display="push" >
Cobalah sendiri "

positioning Panel

Secara default, panel akan muncul di sisi kiri layar. Untuk panel untuk muncul di sisi kanan layar, menentukan data-position="right" atribut.

Contoh

<div data-role="panel" id="myPanel" data-position="right" >
Cobalah sendiri "

Anda juga dapat menentukan bagaimana isi panel harus diposisikan sesuai dengan sisa halaman ketika pengguna mulai bergulir. Secara default, panel akan gulir dengan halaman (tapi isi panel akan tetap di atas halaman). Jika Anda selalu ingin menampilkan isi dari panel, tidak peduli seberapa jauh Anda menggulir halaman, tambahkan data-position-fixed="true" atribut ke panel:

Contoh

<div data-role="panel" id="myPanel" data-position-fixed="true" >
Cobalah sendiri "