Menggunakan Fungsi Transfer Effect Pada Jquery UI
Hallo teman-teman seluruh, apa kabar …?? Berjumpa lagi dengan saya, di kesempatan kali ini saya akan memberitahu mengenai Effect yang terdapat di Jquery yaitu Menggunakan Fungsi Transfer Effect Pada Jquery UI. Di demo yang akan kita bikin nanti yaitu mengirim Effect dari dua class/id yang dapat mengirimkan Effect di dikala di klik, efek yang dikirimkan berupa border. Oke seketika saja kita praktekkan, teman-teman siapkan code editornya lalu copy kan script di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Transfer Effects</title>
<style>
div.green {
width: 300px;
height: 200px;
background: green;
border: 1px solid black;
position: relative;
}
div.red {
margin-top: 10px;
width: 500px;
height: 300px;
background: red;
border: 1px solid black;
position: relative;
}
.ui-effects-transfer {
border: 1px dotted black;
}
</style>
</head>
<body>
<center>
<div class=green></div>
<div class=red></div>
</center>
</body>
</html>
Dan pastekan di code editornya, kemudian save dengan nama index.html lalu open to browse atau run di browsernya. Karenanya hasilnya seperti gambar di bawah ini
Langkah berikutnya kita berikan kegunaan tranfer effeck nya, sebelum itu teman-teman jangan lupa memberikan library Jquery dan Jquery UI nya ya di pada tag <head>. Atau pun dapat copy script di bawah ini
<link rel=stylesheet href=http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css>
<script src=http://code.jquery.com/jquery-1.12.4.js></script>
<script src=http://code.jquery.com/ui/1.12.0/jquery-ui.js></script>
Sekiranya telah mari kita berikan kegunaan transfer effeck nya, tambahkan script di bawah ini di bawah class/id nya
<script>
$( div ).click(function() {
var i = 1 - $( div ).index( this );
$( this ).effect( transfer, { to: $( div ).eq( i ) }, 1000 );
});
</script>
Save dan refreas di browsernya, Kegunaan Transfer Effect telah berhasil di bikin. Karenanya seandainya di klik di kotak warna hijau atau merah effeck akan di transfer di masing-masing class nya satu sama lain. Effeck yang ditranfer yaitu
Amat gampang ya teman-teman, bagus artikel mengenai Menggunakan Fungsi Transfer Effect Pada Jquery UI demikianlah dulu. Kita jumpa lagi di artikel berikutnya, mudah-mudahan dapat menjadi tambahan inspirasi bagi teman-teman yang betul-betul menyukai effeck – effeck yang terdapat di Jquery maupun Jquery UI. Dan jangan lupa teman-teman memodifikasinya sendiri ya supaya lebih mahir pada menggunakan Effeck Jquery nya. Oke terima kasih dan semoga bermanfaat.
Baca pun artikel mengenai Fitur Column Ordering Pada Bootstrap
Sumber https://kursuswebsite.org
