Plugin JavaScript Kotak Dialog
Plugin kotak dialog ini pada dasarnya hanyalah pengembangan sederhana dari konsep draggable element yang pernah Saya tuliskan sebelumnya. Kotak dialog ini hanya menggunakan JavaScript mentah, jadi tentu saja akan memiliki beberapa keterbatasan, diantaranya adalah:
- Tidak ada fitur resizable.
- Tidak ada efek animasi.
- Tidak bisa membuka beberapa kotak dialog sekaligus, hanya satu kotak dialog dengan isi dan ukuran yang berubah-ubah.
Untuk lebih jelasnya bisa dilihat di halaman demo:
Memasang Plugin
Untuk memasang plugin kotak dialog, Anda perlu menambahkan file CSS ini di atas kode </head>:
<link rel="stylesheet" href="../dialog-box.min.css"/>Kemudian tambahkan juga file JavaScript ini di atas </body>:
<script src="../dialog-box.min.js"></script>Aktivasi
Konsep dasar aktivasi ada dua, yaitu membuka kotak dialog dan menutup kotak dialog. Untuk membuka kotak dialog berdasarkan aksi klik pada tombol, jalankan fungsi setDialog dengan parameter open. Sedangkan untuk menutup kotak dialog, gunakan parameter close:
<a href='javascript:setDialog("open");'>Buka kotak dialog</a>
<a href='javascript:setDialog("close");'>Tutup kotak dialog</a>Daftar Konfigurasi Lengkap
Setelah Anda mengerti mengenai bagaimana caranya menampilkan dan menyembunyikan kotak dialog, selanjutnya Anda perlu mengetahui cara menyisipkan konten dan juga merekayasa tombol-tombol kotak dialog. Yang mana semua pengaturan itu akan dilakukan pada parameter ke dua, berupa objek seperti ini:
<a href='javascript:setDialog("open", { ... });'>Buka kotak dialog</a>| Opsi | Keterangan |
|---|---|
| title | Digunakan untuk menentukan judul kotak dialog. |
| content | Digunakan untuk menentukan konten kotak dialog. |
| width | Digunakan untuk menentukan lebar kotak dialog dalam piksel. |
| height | Digunakan untuk menentukan tinggi kotak dialog dalam piksel. |
| top | Digunakan untuk menentukan jarak atas kotak dialog terhadap layar. |
| left | Digunakan untuk menentukan jarak kiri kotak dialog terhadap layar. |
| specialClass | Digunakan untuk menambahkan kelas CSS khusus pada kotak dialog (untuk keperluan modifikasi penampilan). |
| fixed | Jika bernilai true, posisi kotak dialog akan melayang dan tidak akan terbawa gulungan layar. Jika bernilai false, posisi kotak dialog bisa terbawa gulungan layar. |
| overlay | Pilihan untuk menampilkan atau menyembunyikan tabir kotak dialog. |
| buttons | Adalah deret objek yang nantinya akan berubah menjadi daftar tombol baru (akan Saya jelaskan nanti). |
Konfigurasi secara keseluruhan:
setDialog("open", {
title: 'Judul kotak dialog',
content: 'Isi kotak dialog',
width: 300,
height: 150,
top: false,
left: false,
specialClass: "",
fixed: true,
overlay: false,
buttons: {}
});Contoh-Contoh Dasar
Kotak dialog dengan judul dan konten berupa kode HTML:
<a href='javascript:setDialog("open", {title: "Judul Dialog", content: "Konten dialog dan <strong>sedikit kode HTML</strong>"});'>Buka</a>Menyisipkan elemen <iframe>:
<a href='javascript:setDialog("open", {title: "Judul Dialog", content: "<iframe src="URL-IFRAME.html"></iframe>"});'>Buka</a>Catatan Penting: Mohon perhatikan mengenai penulisan tanda petik pada pengeksekusian fungsi secara langsung. Jika tanda petik yang digunakan pada atribut HTML adalah petik ganda, gunakan petik tunggal pada pengaturan fungsi setDialog, sebaliknya, jika tanda petik yang digunakan pada atribut HTML adalah petik tunggal, gunakan petik ganda pada pengaturan fungsi setDialog:
<a href="javascript:setDialog('open');">
^ ^ ^ ^
A B B A
<a href='javascript:setDialog("open");'>
^ ^ ^ ^
B A A BMengingat konten kotak dialog bisa berukuran sangat panjang, dan juga untuk mengatasi masalah penulisan tanda petik yang sangat rawan kesalahan seperti yang Saya jelaskan di atas, sebenarnya akan lebih baik jika eksekusi fungsi setDialog() dilakukan di luar elemen tersebut dengan cara menghubungkannya melalui ID atau kelas elemen HTML seperti ini:
<a id="dialog-link-1" href="#">Buka</a>
<script>
document.getElementById('dialog-link-1').onclick = function() {
setDialog("open", {
title: 'Judul Dialog',
content: 'Konten dialog super panjaaaaaaaaaaaaaaaannnnggggggg...!!!',
width: 600,
height: 300
});
return false;
};
</script>Pertama-tama nyatakan kode HTML untuk tombol pemicu kotak dialog dengan ID yang spesifik, setelah itu eksekusi fungsi setDialog dengan cara mengakses elemen melalui document.getElementById()
Anda juga bisa menyisipkan konten dari elemen lain:
<div id="foo" style="display:none;">
<h2>Lorem Ipsum Text</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam <strong>nonummy</strong> nibh euismod
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.</p>
</div><a id="dialog-link-2" href="#">Buka</a>
<script>
document.getElementById('dialog-link-2').onclick = function() {
setDialog("open", {
title: 'Judul Dialog',
content: document.getElementById('foo').innerHTML,
width: 600,
height: 300
});
return false;
};
</script>Rekayasa Tombol
Masing-masing tombol dapat dibuat melalui konfigurasi buttons dengan nilai berupa objek:
setDialog("open", {
title: 'Judul Kotak Dialog',
content: 'Konten kotak dialog.',
buttons: {
"Yes": function() {
alert("Tombol YES ditekan!");
},
"No": function() {
alert("Tombol NO ditekan!");
}
}
});Setiap key dari buttons akan mewakili nama/label tombol, dan fungsi yang mengikutinya akan tereksekusi ketika tombol tersebut ditekan:
Kode Sumber
Labels: JavaScript, Lanjutan
