Plugin jQuery Custom Select Box

Tabel Konten
  1. Penggunaan 
  2. Konfigurasi Lanjutan 
jQuery Custom SelectBox Plugin
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
OpsiKeterangan
selectboxClassNama kelas pembungkus luar
buttonClassNama kelas tombol pemicu drop down menu (penayang nilai opsi terseleksi)
selectedClassNama kelas opsi terseleksi (elemen <option> dengan atribut selected="true")
disabledClassNama kelas opsi mati (elemen <option> dengan atribut disabled="true")
focusedClassNama 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

Komentar telah ditutup.