Setiap orang mungkin terbiasa dengan formulir daftar drop-down pilih, tetapi formulir daftar drop-down default sering membuat beberapa situs web terasa jelek, dan sulit untuk menyesuaikan gaya SELECT dengan CSS. Oleh karena itu, banyak situs web membuat formulir drop-down tertentu yang lebih sesuai dengan gaya situs web, dan sering menggunakan JS untuk mensimulasikan efek ini.
Misalnya, Tudou.com, Taobao Mall dan Amazon semuanya adalah formulir daftar drop-down yang dibuat dengan JS.
Hasilnya jelas disatukan secara visual dengan gaya situs web secara keseluruhan, dan gaya daftar drop-down sangat indah, tetapi juga membawa beberapa reaksi yang merugikan. Karena dilakukan dengan JS, itu akan menghadapi banyak efek yang tidak terduga. Mari kita analisis cacat masing -masing melalui tiga situs web penguji:
Kotak pemilihan kategori pencarian untuk kentang membuat saya merasa aneh setiap kali saya mengklik:
1. Setelah mengklik, daftar pop-up berbeda dari yang Anda harapkan. Secara tidak sadar, itu adalah daftar drop-down, tetapi kentang memberi saya daftar mid-down.
2. Gunakan tombol atas/bawah untuk memilih secara kebiasaan, tetapi seluruh halaman digulir.
3. Dalam kemarahan, saya tidak perlu menutupnya lagi. Tekan tombol ESC, tetapi tidak ada respons.
4. Setelah menonaktifkan JS, itu sama sekali tidak tersedia.
Demikian pula, Taobao Mall juga terlihat cantik:
Kecuali untuk poin 1, yang lainnya seperti kentang, dengan masalah aksesibilitas dan ketersediaan.
Solusinya sangat sederhana, cukup gunakan kotak pilihan asli, seperti Amazon:
Mengapa tidak dianjurkan untuk menggunakan kotak pilihan khusus di halaman web?
Kotak Pilih Pilih adalah kontrol interaktif yang sangat matang. Kedewasaan berarti bahwa pengguna mudah diterima, tetapi kedewasaan juga berarti bahwa mereka mempertimbangkan dan memiliki detail interaktif yang sangat kaya. Misalnya: Respons terhadap operasi keyboard seperti PGUP/PGDN, Home/End, dan arah pop-up dari daftar drop-down dapat secara otomatis disesuaikan pada posisi yang berbeda, dll.
Menggunakan JS untuk mensimulasikan kotak seleksi membutuhkan banyak pekerjaan dan pengujian yang cermat. Bahkan jika perusahaan bersedia berinvestasi, itu masih tidak dapat menerapkan beberapa fitur kontrol asli. Misalnya: Di kotak pemilihan Amazon di atas, saya menarik browser ke level yang sangat rendah, dan daftar drop-down dapat diperpanjang di luar browser.
Untuk sedikit hidangan penutup visual, butuh banyak detail praktis untuk membuat interaksi kehilangan begitu banyak waktu, dan butuh banyak waktu untuk programmer front-end, tetapi tidak berterima kasih, yang benar-benar buruk.
PS: Untuk menggunakan kotak pilihan khusus, kondisi berikut harus dipenuhi:
1. Sama gilanya dengan Google, bersedia menghabiskan banyak waktu dan sumber daya.
2. Segera seperti Google, lakukan dengan baik dan simulasikan secara menyeluruh.
3. Terapkan pada aplikasi web.
Sayangnya, di negara itu, perusahaan gila dan teliti seperti Google atau Facebook belum muncul.