Suatu ketika Saya pernah mendapati seorang pendatang yang mengunjungi blog Saya dari kata kunci yang kurang lebihnya ibarat ini:
membuat jquery ui obrolan di blogspot
Tidak. Jangan pernah melaksanakan itu. Itu pemborosan! Menerapkan jQuery UI Dialog di dalam blog Saya sebut sebagai pemborosan alasannya yaitu jQuery UI tidak hanya sebatas untuk membuat kotak obrolan saja. Bagi Saya, jQuery UI cakupannya terlalu besar jikalau hanya diterapkan untuk sebuah blog. Apalagi jikalau itu difungsikan untuk membuat kotak obrolan saja. Alternatifnya adalah, cukup dengan membuat sebuah kerangka kotak obrolan dengan arahan HTML dan CSS, kemudian atur kemunculannya dengan jQuery yang umum digunakan ibarat .show(), .slideDown() dan .fadeIn():
Kerangka dan Konten
Pada pola di atas Saya menerapkan kotak obrolan sebagai formulir login, tapi itu tidak mutlak. Anda sanggup memakai kotak obrolan ini untuk apa saja, selama Anda tahu bagaimana cara menerapkan elemen pemicu pada daerah yang sempurna untuk membuka kotak dialog. Elemen pemicu Saya buat berupa class="open-dialog". Kelas ini sanggup diterapkan pada tombol atau link untuk memicu kemunculan kotak dialog:
<button class='open-dialog'>Buka Dialog</button><a class='open-dialog' href='#'>Buka Dialog</a>Kerangka obrolan terdiri dari sebuah elemen induk #kotak-dialog, elemen <h3> sebagai judul, overlay sebagai tabir hitam dan beberapa tombol sebagai pemicu agresi lain:
HTML
<!-- START DIALOG BOX --> <div id='kotak-dialog'> <h3 class='title'>Kotak Dialog<a href='#' class='close'>×</a></h3> <div class='isi-dialog'> Apakah Anda yakin dan tetap ingin melaksanakan ini? <div class='button-wrapper'> <button class='okeh'>OK</button> <button class='close'>Cancel</button> </div> </div> </div> <!-- end kotak-dialog --> <div id='dialog-overlay'></div> <!-- END DIALOG BOX -->CSS
#kotak-dialog { position:absolute; top:20%; left:50%; margin:0px 0px 0px -200px; width:400px; height:auto; background-color:#fff; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); z-index:1000; display:none; } #kotak-dialog *:focus { outline:none; } #kotak-dialog h3.title { background-color:#3B5998; padding:10px 15px; color:#fff; font:normal 16px Arial,Sans-Serif; margin:0px 0px 0px 0px; position:relative; } #kotak-dialog h3.title a { position:absolute; top:10px; right:15px; color:#fff; text-decoration:none; cursor:pointer; } #kotak-dialog .isi-dialog { margin:15px; font:normal 12px Arial,Sans-Serif; } #kotak-dialog .button-wrapper { padding:10px 15px 0px; border-top:1px solid #ddd; margin-top:15px; } #kotak-dialog .button-wrapper button { background-color:#FF0C39; border:none; font:bold 12px Arial,Sans-Serif; color:#fff; padding:5px 10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; } #kotak-dialog .button-wrapper button:hover { background-color:#aaa; } #dialog-overlay { position:fixed !important; position:absolute; z-index:999; top:0px; right:0px; bottom:0px; left:0px; background-color:#000; display:none; }jQuery
$(function() { //Tampilkan kotak obrolan ketika .open-dialog diklik $('.open-dialog').click(function() { $('#kotak-dialog').show(); $('#dialog-overlay').fadeTo("normal", 0.4); return false; }); //Tutup kotak obrolan ketika .close diklik $('#kotak-dialog .close').click(function() { $('#kotak-dialog').fadeOut(); $('#dialog-overlay').hide(); return false; }); //Aksi utama dituliskan di sini, ketika tombol OK diklik $('#kotak-dialog .okeh').click(function() { alert("Hapus alert box ini kemudian ganti dengan fungsi tertentu."); }); });Jangan lupa juga untuk memuat library jQuery sebelum menerapkan arahan di atas, jikalau tidak, arahan di atas tidak akan pernah bekerja (pelajari wacana jQuery di sini).
Semoga cara singkat ini sanggup lebih menghemat baris arahan sehingga tidak akan memperberat proses pemuatan halaman blog Anda.
Sumber https://www.dte.web.id/