BELAJAR JQUERY CHAINING FUNCTION
Pada tutorial sebelumnya sobat telah mempelajari tutorial - tutorial JQuery dasar, seperti cara penggunaan JQuery, mengenal effect dan event JQuery, mengenal callback function JQuyer, dan pada tutorial kali ini yaitu Mengenal Chaining Function JQuery, bagaimana cara kerja chaining function dan bagaimana cara penulisanya. Berikut silahkan simak penjelasan tentang Pengertian Chaining Function JQuery
Chaining Function adalah metode menghubungkan action dan method JQuery pada sebuah element atau lebih dengan sebuah statement. Jadi pada JQuery kita dapat menjalankan banyak event atau method secara sekaligus. Berikut ini adalah contoh cara membua chaining function pada JQuery.
Pada contoh ini kita akan membuat sebuah tombol lagi. Kenapa di setiap tutorial belajar JQuery kita menggunakan tombol untuk contoh, karena metode ini tergolong mudah dipahami pada saat mempelajari JQuery Dasar. Yang di kemudiannya bisa di kembangkan sendiri sesuai keinginan. Setelah membuat sebuah tombol kita juga membuat sebuah kotak yang akan kita beri efek ganda atau chaining function.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar JQuery Part 6 : Chaining Function Pada JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Chaining Function Pada JQuery<br>
<a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
<button id="tombol">Klik Disini</button>
<div class="box"></div>
<br><br>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').fadeIn(800).slideUp(900).slideDown(700).slideUp(700).fadeIn(500).animate({left: '250px'});
});
});
</script>
</html>
style.css
body{
font-family: raleway
}
h1{
text-align: center;
}
.box{
height: 400px;
width: 500px;
background-color: hotpink;
}
#tombol{
background-color: transparent;
color: cyan;
border: 1px solid cyan;
border-radius: 5px 5px 5px 5px;
padding: 10px;
}
#tombol:hover{
background-color: cyan;
color: white;
box-shadow: 1px 1px 1px black
}Hasil ketika kita compile pada web browser
Akan sata jelaskan sedikit disini. Perhatikan pada syntax JQuery berikut
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').fadeIn(800).slideUp(900).slideDown(700).slideUp(700).fadeIn(500).animate({left: '250px'});Pada contoh diatas kita memberikan event click pada tombol yang kemudian akan memberikan effect fadeIn(), slideUp() dan slideDown(0 sekaligus pada element box.
});
});
KESIMPULAN
Jadi chaining function adalah metode penggabungan function pada JQuery dan pada tutorial ini saya membuat 3 function sekaligus dalam element box. Bagaimana mudah bukan? jika sobat memiliki pertanyaan silahkan kita diskusikan pada kolom komentar dibawah ^^.
EmoticonEmoticon