Hallo teman-teman Dumet School, kembali lagi dengan saya Shelli Riipati di Kursus Web Design. Kali ini saya akan membahas tentang Cara Membuat Effect Toggle Keren Pada Jquery UI dimana efeknya nanti ketika tombol di klik akan hilang dan muncul dengan efek terbelah menjadi beberapa bagian.
Fungsi toggle pada jquery merupakan gabungan antara efek .show() dan .hide(). Jadi, saat elemen sedang muncul, maka .toggle() bertugas untuk menyembunyikannya, sedangkan saat elemen sedang menghilang, maka .toggle() bertugas untuk menampilkannya.
Oke teman-teman, langsung saja kita buat struktur htmlnya untuk mengetahui Cara Membuat Effect Toggle Keren Pada Jquery UI dan berikut scriptnya .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Cara Membuat Effect Toggle Keren Pada Jquery UI</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#button { padding: .5em 1em; text-decoration: none;line-height: 60px}
#effect { width: 500px;padding: 0.4em; position: relative;}
img{width: 100%}
</style>
</head>
<body>
<h1>Cara Membuat Effect Toggle Keren Pada Jquery UI</h1>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<img src="pemandangan2.jpg">
</div>
</div>
</body>
</html>
Jika sudah selesai maka teman-teman bisa langsung membuat script jquerynya untuk dapat membuat effect toggle keren pada jquery ui. Teman-teman bisa langsung salin source code yang ada di bawah ini lalu letakkan di dalam head setelah style cssnya.
<script>
$(function() {
function runEffect() {
$( "#effect" ).toggle('explode', 300);
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
Teman-teman bisa perhatikan untuk script di atas, dimana efek toggle yang saya gunakan adalah explode yang berfungsi untuk memberikan efek meledak menyembunyikan atau menunjukkan elemen dengan membaginya menjadi beberapa bagian. Dimana ketika di klik tombolnya maka efek togglenya akan dijalankan terhadap suatu elemen atau target seperti pada gambar di bawah ini.
Demikian artikel tentang Cara Membuat Effect Toggle Keren Pada Jquery UI. Semoga bisa bermanfaat dan selamat mencoba ya.