Cara Menambahkan Class pada JQuery-UI

Hallo sobat program, bertemu lagi dengan saya Rizal dan alhamdulilah masih diberikan kesempatan untuk saya menulis, serta memberikan informasi atau tutorial seputar pemrograman website. Pada kesempatan ini saya akan membahas tentang Cara Menambahkan Class pada JQuery-UI.

Sebelum masuk kepembahasan saya harap teman-teman sudah mengenal terlebih dahulu seputar Javascript dan JQuery. Agar sangat dengan mudah memahami pembahasan ini tentang Cara Menambahkan Class pada JQuery-UI.

JQuery-UI singkatan dari JQuery User Interface merupakan library dari javascript yang kegunaannya khusus pada bagian front-end atau user interface. JQuery-UI ini hasil dari kembangan JQuery makannya saat kita menggunakan JQuery-UI kita juga perlu library JQuery.

Disini kita akan mencoba mempraktekan salah satu fungsi dari JQuery-UI yaitu AddClass. Mungkin jika teman-teman yang sudah mengenal JQuery pasti sudah pernah mencoba menggunakan fungsi AddClass dan untuk definisi dari fungsi tsb keduanya sama yaitu untuk menambahkan class css pada element yang di pilih.

Oke langsung saja kita mulai untuk mempraktekannya Cara Menambahkan Class pada JQuery-UI, langkah pertama teman-teman buat folder terlebih dahulu dan teman-teman siapkan 1 buah gambar apa saja. Jika sudah buat file html nya lalu ketik kode HTML dan CSS nya seperti pada contoh dibawah ini :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI</title>
  <style>
    .baru{width: 200px;}
  </style>
</head>
<body>
 <img src="gambar.png" id="effect">
 <hr>
<button id="button">Klik Saya!</button>
 
 
</body>
</html>

<!doctype html>

<head>

<title>jQuery UI</title>

<style>

.baru{width: 200px;}

</style>

</head>

<body>

<hr>

</body>

</html>

Jika sudah, langkah berikutnya teman-teman tambahkan library dari JQuery dan JQuery-UI nya seperti pada contoh dibawah ini :

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Oke, langkah terakhir teman-teman tambahkan kode JQuerynya seperti pada contoh dibawah ini :

<script>
  $( function() {
    $( "#button" ).on( "click", function() {
      $( "#effect" ).addClass("baru", 2000);
    });
  } );
</script>

$( function() {

$( "#button" ).on( "click", function() {

$( "#effect" ).addClass("baru", 2000);

});

} );

</script>

Jika sudah, coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika benar dan sesuai maka hasilnya akan menjadi seperti pada contoh gambar dibawah ini :

Penjelasan untuk hasil diatas adalah gambar awal dengan ukuran yang besar lalu saya buat sebuah style css untuk mengecilkan gambar tsb lalu dengan bantuan jquery saya membuat agar gambar mengecil ketika button diklik lalu class yang tadi saya buat dijalankan dan efeknya gambar tsb akan mengecil sesuai ukuran style yang saya buat tsb.

Oke sangat mudah ya teman-teman, jadi seperti itulah contoh sederhana pada pembahasan ini tentang Cara Menambahkan Class pada JQuery-UI. Semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Facebook DUMET School

Categories