belajar mengenal fungsi efek switchclass() pada jquery ui

Apa kabar teman-teaman semuanya? masih ingat tentang materi pembahasan kita tentang jquery ui, sekarang kita akan lanjut lagi belajar tentang jquery uiÂ dan pada kesempatan kali ini kita akan belajar mengenal fungsi efek switchclass() pada jquery ui.

Ada banyak sekali efek-efek yang dapat kita gunakan pada jquery ui ini dan salah satunya adalah switchclass() ini, fungsi dari efek ini adalah merubah class yang sudah kita tentukan sebelumnya pada atribut html menjadi class yang kita inginkan pada fungsi javascriptnya, daripada bingung kita langsung saja praktekkan, pertama-tama seperti biasa teman-teman download dulu ribrary dari jquery ui pada webiste resmi jquery ui lalu teman-teman ekstrak, karna bentuk downloadnya berupa zip, lalu teman-teman buat sebuah file html dan ketikan script berikut ini :

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>switchClass demo</title>
  <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .besar {
    width: 200px;
    height: 200px;
  }
  .kecil {
    background-color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
  <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
</head>
<body>
 
<div class="besar"></div>
 
 
</body>
</html>

<head>

<title>switchClass demo</title>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

}

.besar {

width: 200px;

height: 200px;

}

.kecil {

background-color: blue;

}

</style>

</head>

<body>

</body>

</html>

Script diatas menjelaskan bahwa saya membuat sebuah div dengan class besar, lalu saya mengatur cssnya seperti berikut ini :

 <style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .besar {
    width: 200px;
    height: 200px;
  }
  .kecil {
    background-color: blue;
  }
  </style>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

}

.besar {

width: 200px;

height: 200px;

}

.kecil {

background-color: blue;

}

</style>

Dan saya memanggil css dan jquery dari jquery ui yang tadi telah saya download:

pemanggilan css :

<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">

1	<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">

pemanggilan ribrary jquery ui dan core jquery:

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
 <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>

1 2	<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>

saya memanggil core jquerynya secara online dan saya menyisipkan ribrary jquery uinya.

Nah sekarang teman-teman tambahkan script javascript berikut ini :

<script>
$( "div" ).click(function() {
  $( this ).switchClass( "besar", "kecil", 1000, "easeInOutQuad" );
});
</script>

$( "div" ).click(function() {

$( this ).switchClass( "besar", "kecil", 1000, "easeInOutQuad" );

});

</script>

Nah disini saya akan sedikit menjelaskan script ini, dimana saya membuat event click pada element div dimana ketika div tersebuat diklik maka akan menjalankan efek switchClass yang akan merubah class besar menjadi class kecil dengan efek transisi dan kecepatan 1000.

Untuk hasilnya coba teman-teman jalankan pada browser dan lihat hasilnya. gimana? mudah bukan teman-teman? saya kira untuk tutorial kali ini tentang mengenal fungsi efek switchclass() pada jquery ui cukup sampai sini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya.

Terimakasih.

Mengenal Fungsi Efek Switchclass() Pada Jquery UI

Facebook DUMET School

Categories