Senin, 28 November 2016

Tutorial Penggunaan Chainning Function pada Jquery



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.

Tidak ada komentar:

Posting Komentar