Plugin kotak obrolan ini intinya hanyalah pengembangan sederhana dari konsep draggable element yang pernah Saya tuliskan sebelumnya. Kotak obrolan ini hanya memakai JavaScript mentah, jadi tentu saja akan mempunyai beberapa keterbatasan, diantaranya adalah:
- Tidak ada fitur resizable.
- Tidak ada pengaruh animasi.
- Tidak sanggup membuka beberapa kotak obrolan sekaligus, hanya satu kotak obrolan dengan isi dan ukuran yang berubah-ubah.
Untuk lebih jelasnya sanggup dilihat di halaman demo:
Memasang Plugin
Untuk memasang plugin kotak dialog, Anda perlu menambahkan file CSS ini di atas isyarat </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 obrolan dan menutup kotak dialog. Untuk membuka kotak obrolan menurut agresi 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 menyerupai ini:
<a href='javascript:setDialog("open", { ... });'>Buka kotak dialog</a>| Opsi | Keterangan |
|---|---|
| title | Digunakan untuk memilih judul kotak dialog. |
| content | Digunakan untuk memilih konten kotak dialog. |
| width | Digunakan untuk memilih lebar kotak obrolan dalam piksel. |
| height | Digunakan untuk memilih tinggi kotak obrolan dalam piksel. |
| top | Digunakan untuk memilih jarak atas kotak obrolan terhadap layar. |
| left | Digunakan untuk memilih jarak kiri kotak obrolan terhadap layar. |
| specialClass | Digunakan untuk menambahkan kelas CSS khusus pada kotak obrolan (untuk keperluan modifikasi penampilan). |
| fixed | Jika bernilai true, posisi kotak obrolan akan melayang dan tidak akan terbawa gulungan layar. Jika bernilai false, posisi kotak obrolan sanggup terbawa gulungan layar. |
| overlay | Pilihan untuk menampilkan atau menyembunyikan tabir kotak dialog. |
| buttons | Adalah deret objek yang nantinya akan bermetamorfosis daftar tombol gres (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 obrolan dengan judul dan konten berupa isyarat HTML:
<a href='javascript:setDialog("open", {title: "Judul Dialog", content: "Konten obrolan dan <strong>sedikit isyarat 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 dipakai pada atribut HTML yaitu petik ganda, gunakan petik tunggal pada pengaturan fungsi setDialog, sebaliknya, kalau tanda petik yang dipakai pada atribut HTML yaitu 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 obrolan sanggup berukuran sangat panjang, dan juga untuk mengatasi problem penulisan tanda petik yang sangat rawan kesalahan menyerupai yang Saya jelaskan di atas, bantu-membantu akan lebih baik kalau sanksi fungsi setDialog() dilakukan di luar elemen tersebut dengan cara menghubungkannya melalui ID atau kelas elemen HTML menyerupai ini:
<a id="dialog-link-1" href="#">Buka</a> <script> document.getElementById('dialog-link-1').onclick = function() { setDialog("open", { title: 'Judul Dialog', content: 'Konten obrolan super panjaaaaaaaaaaaaaaaannnnggggggg...!!!', width: 600, height: 300 }); return false; }; </script>Pertama-tama nyatakan isyarat HTML untuk tombol pemicu kotak obrolan dengan ID yang spesifik, sesudah itu sanksi fungsi setDialog dengan cara mengakses elemen melalui document.getElementById()
Anda juga sanggup 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 membisu <strong>nonummy</strong> nibh euismod magna aliquam dekat 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 sanggup dibentuk 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 saat tombol tersebut ditekan: