Cara Menggunakan Fungsi addclass Pada jQuery UI
Halo semuanya, selamat datang di tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya yang akan memberikan tips dan trik seputar dunia situs, di kesempatan kali ini saya akan memberikan tips dan trik mengenai Cara Menggunakan Fungsi addclass Pada jQuery UI dimana kegunaan ini sama di jQuery biasanya namun ada beberapa fitur tambahan di pada jQuery UI dan nanti kalian perlahan – lahan dapat lihat perbedaannya. Di studi case kali ini kita akan membangun sebuah kotak kemudian kita panggil kegunaan addclass yang css nya telah kita atur.
Pastikan teman – teman telah belajar terlebih dahulu kegunaan – kegunaan di pada jQuery, karena memang jQuery UI hampir sama dengan jQuery hanya saja jQuery UI lebih kompleks ketimbang jQuery. Bagus lanjut di latihan kali ini mengenai Cara Menggunakan Fungsi addclass Pada jQuery UI, seperti lazimnya teman – teman siapkan text editornya dan copy script html nya di bawah ini
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Cara Menggunakan Kegunaan addclass Di jQuery UI</title>
</head>
<body>
<div class=oke>Text Di pada div</div>
</body>
</html>
Save degan nama index.html nya, berikutnya kita berikan cssnya
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
}
.big-blue {
width: 200px;
height: 200px;
background-color: #00f;
}
</style>
Seandainya telah save dan jalankan di browsernya, karenanya hasilnya seperti gambar di bawah ini
Langkah berikutnya kita tambahkan kegunaan addclass nya, pertama-tama – tama load terlebih dahulu jQuery dan jQuery UI nya
<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>
Kemudian kita berikan kegunaan addclass nya
<script>
$( .oke ).click(function() {
$( this ).addClass( big-blue, 1000, easeOutBounce ).css({color:red});
});
</script>
Seandainya telah save dan refresh di browsernya, lalu klik di kotak, karenanya kotak akan membesar dengan backgorund warna biru dan text berwarna merah, di proser membesar ada fitur easeOutBounce yang seperti ada opacity nya.
Inilah contoh sederhana bagi menggunakan addclass di jQuery UI, teman – teman dapat eksperimen sendiri. Dan yang sangat urgen jangan lupa pemberian link bagi library jQuery dan jQuery UI Begitupun jQuery UI CSS.
Bagus demikian dari saya di artikel kali ini mengenai Cara Menggunakan Fungsi addclass Pada jQuery UI, kita berjumpa kembali di artikel yang akan datang. Semoga bermanfaat dan jadi tambahan pengetahuan mengenai jQuery UI nya, Terimakasih Dan Hingga Jumpa.
Sumber https://kursuswebsite.org
