Home » , , » Plugin JQuery Custom Select Box

Plugin JQuery Custom Select Box

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:

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 rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.custom.selectbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').customSelectBox().change(function() {
// Lakukan sesuatu di sini seperti halnya saat kita melakukan sesuatu ...
// ... dengan event `change` JQuery pada elemen selectbox
});
});
</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.

0 komentar:

Posting Komentar