Kotak dialog memiliki banyak jenis dan manfaat, kotak dialog pada umumnya banyak digunakan di aplikasi desktop, jenis kotak dialog biasanya terdiri dari kotak dialog OK yang hanya memuat tombol OK, kotak dialog OK dan Cancel yang memuat dua tombol OK dan Cancel, atau Kotak Dialog OK, Retry dan Cancel yang memuat tiga tombol OK, Retry dan Cancel.
Sebelum ditemukanya jquery, untuk membuat kotak dialog di aplikasi berbasis web sangat tidak mungkin maka dari itu dibuat dengan menggunakan javascript, kelemahannya adalah bentuknya yang tidak begitu menarik, namun sejak ada jquery untuk membuat kotak dialog merupakan hal yang sangat mungkin dan lebih mudah. Nah pada contoh kali ini akan dibuat kotak dialog konfirmasi proses hapus data, untuk jelasnya perhatikan gambar dibawah ini :
Pada gambar diatas apabila kita meng-klik link hapus maka akan langsung terhapus tanpa ada konfirmasi apakah akan jadi dihapus atau membatalkannya apabila kita tidak menggunakan jquery, namun apabila kita modifikasi script dengan menambahkan jquery dalam hal ini jquery UI dialog maka ketika akan dihapus akan ditampilkan kotak dialog seperti berikut :
Dari kotak dialog tersebut ketika anda klik tombol Confirm maka data akan dihapus dan apabila anda klik tombol cancel maka data tidak jadi dihapus. Dengan teknik ini maka ketidak sengajaan menghapus data bisa dihindari, adapun cara membuatnya adalah :
1. Download jquery UI
2. Load css dan script jquery yang dibutuhkan
3. buat script jquery seperti berikut :
4. Buat link dengan tag href beri nama class confirm (sesuaikan dengan baris 30 pada gambar diatas), kemudian buat parameter pesan, jika dikosongkan maka akan menjalankan pesan default pada baris ke-19 pada gambar diatas, dan arahkan ke file yang dituju dalam contoh ini ke file hapus.php sehingga bentuk link nya akan seperti berikut :
Untuk lebih jelasnya silahkan download contoh scriptnya
Post a Comment