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.
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: