Plugin jQuery Custom Select Box
Tabel Konten
Ini adalah plugin jQuery yang Saya buat berdasarkan konsep selectbox kustom yang pernah Saya temukan dan Saya catat di sini. Fungsinya adalah untuk mengubah tampilan selectbox biasa menjadi selectbox yang mudah dimodifikasi tampilannya. Saya suka dengan metodenya yang sangat sederhana untuk mengubah tampilan selectbox asli tanpa harus menghilangkan elemen aslinya dan hanya membungkusnya dengan elemen baru, sehingga kita bisa menyesuaikan dimensi selectbox palsu berdasarkan dimensi selectbox yang asli tanpa menggunakan perhitungan JavaScript yang rumit. Di sini Saya hanya memanfaatkan dimensi selectbox asli untuk mengubah ukuran lebar elemen inline-block
:
Penggunaan
Letakkan CSS sebelum jQuery dan plugin setelah jQuery, kemudian aktifkan .customSelectBox()
pada elemen <select>
yang dikehendaki. Setelah itu Anda bisa menjalankan perintah-perintah lain yang diperlukan terhadap elemen selectbox asli melalui event .change()
:
<link href="css/jquery.select.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.select.min.js"></script>
<script>
$(document).ready(function() {
$('select').customSelectBox().change(function() {
// Lakukan sesuatu di sini seperti halnya saat kita melakukan sesuatu ...
// ... dengan event `change` jQuery pada elemen selectbox
var val = this.value;
alert(val);
});
});
</script>
Itu saja.
Konfigurasi Lanjutan
Konfigurasi lanjutan ini hanya berputar di sekitar modifikasi kelas. Tidak ada efek-efek khusus tambahan pada plugin ini:
$('select').customSelectBox({
selectboxClass: 'styled-select',
buttonClass: 'curr',
selectedClass: 'selected',
disabledClass: 'disabled',
focusedClass: 'focused'
}).change(function() {});
Opsi | Keterangan |
---|---|
selectboxClass | Nama kelas pembungkus luar |
buttonClass | Nama kelas tombol pemicu drop down menu (penayang nilai opsi terseleksi) |
selectedClass | Nama kelas opsi terseleksi (elemen <option> dengan atribut selected="true" ) |
disabledClass | Nama kelas opsi mati (elemen <option> dengan atribut disabled="true" ) |
focusedClass | Nama kelas tombol selectbox terfokus (saat diklik) |
Keterangan dan gambaran markup HTML tergenerasi selengkapnya bisa Anda lihat pada halaman demo
Hanya untuk proyek skala kecil. Tidak bekerja pada selectbox dengan optgroup
.
2 Komentar
Unknown
widiih mantap mas \o/
lama ga posting nih kemana aja? sehat?
Pulung
wah banyak banget kontribusinya mas taufik ini, ahirnya select boxpun bisa di akali :-bd