Fungsi ToggleClass Pada Jquery UI
Halo teman-teman berjumpa lagi dengan saya, di artikel sebelumnya kita telah membahas beberapa manfaat dari Jquery UI. Di artikel kali ini kita akan menggunakan Fungsi ToggleClass Pada Jquery UI kita akan merancang kotak dan ketika kotak diklik karenanya color dan size akan berubah yaitu dengan menggunakan toggleClass di Jquery UI. Bagus seketika saja teman-teman siapkan code editornya lalu copy script di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>ToggleClass</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
.besar {
width: 500px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Lalu pastekan script di atas ini di code editornya, dan save dengan nama index.html kemudian run di browsernya. Karenanya output akan menghasilkan seperti gambar di bawah ini
Langkah berikutnya kita berikan manfaat toggleClass nya, pertama-tama berikan library Jquery dan Jquery UI nya terlebih dahulu di pada tag <head> nya, atau dapat pun copy script dibawah 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 teman-teman tambahkan manfaat Jquerynya
<script>
$( div ).click(function() {
$( this ).toggleClass( besar );
});
</script>
Kemudian disave dan refreas di browsernya, dan klik di kotak karenanya toggleClass berhasil dibangun namun masih terlihat kurang menarik, supaya lebih menarik kita tambahkan beberapa manfaat lagi. Disini saya ingin tampilan apabila di klik supaya lebih pelan atau slow karenanya saya tinggal berikan saja manfaat slow nya
Tampilan telah lebih menarik, tetapi apabila teman-teman ingin merubahnya lebih slow lagi tinggal tambahkan saja kecepatannya, coba saya akan ganti slow menjadi 1000s
Karenanya tampilan apabila di klik lebih soft, gampang sekali ya teman-teman. Oke mungkin demikian dulu di artikel ini mengenai Fungsi ToggleClass Pada Jquery UI semoga bermanfaat dan menjadi inspirasi. Teman-teman pun dapat memodifikasinya sendiri ya dari contoh diatas agar lebih mantap pada mempelajari beberapa manfaat dari Jquery UI. Hingga jumpa di artikel berikutnya
Terimakasih, indahnya berbagi 🙂
Baca pun artikel mengenai Cara Nonaktifkan Link Dengan CSS
Sumber https://kursuswebsite.org
