Cara Menggunakan Fungsi Explode Jquery UI
Haii… teman-teman, apa kabar..? Pastinya bagus ya, jumpa lagi dengan saya. Di artikel sebelumnya kita telah membahas mengenai beberapa guna dari Jquery UI (user interface), di artikel kali ini saya pun akan membahas mengenai Cara Menggunakan Fungsi Explode Jquery UI (user inteface). Cara explode berfungsi bagi memberikan efek terbelah dan menyatu ketika di klik, dan dibantu oleh guna toggle. Keduanya yaitu gabungan dari Jquery dan Jquery UI, bagus seketika saja kita praktekkan. Teman-teman siapkan code editornya lalu copy script di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Explode</title>
<style>
*{padding: 0; margin: 0}
body{background: gray}
#toggle {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<center>
<img id=toggle src=Source Code Aplikasi.png>
</center>
</body>
</html>
Kemudian pastekan di code editornya, save dengan index.html dan open to browse atau run di browsernya. Nah hasil nya seperti gambar di bawah ini
Nah di latihan kali ini saya pun menggunakan gambar bagi diberikan guna explode. Teman-teman boleh menggunakan gambar apa saja, langkah berikutnya kita berikan guna explode nya. Jangan lupa berikan library nya terlebih dahulu, atau dapat pun copy script di bawah ini
<link rel=stylesheet href=http://code.jquery.com/ui/1.12.1/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.1/jquery-ui.js></script>
Kalau telah kita tambahkan guna explode nya
<script>
$( document ).click(function() {
$( #toggle ).toggle( explode );
});
</script>
Kemudian save dan refreas di browsernya, karenanya gambar berhasil di berikan guna explode apabila di klik gambar akan menghasilkan efek terbelah dan menyatu. Oke amat gampang bukan..?? Mungkin demikianlah dulu di artikel ini mengenai Cara Menggunakan Fungsi Explode Jquery UI mudah-mudahan bermanfaat dan dapat menjadi inspirasi bagi teman-teman yang dikala ini sedang memaksimalkan skill khususnya di pada Jquery. Hingga jumpa di artikel berikutnya dan Terimakasih.
Baca pun artikel mengenai Membuat Logo Google Chrome dengan CSS.
Sumber https://kursuswebsite.org
