Plugin jQuery Custom Select Box

Plugin jQuery Custom SelectBox

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:

Lihat Demo Unduh Plugin Unduh Plugin (Minified) Unduh CSS Unduh CSS (Minified)

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

Pilihan Modifikasi Kelas

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.