jQuery UI Button
jQuery UI Button digunakan untuk memanipulasi elemen menjadi tombol. Target bisa berupa <button>
, <a>
, <input>
, <span>
dan <div>
. Namun elemen-elemen yang umum dimanipulasi adalah <button>
, <a>
dan <input>
:
Dasar Penggunaan
Memanipulasi elemen menjadi tombol:
$('#elemen').button();
$('input:submit').button();
$('input:radio').button();
$('a.tombol').button();
Menambahkan konfigurasi:
$('#elemen').button({disabled:true, text:true});
Konfigurasi jQuery UI Button
Opsi | Nilai | Deskripsi |
---|---|---|
disabled | true | Pilihan untuk menonaktifkan tombol. (default: false) |
false | ||
text | true | Pilihan untuk menghilangkan teks jika hanya ingin menampilkan ikon. (default: true) |
false | ||
icons | {primary:"nama-ikon-1", secondary:"nama-ikon-2"} | Menambahkan ikon di samping teks/label tombol. primary digunakan untuk menambahkan ikon sebelum label, secondary digunakan untuk menambahkan ikon setelah label.Lihat semua nama ikon jQuery UI 1.8.16 » |
label | "nama label baru" | Memanipulasi nama tombol/label dengan jQuery. Ini akan membuat teks yang tadinya tertulis sebagai nama tombol menjadi berganti dengan teks yang telah ditentukan dalam opsi label |
Gambar 1: Dasar
$('#elemen').button();
Gambar 2: Menambahkan Ikon Primer
$('#elemen').button({
icons:{primary:"ui-icon-locked"}
});
Gambar 3: Menambahkan Ikon Primer dan Menghilangkan Label
$('#elemen').button({
icons:{primary:"ui-icon-locked"},
text:false
});
Gambar 4: Menambahkan Ikon Primer dan Sekunder
$('#elemen').button({
icons:{
primary:"ui-icon-locked",
secondary:"ui-icon-carat-2-n-s"
}
});
Gambar 5: Menambahkan Ikon Primer dan Sekunder dan Menghilangkan Label
$('#elemen').button({
icons:{
primary:"ui-icon-locked",
secondary:"ui-icon-carat-2-n-s"
},
text:false
});
Tombol 1: Menonaktifkan Tombol
$('#elemen').button({disabled:true});
Tombol 2: Memanipulasi Label Tombol
$('#elemen').button({label:"Nama Baru"});
jQuery UI .buttonset()
Digunakan untuk mengelompokkan beberapa elemen dalam sebuah elemen induk menjadi sebuah grup tombol:
HTML
<!-- Grup Input Radio -->
<form action='...' name='g'>
<div id='radio'>
<input id='radio1' name='radio' type='radio' /><label for='radio1'>Opsi 1</label>
<input checked='checked' id='radio2' name='radio' type='radio' /><label for='radio2'>Opsi 2</label>
<input id='radio3' name='radio' type='radio' /><label for='radio3'>Opsi 3</label>
</div>
</form>
<!-- Grup Input Check Box -->
<div id='grup-format'>
<input type='checkbox' id='check1' /><label for='check1'>B</label>
<input type='checkbox' id='check2' /><label for='check2'>I</label>
<input type='checkbox' id='check3' /><label for='check3'>U</label>
</div>
jQuery UI .buttonset()
$(function() {
//memanipulasi elemen-elemen radio
$('#radio').buttonset();
//memanipulasi elemen-elemen checkbox
$('#grup-format').buttonset();
});
Memanipulasi Elemen Radio dan CheckBox hanya dengan .button()
$(function() {
$('input:radio, input:checkbox').button();
});