Penjelasan terperinci tentang kotak centang dan radio plugin Bootstrap

icheck

fitur:

1. Kinerja yang sama dilakukan pada browser yang berbeda (termasuk IE6+) dan perangkat - termasuk desktop dan perangkat seluler

2. Dukungan perangkat sentuh - iOS, android, blackberry, windows phone dan sistem lainnya

4. Kustomisasi yang nyaman - Gunakan HTML dan CSS untuk menata (beberapa set kulit)

5. Ukuran Kecil - Hanya 1 kb setelah kompresi GZIP

6. 25 Parameter digunakan untuk menyesuaikan kotak centang dan tombol radio.

7. 8 Acara Callback digunakan untuk mendengarkan status kotak input.

8. 7 Metode digunakan untuk mengontrol status kotak input secara terprogram

9. Ia dapat menyinkronkan perubahan status kotak input kembali ke kotak input asli, mendukung semua pemilih

Bagaimana menggunakan:

$ ('input'). icheck ('check'); // Atur status kotak input untuk dicentang

$ ('input'). icheck ('hapus centang'); // Hapus status yang diperiksa

$ ('input'). icheck ('sakelar'); // Toggle state yang diperiksa

$ ('input'). Icheck ('Disable'); // Atur status kotak input ke dinonaktifkan

$ ('input'). icheck ('enable'); // Hapus status yang dinonaktifkan

$ ('input'). icheck ('update'); // Terapkan perubahan input, yang dilakukan di luar plugin

$ ('input'). Icheck ('Destroy'); // Hapus gaya icheck

Saat menelepon icheck, Anda hanya perlu mencantumkan parameter yang telah memodifikasi nilai default:

 // metode penggunaan dasar $ ('input'). Icheck ({labelHover: false, kursor: true, checkboxclass: 'icheckbox_square-blue', radioclass: 'iradio_square-blue', peningkatan: '20%'});

Berikut adalah daftar parameter dan nilai defaultnya:

 {handle: '', checkboxclass: 'icheckbox', RadioClass: 'iradio', checkedclass: 'checked', checkedCheckboxClass: '', checkedradioclass: '', unceckedchboxclass: '' 'uncheckedboxclass:' ',' Discablass: '' '' '' '' DiscableCboxClass: '' ',' Discablass: '' DiscableCboxclass: '' 'Discablassclass:' '' '' 'UncheckedBoxClass:' '', '' UncheckedBoxClass: '' '' '' Discablassclass: '' '' UncheckedBoxClass: '' 'Discablasplass:' '' 'UncheckedBoxClass:' ' DisabledCheckBoxClass: '', DisableDCheckBoxClass: '', DisableDCheckBoxClass: '', EnabledCheckBoxClass: '', EnabledRadioclass: '', EnabledRadioClass: ', EnabledRadioClass:' ', EnabledRadioClass:' ', EnabledRadioClass:' ',' '', '' ', EnabledRadioClass:' ',' '', EnabledRACLASS: '', '', ' enabledradioclass: '', enabledradioclass: '', enableDradioclass: '', enabledradioclass: '', enabledradioclass: '', enabladioclass: '', enabledRadioclass: '', '','DACLASS: '', enabledRadioclass: '', '', '', '', '', '', '', '', '', '', '', '', '', ENABLACLASS: '', '', '', '', ENVEROCLASS: '', '', ' enabledRadioClass: '', hoverclass: 'hover', focusclass: 'focus', ActiveClass: 'Active', LabelHover: True, LabelHoverClass: 'Wast

Kami dapat mengatur ulang gaya ke salah satu kelas yang tercantum di atas

kulit

Hitam - minimum.css // hitam

Merah - merah.css // merah

Hijau - hijau.css // hijau

Biru - biru.css // biru

Aero - aero.css // Efek kaca di Win7

Grey - Grey.css // Silver Grey

Orange - Orange.css // Orange

Kuning - Kuning.CSS // Kuning

Pink - pink.css // pink

Ungu - ungu.css // ungu

(Silakan unduh paket kulit ini sendiri)

inisialisasi

Pertama, perkenalkan file perpustakaan jQuery

Kedua, perkenalkan file plugin jquery.icheck.js

(Jika Anda ingin memperkenalkan kulit terkait, Anda perlu memperkenalkan: File Tema Warna.CSS Terkait)

Acara Callback

Icheck mendukung semua pemilih dan hanya berfungsi untuk kotak centang dan tombol radio dan radio

Icheck menyediakan sejumlah besar acara callback, yang semuanya dapat digunakan untuk mendengarkan acara perubahan

Gunakan metode on () untuk mengikat acara:

 $ ('input'). on ('ifchecked', function (event) {// ifcreated event harus terikat ke peringatan (event.type + 'callback');}); Bisakah ukuran radio dan kotak centang di bootstrap icheck diubah ukurannya? .icheckbox_square-blue, .iradio_square-blue {display: block; Margin: 0; Padding: 0; Lebar: 22px; Tinggi: 22px; Latar Belakang: URL (Blue.png) No-Repeat; Perbatasan: Tidak Ada; kursor: pointer; }

Jika Anda ingin menyesuaikan gaya radio atau kotak centang dari icheck, memodifikasi lebar dan tinggi melalui CSS di atas, dan pada saat yang sama memodifikasi ukuran gambar blue.png yang sesuai.

Mari kita lihat bagaimana mendapatkan nilai radio

Untuk set radio berikut, bagaimana Anda bisa mendapatkan nilai nilai 1 atau 0 saat menggunakan icheck?

Di atas adalah kotak centang plug-in icheck dan radio bootstrap yang diperkenalkan editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!