Gaya Menu Dropdown dengan CSS dan Javascript

Dropdown memilih dalam HTML adalah beberapa item yang paling tidak ramah pengguna. Styling mereka adalah rasa sakit dan pada fungsi dasar mereka tidak terlalu berguna kecuali Anda memiliki jumlah terbatas barang dengan jumlah terbatas kebutuhan.

Di situlah Terpilih datang. Ini adalah perpustakaan javascript yang membuat dropdown pengalaman jauh lebih baik mencari, serta jauh lebih baik dari perspektif fungsionalitas juga.

Pilih… RedPurpleBlueYellowGreenBlackWhite

Di atas Anda dapat melihat fungsionalitas Pilihan yang dipilih. Kelihatannya hebat, dan secara default memiliki mekanisme pencarian sederhana untuk menyaring hasil jika Anda memiliki banyak item di dropdown Anda. Pertama, sertakan file javascript dan css. Kemudian, inisialisasi mereka dengan kode di bawah ini.

 $ (document) .ready (function () {$ (". selected"). dipilih ();}); 

Semudah itu. Sekarang mari kita lanjutkan ke level berikutnya, bagaimana jika Anda ingin dapat mengubah fungsi dropdown untuk memungkinkan beberapa pilihan? Cari "Red" di bawah, lalu tekan enter, cari "Blue", lalu tekan enter. Sekarang Anda dapat menghapusnya dengan mudah dari pilihan Anda hanya dengan menekan X atau backspace dua kali.

Pilih… RedPurpleBlueYellowGreenBlackWhite

Yang harus Anda lakukan adalah memberikan opsi kelipatan dalam panggilan pilih seperti di bawah ini. Tidak ada perubahan pada javascript, itu diinisialisasi dengan cara yang sama.

Lihat demo di bawah ini atau Anda dapat mengunduh contoh dalam zip.

Lihat Juga