Jquery Ui Button

Published by Concept Phone Minggu, 09 September 2018

jQuery UI Button dipakai untuk memanipulasi elemen menjadi tombol. Target dapat berupa <button>, <a>, <input>, <span> dan <div>. Namun elemen-elemen yang umum dimanipulasi ialah <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)
	false
text	true	Pilihan untuk menghilangkan teks jikalau hanya ingin menampilkan ikon. (default: true)
	false
icons	{primary:"nama-ikon-1", secondary:"nama-ikon-2"}	Menambahkan ikon di samping teks/label tombol. primary dipakai untuk menambahkan ikon sebelum label, secondary dipakai untuk menambahkan ikon sesudah label. Lihat semua nama ikon jQuery UI 1.8.16 »
label	"nama label baru"	Memanipulasi nama tombol/label dengan jQuery. Ini akan menciptakan teks yang tadinya tertulis sebagai nama tombol menjadi berganti dengan teks yang telah ditentukan dalam opsi label

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

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

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

Sumber https://www.dte.web.id/