jQuery UI Button

Rabu, 14 Desember 2011

Tabel Konten

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

Opsi	Nilai	Deskripsi
disabled	true	Pilihan untuk menonaktifkan tombol. (default: false)
disabled	false	Pilihan untuk menonaktifkan tombol. (default: false)
text	true	Pilihan untuk menghilangkan teks jika hanya ingin menampilkan ikon. (default: true)
text	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:

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();
});