jQuery UI Button

Tabel Konten
  1. Dasar Penggunaan 
  2. Konfigurasi jQuery UI Button 
    1. Gambar 1: Dasar 
    2. Gambar 2: Menambahkan Ikon Primer 
    3. Gambar 3: Menambahkan Ikon Primer dan Menghilangkan Label 
    4. Gambar 4: Menambahkan Ikon Primer dan Sekunder 
    5. Gambar 5: Menambahkan Ikon Primer dan Sekunder dan Menghilangkan Label 
    6. Tombol 1: Menonaktifkan Tombol 
    7. Tombol 2: Memanipulasi Label Tombol 
  3. jQuery UI .buttonset() 
    1. HTML 
    2. jQuery UI .buttonset() 
    3. Memanipulasi Elemen Radio dan CheckBox hanya dengan .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>:

Lihat Demo


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 

OpsiNilaiDeskripsi
disabledtruePilihan untuk menonaktifkan tombol. (default: false)
false
texttruePilihan 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
jQuery UI Button
Format Tombol-Tombol jQuery UI Secara Umum

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
});
jQuery UI Button
Tombol jQuery UI Nonaktif dan dengan Label Baru

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:

Lihat Demo

jQuery UI Manipulation
Memanipulasi elemen-elemen Radio dan CheckBox menjadi 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();
});