Silahkan klik pada Show/Hide di bawah ini untuk melihat bagaimana show hide content yang dibuat menggunakan jQuery bekerja.
Menggunakan jQuery sebagai salah satu komponen javascript pendukung kinerja blog memang terasa sangat luar biasa. jQuery tak hanya bisa digunakan untuk satu fungsi saja. Berbagai fungsi lain dengan mudah dapat ditambahkan dan tak selalu harus dengan menambahkan lagi javascript yang kompleks atau berderet-deret memanjang. Beberapa bahkan bisa dibuat dengan tambahan satu deret script saja. Kondisi seperti ini tentu saja memberi keuntungan luar biasa bagi blogger karena setelah jQuery dilibatkan dalam template maka penggunaan javascript untuk berbagai fungsi dan kegunaan lain bisa diminimalisir hingga beban blog juga tak terlalu tertambahi. Menggunakan jQuery juga memberi keleluasaan untuk membuat desain-desain baru dengan gerak animatif tanpa perlu kode bertumpuk. Salah satu diantaranya adalah show hide content yang berfungsi menyembunyikan "sesuatu elemen posting atau elemen blog lain" dalam sebuah tag div. Dengan sebuah control yang sangat sederhana elemen tersembunyi dapat diperlihatkan (ditampilkan) dan kemudian disembunyikan lagi disertai efek show hide yang terlihat dinamis.
Untuk membuat show hide conten gunakan javascript, kode CSS dan xHTMl seperti berikut:
Ini adalah sebuah contoh bagaimana show hide content bekerja. Anda bisa melihat betapa sekalipun javascript yang digunakan hanya beberapa gelintir saja, namun efek yang dihasilkan sungguh terasa sangat luar biasa. Hal-hal kecil seperti ini pastilah akan sangat menarik untuk digunakan dalam blog. Gunakanlah javascript ini bersama jQuery.1.3.2.min.js atau yang lebih baru seperti jQuery.1.7.1.js, jQuery.1.4.2.js atau jQuery.1.6.1.js. Jika blog anda selama ini sudah menggunakan salah satu dari jQuery tersebut, maka anda hanya perlu menambah javascript di bawah ini untuk membuat show hide content.
$(document).ready(function(){
$(".GRshowhidebox").hide();
$(".GR_showhide").show();
$('.GR_showhide').click(function(){
$(".GRshowhidebox").slideToggle(500);
});
});Untuk membuat show hide conten gunakan javascript, kode CSS dan xHTMl seperti berikut:
jQuery - Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".GRshowhidebox").hide();
$(".GR_showhide").show();
$('.GR_showhide').click(function(){
$(".GRshowhidebox").slideToggle();
});
});
</script>Kode CSS:
.GRshowhidebox{
width:400px;
max-height:500px;
background:#bbb;
padding:15px 10px;
margin:10px 0;
border-bottom:5px double #333;
}
.GR_showhide{
display:none;
}xHTML:
<a href="#" class="GR_showhide">Show/hide</a><br /><div class="GRshowhidebox"> Letakkan di sini konten yang akan disembunyikan! </div>
- Letakkan dan simpan jQuery dan Javascript di bawah tag <head>
- Letakkan dan simpan Kode CSS di atas kode ]]></b:skin>
- Gunakan xHTML di dalam boks posting atau dibagian yang lain blog.
0 comments:
Post a Comment