Penggunaan Fungsi Puff Effect Pada Jquery UI
Halo teman-teman, berjumpa lagi dengan saya. Di artikel kemarin kita telah belajar mengenai pemakaian beberapa tag-tag di HTML 5, nah di artikel kali ini kita akan belajar mengenai Penggunaan Fungsi Puff Effect Pada Jquery UI. Dimana guna puff effect ini bagi menghilangkan suatu object ketika di klik dan menampilkan object ketika di klik ke 2 kalinya. Bagus mari kita praktekkan, seperti lazimnya teman-teman siapkan code editornya dan copy script di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>puff demo</title>
<style>
#kotak {
width: 300px;
height: 300px;
margin: auto;
background: orange;
}
</style>
</head>
<body>
<div id=kotak></div>
</body>
</html>
Kemudian pastekan di code editornya, dan save dengan nama index.html lalu buka di browsernya. Karenanya akan tampil seperti gambar di bawah ini
Langkah berikutnya kita berikan guna puff effect nya, teman-teman jangan lupa sertakan atau berikan librari Jquery nya di pada tag <head>. Dapat pun 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>
Jikalau telah tambahkan guna puff efect nya
<script>
$( document ).click(function() {
$( #toggle ).toggle( puff );
});
</script>
Kemudian save dan refresh di browsernya, dan klik di kotak orange nya. Karenanya guna puff berhasil di praktekkan, gampang sekali bukan. Oke mungkin demikianlah dulu di artikel kali ini mengenai Penggunaan Fungsi Puff Effect Pada Jquery UI kita berjumpa lagi di artikel berikutnya. Semoga bermanfaat dan menjadi refrensi bagi teman-teman yang khususnya baru belajar mengenai Jquery UI.
Bagus hingga jumpa dan Terimakasih 🙂
Baca pun artikel mengenai Menggabungkan CSS Linear Dan Radial Gradient.
Sumber https://kursuswebsite.org
