Tutorial jQuery Mobile Panel Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari contoh,Tutup panel,contoh,panel display,contoh,panel Lokasi,contoh,contoh,
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>面板标题id</h2> <p>文本内容id</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
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.
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 |
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: