Tampilkan dan Sembunyikan Gadget dengan jQuery ~ Belajar Blog

Tutorial kali ini lebih ke pemahaman script jQuery karena kita akan menjabarkan script sederhana untuk menampilkan dan menyembunyikan suatu gadget. Tutorial ini digunakan Blogger Tune-Up untuk menampilkan dan menyembunyikan gadget "Arsip", silahkan anda klik menu "Arsip" maka gadget "Arsip" akan ditampilkan dan jika kita klik lagi menu "Arsip" maka gadget akan disembunyikan. Script untuk membuat efek ini tidaklah rumit, bahkan sangat sederhana. Penasaran?

Skenario Pembuatan Efek Tampil Sembunyi (Show Hide) dengan jQuery

Langkah 1

Kita buat suatu wadah/container dengan tag <div>...</div> pada kode HTML seperti dibawah ini:

<div>Isi yang akan ditampilkan dan disembunyikan</div>

Langkah 2

Tetapi jika hanya menggunakan tag <div>...</div> maka tampilan wadah/container kurang menarik dan sulit untuk diidentifikasi jika kemudian hari kita ingin mengganti atau memperbaikinya. Untuk itu kita perlu melibatkan CSS untuk memperbaiki tampilan agar tampak indah. Contoh style suatu gadget wadah/cointainer dengan CSS seperti dibawah ini:

#keranjang{
clear:both;
border:1px solid #585858;
width:800px;
margin:10px 0 10px 40px;
padding:20px 20px 20px 20px;
background-color:#000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}

Maka akan dihasilkan suatu wadah seperti illustarsi gambar dibawah ini:

Langkah 3

Setelah style wadah/container sudah siap, maka kita integrasikan (jadikan satu) antara kode HTML dengan kode CSS seperti berikut dibawah ini:

<div id="keranjang">Isi yang akan ditampilkan dan disembunyikan</div>

Berikutnya disebut wadah/container "keranjang"

Langkah 4

Setelah meng-integrasikan antara kode HTML dengan kode CSS, maka kita akan membuat suatu link yang berfungsi untuk mengatur (menampilkan atau menyembunyikan) wadah/container "keranjang", dengan contoh seperti dibawah ini:

<a id="tombol" href="#">Klik Disini</a>

Kode diatas adalah kode tag anchor^[1] yang pernah dibahas pada artikel sebelumnya dengan penambahan tag ID untuk memberi identitas pada link achor tersebut agar lebih spesifik sehingga tidak tertukar dengan link anchor yang lainnya.

Langkah 5

Dari Langkah 1 sampai Langkah 4 kita sudah dapat mengambil alur cerita atau skenario yang akan kita jabarkan dalam kode jQuery. Seperti; Pada saat halaman dipanggil (load) maka wadah/container "keranjang" akan langsung disembunyikan. Ketika kita klik link "Klik Disini" (Langkah 4) maka wadah/kontainer "keranjang" akan ditampilkan, dan ketika di klik link "Klik Disini" lagi maka wadah/container "keranjang" akan disembunyikan.

Jika kita sudah paham skenario-nya maka kontainer ini siap untuk dipengaruhi (ditampilkan atau disembunyikan) oleh kode jQuery dengan script kode seperti dibawah ini:

$(document).ready(function(){
$('#keranjang').hide();
$('a#tombol').click(function() {
$('#keranjang').toggle(400);
return false;
});
});

Jika kita baca script kode jQuery-nya adalah sebagai berikut:

Baris 1 $(document).ready(function(){ : Ini merupakan aturan baku untuk mendeklarasikan bahwa ini adalah fungsi jQuery;
Baris 2 $('#keranjang').hide(); : Pada saat halaman dipanggil (load) maka container/wadah (lihat Langkah 3) akan langsung disembunyikan (tidak ditampilkan), kode #keranjang digunakan untuk memanggil id="keranjang";
Baris 3 $('a#tombol').click(function() { : Kode ini digunakan untuk menjelaskan bahwa ketika anchor link dengan identitas "tombol" (lihat Langkah 4) di klik maka;
Baris 4 $('#keranjang').toggle(400); : wadah/container dengan id="keranjang" (Langkah 3) akan ditampilkan dengan kecepatan 400 milidetik, kita bisa saja mengganti nilai 400 sesuai keinginan kita atau dengan kata "slow" dan atau "fast" (tanda kutip diikutsertakan);
Baris 5 return false; : Jika ternyata pemanggilan kode jQuery tidak sesuai urutan (Baris 2 sampai Baris 4) maka fungsi akan dikembalikan (diulangi dari awal), sehingga wadah/container "keranjang" akan disembunyikan lagi. Sama artinya jika ternyata kode di panggil dari baris 3 yaitu $('a#tombol').click(function() { atau sama dengan link dengan ID tombol diklik lagi maka container/wadah "keranjang" akan disembunyikan.
Baris 6 dan 7 adalah kode penutup fungsi.

Bagaimana mudah bukan? Tetapi ingat, ikuti aturan-aturan penerapan tag kode pada template blog. (Baca Keterangan)

Skenario CSS (Cascading Style Sheet)

Lihat Langkah 2! Kode CSS haruslah diapit atau berada diantara tag seperti dibawah ini:

<b:skin><![CDATA[
....
....
]]></b:skin>

atau kode seperti dibawah ini:

<style>
....
....
</style>

sehingga kode pada Langkah 2 menjadi seperti dibawah ini:

<b:skin><![CDATA[
#keranjang{
clear:both;
border:1px solid #585858;
width:800px;
margin:10px 0 10px 40px;
padding:20px 20px 20px 20px;
background-color:#000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
]]></b:skin>

Skenario HTML

Lihat Langkah 3 dan Langkah 4! Kode wadah/container harus diapit atau berada diantara tag seperti dibawah ini:

<body>
....
....
</body>

Sehingga kode secara keseluruhan menjadi seperti dibawah ini:

<body>
<a id="tombol" href="#">Klik Disini</a>

<div id="keranjang">Isi yang akan ditampilkan dan disembunyikan</div>
</body>

Skenario jQuery

Agar kode-kode jQuery dapat berjalan baik maka framework jQuery haruslah terpasang pada template/halaman blog kita seperti dibawah ini:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>

Lihat Langkah 5! Kode jQuery harus di apit atau berada diantara tag seperti dibawah ini:

<script type='text/javascript'>
....
....
</script>

Sehingga kode secara keseluruhan menjadi seperti dibawah ini:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#keranjang').hide();
$('a#tombol').click(function() {
$('#keranjang').toggle(400);
return false;
});
});
</script>

Maka secara keseluruhan kode dari mulai kode HTML, CSS, sampai dengan jQuery adalah menjadi seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blogger Tune-Up - Tampilkan dan Sembunyikan Gadget dengan jQuery</title>
<style>
body{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#dedede;
background-color:#FFF;
background-repeat:repeat-x;
line-height:18px;
}
#keranjang{
clear:both;
border:1px solid #585858;
width:800px;
margin:10px 0 10px 40px;
padding:12px 20px 20px 20px;
background-color:#000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
a {
text-decoration:none;
}
</style>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#keranjang').hide();
$('a#tombol').click(function() {
$('#keranjang').toggle(400);
return false;
});
});
</script>
</head>
<body>
<a id="tombol" href="#">Klik Disini</a>
<div id="keranjang">Isi yang akan ditampilkan dan disembunyikan</div>
</div>
</body>
</html>

Download Show Hide dengan jQuery

Catatan kaki:
[1] Memahami Tag Anchor

Belajar Blog

Sunday, April 25, 2010