jQuery Mobile pop
Adalah popup dialog pop sangat populer dapat overlay pada tampilan halaman.
Pop-up dapat digunakan untuk menampilkan teks, gambar, peta, atau konten lainnya.
Buat pop, dan kebutuhan untuk menggunakan <a> <div> elemen. Menambahkan data-rel = "popup" properti pada elemen <a>, <div> elemen untuk menambahkan data-role = "popup" atribut. Kemudian kita tentukan id untuk <div>, dan kemudian menetapkan href nilai <a> <div> id ditentukan. <Div> konten adalah tampilan pop konten.
Catatan: <div> pop dan klik <a> link harus berada di halaman yang sama.
contoh
<Div Data-role = "popup " id = "myPopup">
<P> Ini adalah pop sederhana </ p>
</ Div>
Coba »
Jika Anda perlu menambahkan padding untuk luar dan dari pop dapat menambahkan "ui-konten" kategori dalam <div> di:
Tutup popup
Secara default, klik pop luar daerah atau tekan "Esc" untuk menutup pop. Jika Anda tidak ingin memanfaatkan daerah luar pop Tutup popup dapat menambahkan data-Dihapus = "false" atribut di tambah (tidak disarankan). Anda juga dapat menambahkan tombol Close pada pop, menggunakan data-rel = tombol "back" di properti, dan melalui gaya untuk mengontrol posisi tombol.
| deskripsi | contoh |
|---|---|
| Tutup tombol di sisi kanan | mencoba |
| Tutup tombol di sebelah kiri | mencoba |
| Menggunakan properti Data-Dihapus | mencoba |
positioning pop
Secara default, popup akan langsung muncul di atas klik pada elemen, jika Anda perlu untuk mengontrol posisi pop, Anda dapat menggunakan data-posisi-atribut untuk membuka klik pop pada link.
Mengontrol lokasi pop dalam tiga cara:
| Nilai properti | deskripsi |
|---|---|
| Data-posisi-to = "jendela" | Popup ditampilkan di pusat window |
| Data-posisi-to = "# myId" | Popup ditampilkan pada unsur yang dikenal #ID |
| Data-posisi-to = "asal" | Default. Klik pada elemen layar pop. |
contoh
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo"> id = " demo" </a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin"> Asal </a>
Coba »
transisi
Secara default, pop ada efek transisi. Jika Anda mau, Anda bisa menambahkan efek transisi (melalui data transisi = "value" atribut jQuery Mobile Transition ):
Semua contoh efek transisi
Coba »
arah pop perbatasan kecil
Jika Anda perlu menambahkan arah pop kecil perbatasan, Anda dapat menggunakan properti Data-panah dan menentukan nilai "l" (kiri), "t" (top), "r" (di sebelah kanan) atau "b" (bottom):
contoh
<Div Data-role = "popup " id = "myPopup" class = "ui-konten" Data-panah = "l">
<P> meninggalkan arah perbatasan. </ P>
</ Div>
Coba »
dialog pop
Anda dapat pop diproduksi sebagai kotak standar dialog (kepala, dan isi tanda bawah):
contoh
<Div Data-role = "popup" id = "myPopupDialog">
<Div Data-role = "header"> <h1> sundulan teks .. </ h1> </ div>
<Div Data-role = kelas "main" = "ui-content"> <p> Beberapa teks .. </ p> <a href="#"> Link .. </a>
<Div Data-role = "footer"> <h1> di bagian bawah teks .. </ h1> </ div>
</ Div>
Coba »
gambar pop
Anda dapat menampilkan gambar dalam pop:contoh
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<Div Data-role = "popup" id = "myPopup">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Coba »
penutup pop latar belakang
Anda dapat menggunakan properti Data-overlay-tema setelah pop menambahkan warna latar belakang.
Secara default, meliputi warna latar belakang transparan. Menggunakan data-overlay-tema = "a" untuk menambahkan latar belakang cahaya, penggunaan data overlay-tema = "b" menambahkan penutup gelap latar belakang:
contoh
<Div Data-role = "popup " id = "myPopup" Data-overlay-tema = "b">
<P> Di belakang saya ada latar belakang gelap. </ P>
</ Div>
Coba »
General popup gambar latar belakang sering overlay:
contoh
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<Div Data-role = "popup " id = "myPopup" Data-overlay-tema = "b">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Coba »
Catatan: Dalam bab berikutnya, Anda akan belajar bagaimana menggunakan bentuk-bentuk di pop.