jQuery Mobile Popup
Popup mirip dengan dialog, dalam bahwa mereka berdua overlay bagian dari halaman. Sebuah kotak popup dapat berguna ketika Anda ingin menampilkan teks kecil, foto, peta atau konten lainnya.
Untuk membuat popup, mulai dengan <a> elemen dan <div> elemen. Tambahkan data-rel="popup" atribut untuk <a> , dan data-role="popup" atribut untuk <div> . Kemudian menentukan id untuk <div> , dan mengatur href dari <a> untuk mencocokkan id tertentu. Konten dalam <div> adalah konten yang sebenarnya yang akan muncul ketika pengguna mengklik pada link.
Catatan: popup The <div> harus berada dalam halaman yang sama sebagai link.
Contoh
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> Cobalah sendiri " Jika Anda ingin beberapa padding ekstra dan margin dalam kotak popup Anda, tambahkan "ui-content" kelas untuk <div> :
menutup Popup
Secara default, popup dapat ditutup baik dengan mengklik di luar kotak popup atau dengan menekan "Esc" kunci. Jika Anda tidak ingin popup menjadi closable dengan mengklik di luar kotak, Anda dapat menambahkan data-dismissible="false" atribut popup (tidak benar-benar direkomendasikan). Anda juga dapat menambahkan tombol dekat dengan popup, ditempatkan baik kanan atau kiri. Untuk melakukannya, tambahkan tombol link dengan data-rel="back" atribut ke dalam wadah popup, dan posisi tombol dengan CSS kelas.
| Deskripsi | Contoh |
|---|---|
| tombol tutup tepat | Cobalah |
| tombol tutup kiri | Cobalah |
| Popup Undismissible | Cobalah |
positioning Popup
Secara default, popup akan muncul langsung di atas elemen diklik. Untuk mengontrol posisi popup, menggunakan data-posisi-atribut pada link yang digunakan untuk membuka popup.
Ada tiga cara untuk memposisikan popup:
| nilai atribut | Deskripsi |
|---|---|
| data-position-to="window" | Popup akan muncul berpusat di dalam jendela |
| data-position-to="#myId" | Popup diposisikan lebih elemen dengan #ID ditentukan |
| data-position-to="origin" | Default. Popup diposisikan langsung di atas elemen diklik |
Contoh
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<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" >Origin</a> Cobalah sendiri " transisi
Secara default, popup tidak memiliki efek transisi ditambahkan ke mereka. Anda dapat menggunakan salah satu dari efek yang kita diperkenalkan pada "Transisi" bab. Hanya menerapkan data-transisi = "value" atribut untuk link yang membuka popup:
Sebuah demonstrasi semua efek transisi yang tersedia
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Cobalah sendiri " Arrows popup
Untuk menambahkan panah ke perbatasan popup, gunakan atribut data panah, dan menentukan nilai "l" (left), "t" (top), "r" (right) atau "b" (bottom) :
Contoh
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> Cobalah sendiri " popup Dialog
Anda dapat menambahkan markup dialog standar menjadi popup (header, konten dan footer markup):
Contoh
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> Cobalah sendiri " popup Foto
Anda juga dapat menampilkan gambar dalam popup:
Contoh
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Cobalah sendiri " Catatan: Popup tidak ideal ketika Anda memiliki seluruh rangkaian gambar yang ingin ditampilkan (seperti album dengan 500 gambar). Namun, untuk beberapa gambar yang perlu dilihat lebih besar - mereka sempurna.
popup Overlay
Anda dapat mengontrol warna latar belakang di balik popup (halaman itu sendiri) dengan data-overlay-theme atribut.
Secara default overlay transparan. Gunakan data-overlay-theme="a" untuk menambahkan overlay cahaya dan data-overlay-tema = "b" untuk menambahkan overlay gelap:
Contoh
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> Cobalah sendiri " Efek overlay sering digunakan pada foto popup:
Contoh
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Cobalah sendiri " Catatan: Anda juga akan belajar bagaimana menggunakan popup dalam bentuk dan tampilan daftar di bab berikutnya.