Pada
kesempatan kali ini saya akan sedikit membahas tentang penggunaan chainning
pada Jquery. Mungkin dari sebagian kita akan sangat kurang familiar dengan
istilah chainning pada jquery. Chainning pada jquery merupakan sebuah function
yang digunakan untuk menggabungkan beberapa methode dalam sebuah aksi.
Chainning sendiri berarti rantai atau dapat diartikan bahwa function chainning
ini memberikan efek ganda ketika diterapkan.
Oh iya mungkin ada yang bertanya-tanya kenapa sih function chainning ini
ada di jquey, alasannya karena pada jquery ini adalah library yang sudah ada,
jadi hanya perlu kita panggil saja. Sehingga akan semakin mempermudah dalam
penulisan baris coding dan tentunya menghemat baris koding itu sendiri. Nah
kira-kira ada gak nie bayangan dari temen-temen tentang penggunaan chainning?
Atau masih ada yang kurang paham? Kalo gitu yuk kita liat gambaran dari
penggunaan chainning ini.
|
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title>Chaining
di Jquery</title>
<script
src="jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#tombol").click(function()
{
$("#box").slideToggle("slow");
})
});
</script>
<style>
#box {
width: 300px;
height: 300px;
background-color: #00ccff;
border: 5px solid black;
}
</style>
</head>
<body>
<h2>Chaining
di Jquery</h2>
<button
id="tombol">Coba Klik</button>
<br><br>
<div
id="box"></div>
</body>
</html>
|
Hasilnya
ketika teman-teman jalankan di browser akan menampilkan hasil seperti ini:
Gambar
1 Tampilan Awal Ketika Dijalankan di Web Browser
Gambar
2 Tampilan Ketika Button “Coba Klik” di Klik
Ketika pertamakali
dijalankan hanya muncul button saja, namun ketika button tersebut di kik maka akan
muncul box yang turun dari button yang di klik an.
Jika diperhatikan
mungkin koding di atas tidak ada yang spesial. Namun ada yang teman-teman perlu
perhatikan bahwa ada bagian dari koding ini yang mengakses ke library jquery
yakni
|
<script
src="jquery-2.1.4.js"></script>
|
Untuk
itu teman-teman harus mendownload
jquerynya ya. Jika tidak maka program ini tidak akan berjalan. Untuk mendownload
jquerynya teman-teman bisa berkunjung ke https://code.jquery.com/jquery-2.1.4.js
dan
simpan dengan nama yang sama sesuai source yang akan di akses. Nah disini kita
juga menggunakan Slidetoggle untuk memanggil library jquery tersebut. Jika tidak
manggunakan Slidetoggle maka kita tidak dapat mengambil isi library jquery
tersebut.
|
$(document).ready(function()
{
$("#tombol").click(function()
{
$("#box").slideToggle("slow");
})
|
Mudah
bukan? Teman-teman bisa mengimplementasikan chainning ini dalam berbagai kasus
lainnya. Selamat menoba.
