Selamat berjumpa kembali saudara-saudara… 😎
Terakhir saya bahas tentang jQuery Mobile adalah pada bulan Juli, sudah berapa bulan ya? Kali ini kita lanjutkan bahasannya sesuai judul di atas. Menampilkan listview di dalam popup window adalah gabungan materi yang sudah kita bahas sebelumnya.
Oke, langsung saja, silakan buka dulu tulisan ini:
Jika Anda sudah pernah mencoba latihan dari tulisan di atas, langsung buka saja file jqm_popup.html karena kita akan gunakan kode utamanya dari file tersebut. Jika belum pernah dicoba, sebaiknya praktekkan dulu latihannya. Baiklah, saya anggap Anda sudah punya file jqm_popup.html ya…Â Lanjut, lakukan save-as file tersebut menjadi jqm_popup_listview.html. Ingat ya, di save-as, jangan langsung gunakan file jqm_popup.html.
Terus, ubah kode di dalamnya, pertama bagian headernya menjadi seperti ini.
<header data-role="header"> <h1>Popup + ListView</h1> </header>
Belum , selesai. bagian kedua, ubah lagi kode pada bagian footernya sehingga menjadi seperti berikut.
<footer data-role="footer" data-position="fixed"> <h2>BangHaji DotCom</h2> </footer>
Ketiga ubah bagian content menjadi:
<div data-role="content"> <p>Latihan jQuery Mobile menampilkan popup berisi daftar pilihan dalam bentuk listview. Coba klik link di bawah.</p> <p><a href="#myPopup" data-rel="popup">Buka Popup</a></p> </div>
Sudah ya… Silakan simpan dulu.
Selanjutnya buka tulisan berikut ini untuk melihat seperti apa contoh bagaimana cara menampilkan listview.