Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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>:

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 0 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!