Setelah membahas dasar-dasar JQuery UI dan fitur-fitur penting lainnya, sekarang saatnya kita masuk ke salah satu komponen paling sering digunakan dalam pengembangan antarmuka pengguna: tombol. JQuery UI menyediakan cara yang elegan dan mudah untuk mengubah tombol HTML standar menjadi elemen interaktif yang stylish.
Dalam tutorial ini, kita akan menjelajahi bagaimana cara menggunakan widget Tombol JQuery UI untuk meningkatkan tampilan dan fungsionalitas tombol Anda.
Apa itu Tombol JQuery UI?
Widget Tombol JQuery UI tidak membuat tombol baru dari awal, melainkan memperkaya elemen HTML yang sudah ada seperti <button>, <input type="submit">, <input type="reset">, <input type="button">, dan bahkan elemen <a> (untuk membuat tautan terlihat seperti tombol). Ini memungkinkan Anda untuk dengan cepat menerapkan tema, ikon, dan status interaktif (seperti hover dan aktif) ke tombol Anda tanpa perlu menulis banyak CSS atau JavaScript.
Langkah 1: Mempersiapkan Lingkungan Anda
Sebelum memulai, pastikan Anda telah menyertakan library JQuery dan JQuery UI dalam proyek Anda. Anda bisa mengunduhnya secara lokal atau menggunakan CDN (Content Delivery Network).
<!DOCTYPE html>
<html>
<head>
<title>Tutorial JQuery UI #3: Tombol JQuery UI</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.demo-container { margin-top: 20px; }
button { margin-right: 10px; }
</style>
</head>
<body>
<h1>Demonstrasi Tombol JQuery UI</h1>
<div class="demo-container">
</div>
<script>
$( function() {
// Kode JQuery UI akan ditempatkan di sini
});
</script>
</body>
</html>
Langkah 2: Membuat Tombol Dasar
Mari kita mulai dengan mengubah tombol HTML sederhana menjadi tombol JQuery UI.
<div class="demo-container">
<button id="myButton">Klik Saya</button>
<input type="submit" id="submitButton" value="Kirim">
</div>
Untuk mengaktifkan widget tombol JQuery UI, cukup panggil metode .button() pada elemen yang Anda pilih.
$( function() {
$( "#myButton" ).button();
$( "#submitButton" ).button();
});
Sekarang, coba jalankan halaman Anda. Anda akan melihat bahwa tombol-tombol tersebut memiliki tampilan yang lebih modern sesuai dengan tema JQuery UI yang Anda gunakan.
Langkah 3: Menambahkan Ikon ke Tombol
JQuery UI memungkinkan Anda untuk dengan mudah menambahkan ikon ke tombol, baik di sisi kiri maupun kanan teks, atau bahkan hanya ikon saja tanpa teks.
<div class="demo-container">
<button id="iconLeft">Edit</button>
<button id="iconRight">Hapus</button>
<button id="iconOnly"></button>
</div>
Untuk menambahkan ikon, gunakan opsi icon dalam metode .button(). JQuery UI menggunakan serangkaian kelas ikon yang telah ditentukan (misalnya, ui-icon-pencil, ui-icon-trash, ui-icon-gear). Anda dapat menemukan daftar lengkap ikon di dokumentasi JQuery UI.
$( function() {
$( "#iconLeft" ).button({
icon: "ui-icon-pencil",
showLabel: true // Default, bisa dihilangkan
});
$( "#iconRight" ).button({
icon: "ui-icon-trash",
iconPosition: "end", // Menempatkan ikon di kanan
showLabel: true
});
$( "#iconOnly" ).button({
icon: "ui-icon-gear",
showLabel: false // Sembunyikan label, hanya tampilkan ikon
});
});
Langkah 4: Membuat Tombol Tautan (Link Button)
Anda juga bisa mengubah elemen <a> menjadi tombol JQuery UI. Ini sangat berguna jika Anda ingin tautan terlihat dan berperilaku seperti tombol.
<div class="demo-container">
<a href="#" id="linkButton">Lihat Detail</a>
</div>
$( function() {
$( "#linkButton" ).button({
icon: "ui-icon-arrowthick-1-e"
});
});
Langkah 5: Mengontrol Keadaan Tombol (Disabled)
Anda dapat dengan mudah menonaktifkan atau mengaktifkan tombol menggunakan metode disable() dan enable().
<div class="demo-container">
<button id="toggleButton">Tombol yang bisa diaktifkan/dinonaktifkan</button>
<button id="disableIt">Nonaktifkan</button>
<button id="enableIt">Aktifkan</button>
</div>
$( function() {
$( "#toggleButton" ).button();
$( "#disableIt" ).button().on( "click", function() {
$( "#toggleButton" ).button( "disable" );
});
$( "#enableIt" ).button().on( "click", function() {
$( "#toggleButton" ).button( "enable" );
});
});
Langkah 6: Grouping Tombol (Radio & Checkbox)
JQuery UI juga menyediakan cara yang bagus untuk menata grup tombol radio dan checkbox agar terlihat seragam. Ini dilakukan dengan menggunakan widget buttonset.
<div class="demo-container">
<h3>Pilih Opsi (Checkbox)</h3>
<div id="checkboxGroup">
<input type="checkbox" id="check1"><label for="check1">Opsi A</label>
<input type="checkbox" id="check2"><label for="check2">Opsi B</label>
<input type="checkbox" id="check3"><label for="check3">Opsi C</label>
</div>
<h3>Pilih Warna (Radio)</h3>
<div id="radioGroup">
<input type="radio" id="radio1" name="radioColor"><label for="radio1">Merah</label>
<input type="radio" id="radio2" name="radioColor" checked="checked"><label for="radio2">Hijau</label>
<input type="radio" id="radio3" name="radioColor"><label for="radio3">Biru</label>
</div>
</div>
$( function() {
$( "#checkboxGroup" ).buttonset();
$( "#radioGroup" ).buttonset();
});
Anda akan melihat bahwa checkbox dan radio button sekarang memiliki tampilan yang lebih terintegrasi dan menarik.
Kesimpulan
Widget Tombol JQuery UI adalah alat yang sangat berguna untuk meningkatkan estetika dan fungsionalitas tombol dalam aplikasi web Anda. Dengan sedikit kode JavaScript, Anda dapat mengubah tombol standar menjadi elemen UI yang canggih dengan ikon, tema, dan perilaku yang responsif.
Ingatlah untuk selalu merujuk pada dokumentasi resmi JQuery UI untuk opsi-opsi lebih lanjut dan daftar lengkap ikon yang tersedia. Selamat mencoba!
