AntiVirus
Pada artikel sebelumnya AnakGmBlog membahas artikel tentang "Tampilkan Sembunyikan Isi dan Form Komentar".
Pada artikel kali ini merupakan penjelasan script jQuery yang digunakan
pada artikel tersebut. Bertahap untuk memahami fungsi-fungsi jQuery
dengan memahami script-script sederhana. Mohon ma'af untuk para master
jQuery, silahkan tinggalkan artikel ini jika dianggap tidak bermanfaat.
Script jQuery Show Hide sebenarnya pernah dibahas dan disertakan pada
beberapa tips trik jQuery, namun demikian tidak ada salahnya kita ungkap
kembali mengenai penggunakan script tersebut, serta di tambahkan
peranan Cookie dalam mengatur perilaku pengunjung pada terhadap tombol
yang tersimpan pada Cookie browser.
Pada
artikel kali ini kita akan menggunakan efek jQuery sederhana yaitu efek
show, efek hide dan efek slide serta akan melibatkan sebuah plugin
jQuery Cookie yang dibuat oleh Klaus Hartl (https://github.com/carhartl)
yaitu sebuah plugin jQuery sederhana yang digunakan untuk membaca,
menulis dan menghapus cookie dari browser.
Skenario HTML
Dibawah ini adalah kode HTML yang digunakan:<b:includable id='comments' var='post'> <div class='comments' id='comments'> <!-- Berisi Kode Komentar dan Form Komentar --> </div> <button class='tombol black' id='bukakeun'>Click here for comment</button> <button class='tombol black' id='tutupkeun'>Click here for close</button> </b:includable>
Keterangan Skenario HTML:
<div class='comments' id='comments'> <!-- Berisi Kode Komentar dan Form Komentar --> </div>Kode diatas menggambarkan suatu kotak komentar yang memiliki identitas atau ID comments (id='comments'). comments ini berisi form komentar dan isi komentar yang akan ditampilkan (show) dan disembunyikan (hide) dengan menggunakan tombol yang telah disiapkan dibawahnya.
<button class='tombol black' id='bukakeun'>Click here for comment</button> <button class='tombol black' id='tutupkeun'>Click here for close</button>Tombol yang akan digunakan terdiri dari 2 tombol yaitu tombol dengan ID bukakeun (id='bukakeun') dan tombol dengan ID tutupkeun (id='tutupkeun'). Kedua tombol ini akan ditampilkan secara bergantian sesuai dengan keadaan cookie.
Skenario jQuery
Dibawah ini adalah kode jQuery yang digunakan:<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
jQuery('#bukakeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({display: 'none'});
jQuery('#tutupkeun').show();
jQuery.cookie('komen', 1);
return false
});
jQuery('#tutupkeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({display: 'none'});
jQuery('#bukakeun').show();
jQuery.cookie('komen', null);
return false
});
if (jQuery.cookie('komen') == 1) {
jQuery('#comments').show();
jQuery('#bukakeun').hide()
} else {
jQuery('#comments').hide();
jQuery('#tutupkeun').hide()
}
});
//]]></script>
Keterangan Skenario jQuery
Script ini digunakan untuk memanggil (load) framework jQuery, jika anda pernah memasang sebelumnya pada template maka script dibawah ini tidak perlu diikutsertakan. (Baca artikel Perpustakaan jQuery pada Blogger).
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>Script dibawah ini digunakan untuk memanggil (load) plugin jQuery Cookie yang berfungsi untuk membaca, menulis dan menghapus cookie.
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>Script ini untuk pendeklarasian bahwa kode setelah baris ini adalah fungsi JavaScript
<script type='text/javascript'>//<![CDATA[Script ini untuk pendeklarasian bahwa kode setelah baris ini adalah fungsi jQuery
jQuery(document).ready(function () {
Jika tombol dengan id bukakeun (id='bukakeun') di klik maka fungsi dimulai...jQuery('#bukakeun').click(function () {
Wadah (container) dengan id comments (id='comments') akan terbuka dengan efek slideToggle berdurasi lambatjQuery('#comments').slideToggle('slow');
Tombol dengan id bukakeun (id='bukakeun') akan disembunyikanjQuery(this).css({display: 'none'});
Tombol dengan id tutupkeun (id='tutupkeun') akan ditampilkanjQuery('#tutupkeun').show();
Plugin jQuery Cookie akan menuliskan cookie dengan nama 'komen'
dengan nilai 1 pada browser menandakan bahwa kita melakukan klik pada
tombol dengan id bukakeun (id='bukakeun')jQuery.cookie('komen', 1);
Fungsi akan diulang jika mengalami kegagalan loadreturn falseFungsi tombol dengan id bukakeun (id='bukakeun') ditutup
});Keterangan : Sampai script diatas maka browser akan selalu menyimpan cookie dengan nama komen hingga waktu tidak tentu. Selama cookie pada browser dengan nama komen tersimpan maka isi komentar dan form komentar akan selalu terbuka walaupun pengunjung menutup browser atau berpindah halaman.
Jika tombol dengan id tutupkeun (id='tutupkeun') di klik maka fungsi dimulai...
jQuery('#tutupkeun').click(function () {
Wadah (container) dengan id comments (id='comments') akan tertutup dengan efek slideToggle berdurasi lambatjQuery('#comments').slideToggle('slow');
Tombol dengan id tutupkeun (id='tutupkeun') akan disembunyikanjQuery(this).css({display: 'none'});
Tombol dengan id bukakeun (id='bukakeun') akan ditampilkanjQuery('#bukakeun').show();
Plugin jQuery Cookie akan menghapus cookie dengan nama 'komen'
dengan nilai null (kosong) pada browser menandakan bahwa kita melakukan
klik pada tombol dengan id tutupkeun (id='tutupkeun')jQuery.cookie('komen', null);
Fungsi akan diulang jika mengalami kegagalan loadreturn falseFungsi tombol dengan id tutupkeun (id='tutupkeun') ditutup
});Keterangan : Sampai script diatas maka browser sudah menghapus cookie dengan nama komen hingga waktu tidak tentu. Jika cookie pada browser dengan nama komen sudah dihapus maka isi komentar dan form komentar akan selalu tertutup walaupun pengunjung menutup browser atau berpindah halaman.
Kumpulan script dibawah ini digunakan untuk memeriksa keberadaan cookie pada Browser, apakah tersedia atau tidak.
Jika jQuery Cookie menemukan cookie pada browser dengan nama komen dan tersedia maka...
if (jQuery.cookie('komen') == 1) {
Wadah (container) dengan id comments (id='comments') akan terbuka dan...jQuery('#comments').show();
Tombol dengan id bukakeun (id='bukakeun') akan disembunyikanjQuery('#bukakeun').hide()
Jika browser tidak memiliki cookie dengan nama komen maka...} else {
Wadah (container) dengan id comments (id='comments') akan tertutup dan...jQuery('#comments').hide();
Tombol dengan id tutupkeun (id='tutupkeun') akan disembunyikanjQuery('#tutupkeun').hide()
Fungsi periksa cookie ditutup}Pendeklarasian fungsi jQuery di tutup
});Pendeklarasian fungsi JavaScript di tutup
//]]></script>Mudah-mudahan artikel diatas bermanfaat dan silahkan dikembangkan sesuai dengan imajinasi anda. Happy Blogging... :)
Catatan kaki:
18.45 | 0
komentar | Read More
