jQuery UI Dialog dipakai untuk menangani hal-hal yang berafiliasi dengan komunikasi antarmuka antara aplikasi dengan pengguna. Karena mustahil jikalau sebuah aplikasi bisa berbicara dan menyarankan sesuatu untuk dilakukan oleh pengguna, kotak obrolan menjadi salah satu cara yang bisa dipakai untuk berkomunikasi.
Dasar Penggunaan
Buat sebuah elemen divisi sembarang, kemudian isi elemen tersebut dengan sesuatu. Seleksi elemen tersebut dengan jQuery, kemudian terapkan metode .dialog():
HTML
<div id="dialog"> Konten di sini... </div>jQuery UI
$('#dialog').dialog();Konfigurasi jQuery UI Dialog
| Opsi | Nilai | Deskripsi |
|---|---|---|
| title | "Judul Dialog" | Menentukan judul kotak dialog. |
| autoOpen | true | Jika bernilai true, maka kotak obrolan akan tampil pada dikala halaman pertama kali diakses. Jika bernilai false, kotak obrolan tidak akan tampil dikala halaman diakses hingga sebuah pemicu memerintahkan kotak obrolan tersebut untuk tampil. Pemicu biasanya berupa tombol atau suatu agresi (default: true) |
false | ||
| width | 100, 200, 300, … | Menentukan lebar kotak obrolan (default: 300) |
| height | 100, 200, 300, … | Menentukan tinggi kotak obrolan (default: "auto") |
| maxWidth | 100, 200, 300, … | Menentukan lebar maksimal kotak obrolan (default: false) |
| maxHeight | 100, 200, 300, … | Menentukan tinggi maksimal kotak obrolan (default: false) |
| minWidth | 100, 200, 300, … | Menentukan lebar minimal kotak obrolan (default: 150) |
| minHeight | 100, 200, 300, … | Menentukan tinggi minimal kotak obrolan (default: 150) |
| show | "fade", "slide", ... (efek jQuery UI) | Menentukan imbas khusus dikala kotak obrolan tampil (default: null) |
| hide | "fade", "slide", ... (efek jQuery UI) | Menentukan imbas khusus dikala kotak obrolan ditutup (default: null) |
| closeText | "close", "tutup", ... | Menentukan teks pada tombol epilog kotak obrolan di sebelah kanan atas. Secara umum tidak terlihat sebab opsi ini memang tidak terlalu penting. Bahkan, dalam tema jQuery UI, teks ini juga tidak akan ditampilkan:.ui-dialog-titlebar-close span {display:none}(default: "close") |
| modal | true | Pilihan untuk menampilkan tabir transparan dikala kotak obrolan muncul. (default: false) |
| false | ||
| draggable | true | Pilihan untuk memilih apakah kotak obrolan sanggup diseret (drag) atau tidak. (default: true) |
| false | ||
| resizable | true | Pilihan untuk memilih apakah kotak obrolan sanggup diubah ukurannya atau tidak. (default: true) |
| false | ||
| buttons | { | Menambahkan tombol di dalam kotak dialog. Bagian ini biasanya yang sedikit rumit, sebab selain menampilkan tombol, Anda juga harus bisa membuat tombol tersebut berfungsi sehingga kotak obrolan bisa hidup. |
Contoh Penerapan
autoOpen:false
Menentukan opsi autoOpen:false akan membuat kotak obrolan tidak muncul pada dikala pertama kali halaman diakses dan hanya akan muncul jikalau diperintah.
Kita buat sebuah elemen divisi sebagai kotak obrolan dan sebuah tombol sebagai pemicunya:
HTML
<div id="dialog"> Konten di sini... </div> <button id="open">Buka Dialog</button>jQuery UI
$('#dialog').dialog({ autoOpen: false }); $('#open').button({ icons: { primary: "ui-icon-folder-open" } }).click(function() { $('#dialog').dialog("open"); });.dialog("open") dan .dialog("close") yaitu metode yang dipakai untuk menampilkan dan menyembunyikan kotak dialog. Selain memakai opsi autoOpen:false, menghilangkan kotak obrolan juga bisa dilakukan dengan cara yang lebih sederhana yaitu dengan CSS atau dengan fungsi .hide():
#dialog {display:none}$('#dialog').hide();title:"Kotak Dialog", width:250, height:200
Menambahkan judul “Kotak Dialog” dan memilih lebar kotak obrolan sebesar 250 piksel dan tinggi kotak obrolan sebesar 200 piksel:
$('#dialog').dialog({ title: "Kotak Dialog", width: 250, height: 200 });show:"blind", hide:"puff"
Menciptakan imbas blind pada dikala kotak obrolan ditampilkan dan imbas puff pada dikala kotak obrolan ditutup:
HTML
<div id="dialog" style="display:none;"> Konten di sini... </div> <button id='open'>Buka Dialog</button>jQuery UI
$('#open').button({ icons: { primary: "ui-icon-folder-open" } }).click(function() { $('#dialog').dialog({ title: "Kotak Dialog", show: "blind", hide: "puff" }); });modal:true
Menentukan opsi modal:true akan membuat tabir di belakang kotak obrolan dikala kotak obrolan ditampilkan:
$('#dialog').dialog({ title: "Kotak Dialog", modal: true }); $('#open').button({ icons: { primary: "ui-icon-folder-open" } }).click(function() { $('#dialog').dialog("open"); });draggable:false, resizable:false
Menentukan opsi draggable:false dan resizable:false akan menonaktifkan fitur draggable dan resizable pada kotak dialog:
$('#dialog').dialog({ title: "Kotak Dialog", draggable: false, resizable: false });
Menghidupkan Kotak Dialog
Tombol dalam kotak obrolan dengan kemampuan untuk menjalankan perintah akan menghidupkan kotak obrolan dan tidak hanya sekedar berakhir sebagai kotak peringatan. Anda bisa membuat kotak obrolan yang sanggup memerintahkan elemen lain untuk melaksanakan sesuatu.
Pada dasarnya, opsi buttons sanggup dituliskan ibarat ini:
buttons: { "OK": function() { // Fungsi yang akan bekerja jikalau // tombol `OK` diklik dibentuk di sini... }, "Cancel": function() { // Fungsi yang akan bekerja jikalau // tombol `Cancel` diklik dibentuk di sini... } }Sebagai contoh, kita akan membuat dua buah tombol dalam kotak obrolan untuk mengendalikan elemen yang berada di luar kotak dialog:
HTML
<div id="dialog"></div> <div id="kotak">Kendalikan Saya!</div>CSS
#kotak { width:170px; height:200px; background:#4AB847; border:2px solid #369834; padding:10px; font-size:16px; font-weight:bold; color:white; cursor:pointer; }jQuery UI
$('#dialog').dialog({ title: "Tombol dalam Dialog", autoOpen: false, buttons: { "SlideUp": function() { $('#kotak').slideUp(1000); }, "SlideDown": function() { $('#kotak').slideDown(1000); } } }); // Tampilkan kotak obrolan dikala `#kotak` didekati pointer $('#kotak').mouseenter(function() { $('#dialog').dialog("open"); });Modal Konfirmasi
Sebenarnya cara kerjanya sangat sederhana. Saat sebuah tombol diklik, itu akan memicu sebuah fungsi untuk menampilkan kotak konfirmasi. Salah satu tombol di dalam kotak konfirmasi merupakan perintah gotong royong dari tombol yang diklik tadi. Sedangkan tombol yang Anda kira sebagai pemicu utama untuk menjalankan perintah gotong royong hanyalah tombol untuk menampilkan kotak obrolan konfirmasi:
HTML
<div class="separator"> <img class="item" alt="hal yang berafiliasi dengan komunikasi antarmuka antara aplikasi dengan pengguna Konfigurasi jQuery UI Dialog" src="my-image.jpg"> <button id="delete">Hapus Gambar!</button> </div> <div id="confirm-box"> <span class="ui-icon ui-icon-alert" style="float:left;margin:0 10px 50px 0;"></span>Apakah Anda yakin akan menghapus gambar ini? Hal ini tidak bisa dibatalkan dan gambar ini akan terhapus selamanya. </div>CSS
.separator { position:relative; float:left; } .separator button { position:absolute; top:10px; left:10px; }jQuery UI
$('#confirm-box').dialog({ modal: true, autoOpen: false, title: "Konfirmasi", buttons: { "Ya": function() { $('img.item').parent().hide("explode", { pieces: 36 }, 1000); $(this).dialog("close"); }, "Batal": function() { $(this).dialog("close"); } } }); // Tampilkan kotak obrolan konfirmasi dikala tombol hapus diklik $('#delete').button({ icons: { primary: "ui-icon-trash" } }).click(function() { $('#confirm-box').dialog("open"); });