Jika dilihat dari bahasa indonesianya switch adalah beralih, ya memang switchClass ini adalah di pergunakan untuk beralih dari class yang sekarang di gunakan ke class yang baru, switchClass ini hampir sama ya dengan addClass ya, bedannya jika addClass itu menambahkan class, oke jangan kemana-mana simak terus artikel apa itu switchClass dan bagaimana cara Menggunakannya.
Untuk apa itu switchClass kita sudah memabahasnya di atas ya, jadi berfungsi untuk beralih dari class sekarang ke yang baru, dan untuk bagaimana cara Menggunakannya switchClass disini saya menggunakan sebuah class dari bootstrap dimana kita tidak perlu repot lagi mengatur classnya di style, walaupun ada paling sedikit ya, untuk melihat perubahan, dan switchClass ini karena effectnya seperti transisi dan durasi jadi biasanya di gunakan untuk perubahan class yang mengandung ukuran seperti width dan lain-lainya, tetapi disini saya mencobanya mengganti background walaupun bisa juga tetapi sepertinya tidak pas ya, nanti silahkan teman-teman coba sendiri ya.
switchClass ini saya temukan di jqueryUI, karena menarik maka dari itu saya mencoba berbagi kepada teman-teman siapa tau ada yang membutuhkannya, oke dasar switch itu terdiri dari:
1 |
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] ) |
bisa dilihat ada remove, addclass, durasi, easing dan complete, walaupun seringnya kita hanya menggunakan sampai dengan durasi saja, oke langsung saja ya kita lihat contoh pembuatannya:
ini adalah link CDNnya:
1 2 3 |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.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> |
jika sudah karena saya menggunakan bootstrap dan saya mencobanya dari sebuah compnent bootstrap maka target contentnya seperti ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container mt-3"> <div class="row"> <div class="col-md-4 offset-md-2"> <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div> <button id="button" class="btn btn-success text-light">Run Effect</button> </div> </div> </div> |
jika sudah kita langsung lihat bagaimana saya menggunakan switchClass ini untuk perubahan background
1 2 3 4 5 6 7 8 |
$( function() { $( "#button" ).on( "click", function() { $( ".alert-success" ).switchClass( "alert-success", "alert-danger", 1000 ); $( ".alert-danger" ).switchClass( "alert-danger", "alert-success", 1000 ); $( ".btn-success" ).switchClass( "btn btn-success", "btn btn-danger btn-lg", 1000 ); $( ".btn-danger" ).switchClass( "btn btn-danger", "btn btn-success btn-sm", 1000 ); }); }); |
bisa dilihat ya, saya mengganti backgroundnya, dan jika di coba maka hasilnya seperti ini:
Jika dilihat yang hijau adalah awal dan ketika kita tekan buttonya maka yang merah lah hasilnya, dan kenapa bisa lebar karena disini saya memberikan tambahan width lagi ketika alert-danger active. Oiya jika ada yang salah dari penjelasan saya, mohon di koreksi, karena kita sama-sama lagi belajar oke, dan saya rasa cukup sampai disini dulu belajar kita tentang apa itu switchClass dan bagaimana cara Menggunakannya, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.