Cara Menggunakan Fungsi addclass Pada jQuery UI

Halo semuanya, selamat datang pada tips dan trik Dumet School. Berjumpa kembali dengan saya yang akan memberikan tips dan trik seputar dunia website, pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Menggunakan Fungsi addclass Pada jQuery UI dimana fungsi ini sama pada jQuery biasanya namun ada beberapa fitur tambahan di dalam jQuery UI dan nanti kalian perlahan – lahan bisa lihat perbedaannya. Pada studi case kali ini kita akan membuat sebuah kotak kemudian kita panggil fungsi addclass yang css nya sudah kita atur.

Pastikan teman – teman sudah belajar terlebih dahulu fungsi – fungsi di dalam jQuery, karena memang jQuery UI hampir sama dengan jQuery hanya saja jQuery UI lebih kompleks ketimbang jQuery. Baik lanjut pada latihan kali ini tentang Cara Menggunakan Fungsi addclass Pada jQuery UI, seperti biasa 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 Fungsi addclass Pada jQuery UI</title>
</head>
<body>
   <div class="oke">Text Di dalam 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>

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Langkah berikutnya kita tambahkan fungsi addclass nya, pertama – 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 fungsi addclass nya

<script>
$( ".oke" ).click(function() {
 $( this ).addClass( "big-blue", 1000, "easeOutBounce" ).css({"color":"red"});
});
</script>

Jika sudah save dan refresh pada browsernya, lalu klik pada kotak, maka kotak akan membesar dengan backgorund warna biru dan text berwarna merah, pada proser membesar ada fitur easeOutBounce yang seperti ada opacity nya.

Inilah contoh sederhana untuk menggunakan addclass pada jQuery UI, teman – teman bisa eksperimen sendiri. Dan yang paling penting jangan lupa pemberian link untuk library jQuery dan jQuery UI Begitupun jQuery UI CSS.

Baik sekian dari saya pada artikel kali ini tentang Cara Menggunakan Fungsi addclass Pada jQuery UI, kita berjumpa kembali pada artikel yang akan datang. Semoga bermanfaat dan jadi tambahan pengetahuan tentang jQuery UI nya, Terimakasih Dan Sampai Jumpa.

Cara Menggunakan Fungsi addclass Pada jQuery UI

Kategori