jQuery Mobile Panel
panel jQuery Mobile akan menarik ke kanan di sisi kiri layar.
Ditunjuk oleh id dari elemen <div> untuk menambahkan data-role = "panel" properti untuk membuat panel.
Tambahkan tag HTML <div> untuk menampilkan isi dari panel Anda:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Catatan: tag panel harus ditempatkan sebelum header halaman, konten, atau setelah komposisi bagian bawah.
Untuk mengakses panel, Anda perlu membuat panel tautan <div> id dari link, klik pada link untuk membuka panel:
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
contoh sederhana dari panel
contoh
<Div Data-role = "panel " id = "myPanel">
<H2> kepala panel .. </ h2>
<P> panel Content .. </ p>
</ Div>
<Div Data-role = "header">
<H1> standar halaman header </ h1>
</ Div>
<Div Data-role = "main" class = "ui-content">
<P> Klik di bawah ini untuk membuka panel. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> panel terbuka </a>
</ Div>
<Div Data-role = "footer">
<H1> di bagian bawah teks </ h1>
</ Div>
</ Div>
Coba »
Tutup panel
Anda dapat klik pada panel atau wilayah eksternal atau tekan Esc untuk menutup panel geser. Anda dapat menggunakan data- * atribut untuk menonaktifkan dan klik untuk menutup panel geser:
| milik | nilai | deskripsi | contoh |
|---|---|---|---|
| Data-Dihapus | benar | palsu | Menentukan apakah panel dengan mengklik panel untuk menutup daerah luar. | mencoba |
| Data-gesek-dekat | benar | palsu | Menentukan apakah dapat ditutup dengan menggeser. | mencoba |
Anda dapat menggunakan tombol untuk menutup panel: hanya perlu menambahkan data-rel = "dekat" di panel properties <div> di. Untuk alasan performa, kami harus menutup link href poin atribut ke halaman ID.
contoh
<H2> kepala panel .. </ h2>
<P> Panel beberapa teks .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> Tutup panel </a>
</ Div>
Coba »
panel display
Anda dapat menggunakan properti modus data-display untuk mengontrol panel display:
| Nilai properti | deskripsi |
|---|---|
| Data-display = "overlay" | Tampilan panel pada konten |
| Data-display = "push" | Bersamaan "push" panel dan halaman. |
| Data-display = "mengungkapkan" | halaman default akan menarik dari layar seperti slide, panel akan ditampilkan |
contoh
<Div Data-role = "panel " id = "revealPanel" Data-display = "mengungkapkan">
<Div Data-role = "panel " id = "pushPanel" Data-display = "push">
Coba »
panel Lokasi
Secara default, panel akan ditampilkan di sisi kiri layar. Jika Anda ingin panel muncul di sisi kanan layar, Anda dapat menentukan data-posisi = "kanan" properti.
Anda dapat menentukan isi dari panel sesuai dengan halaman scroll dan scroll. Secara default, panel bersama-sama dengan halaman bergulir (tapi isi panel tersebut masih di atas halaman). Jika Anda perlu untuk mengimplementasikan isi panel stasioner dengan halaman scroll dan scroll, Anda dapat menambahkan data-posisi-tetap = "true" atribut dalam panel: