Get best of the week

Styling Select-Option (hampir) tanpa JavaScript

Menata beberapa elemen standar adalah tugas yang tidak mudah.

Tentu saja, seorang spesialis yang baik dapat menyesuaikan dgn gaya apapun, tetapi semuanya tergantung pada kompleksitas tindakan ini.

Diperlukan sedikit waktu untuk menyesuaikan dgn mode tombol radio dan kotak centang - ide untuk menata label dengan input tersembunyi bukanlah hal baru, dan telah lama digunakan di mana-mana.

Untuk menyesuaikan dgn mode sisanya - ada JavaScript.

Hari ini saya ingin memberi tahu Anda tentang cara daftar gaya sederhana relatif sederhana dengan kode JavaScript minimal (dari 0 hingga 26 baris) dan penambahan HTML minimal.

Pilihan mudah dengan JavaScript keras (hampir)

Suatu hari, seperti yang sering terjadi, saya memiliki kebutuhan untuk membuat daftar drop-down. Namun, itu menjadi daftar drop-down hanya dalam versi mobile, sebelum itu berperilaku seperti kelompok tombol radio yang paling umum.

Jadi, ketika saya hampir selesai menulis konstruksi menyeramkan lainnya yang dirancang untuk menggantikan Select yang malang, saya punya pertanyaan:

Mengapa?

Biasanya pertanyaan ini mengarah pada penundaan yang bijak, memikirkan kembali kehidupan, dll., Tetapi kali ini ada yang tidak beres, dan saya menyadari bahwa pertanyaan itu benar-benar baik dan, yang terpenting, berguna.


Sebuah program pendidikan kecil:

Jadi, bagi mereka yang ada di dalam tangki, serta mereka yang daftar drop-downnya menyebabkan begitu banyak rasa sakit sehingga mereka memutuskan untuk melupakan mereka sebagai mimpi buruk, saya akan sedikit (sungguh-sungguh) mengingatkan Anda apa itu.

Daftar drop-down terdiri dari 2 elemen utama :

  1. Pilih - wadah untuk seluruh daftar
  2. Opsi - daftar item

Kadang-kadang OptGroup juga digunakan (sekelompok item daftar), tetapi implementasinya sejauh ini tetap dalam JavaScript.

Fungsi utama daftar drop-down adalah mengirimkan informasi tentang item yang dipilih ke server.

Untuk kelengkapan, berikut adalah daftar atribut elemen (sehingga Anda dapat memperkirakan berapa banyak dari mereka yang akan diimplementasikan):

  1. Pilih - dinonaktifkan , formulir , banyak , nama , wajib , ukuran
  2. Opsi - dinonaktifkan , label , dipilih , nilai

Tentang ini, mungkin, kita akan selesai dengan deskripsi, dan beralih ke implementasi .


Banyak kata telah ditulis, oleh karena itu - lebih dekat ke kode:

<form>
  <div class="content">
    <h3 class="title"> 0 </h3>

    <input id="selectName0" type="radio" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="radio" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="radio" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

Jadi untuk apa kode ini? (segala sesuatu yang dapat dikeluarkan saat penjelasan dihapus secara khusus)

Mari perhatikan item mana dari fungsi Select and Option yang secara otomatis menjadi mungkin karena penggunaan label input +:

  1. Pilih - formulir, nama, wajib diisi
  2. Opsi - dinonaktifkan, label, dipilih, nilai

Dan hanya itu yang harus diimplementasikan:

  1. Pilih - dinonaktifkan, banyak, ukuran
  2. Opsi - diimplementasikan sepenuhnya

Hanya dengan menambahkan bundel input + label, kami mengurangi daftar fungsi yang diperlukan dari 10 poin menjadi 3. Tidak buruk, tapi ini bukan akhirnya, kan?

Untuk mengimplementasikan item Select.multiple (pilihan ganda) - lakukan saja ini:

<form>
  <div class="content">
    <input id="selectName0" type="checkbox" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="checkbox" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="checkbox" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

Kami hanya mengubah jenis input dari Radio ke Kotak Centang , dan dapatkan analog dari beberapa yang hampir lengkap .

Perbedaannya adalah bahwa untuk beberapa pilihan Anda tidak perlu menjepit ctrl (yah, jika seseorang ingin sepenuhnya meniru fungsi - JavaScript untuk membantu).

Apa yang tersisa?

  1. Pilih - dinonaktifkan, ukuran
  2. Opsi - diimplementasikan sepenuhnya

Ya, baik Select.disabled dan Select.size sangat mudah diimplementasikan menggunakan CSS:

  • Select.size - ukuran apa yang Anda tentukan. Anda hanya perlu menambahkan wadah.
  • Select.disabled - untuk wadah, Anda perlu menambahkan pointer-events: tidak ada untuk membatalkan reaksi terhadap tindakan pengguna (melayang-layang, klik, dll.), Well, Anda dapat membuatnya sedikit transparan.

Jadi, fungsi utamanya adalah. Apa yang hilang?

Anda juga perlu menambahkan header autocomplete untuk menu drop-down dengan satu-satunya pilihan, dan juga akan ada masalah ketika mengatur ulang form (tombol Reset ), karena judul tidak akan diatur ulang. Tetapi bahkan ini sepenuhnya dapat dipecahkan (menggunakan JavaScript).


Dan sekarang - contoh:

Implementasi kecil (menu tarik-turun dengan satu pilihan):


Dan sedikit lagi (bukan menu drop-down dengan banyak pilihan):


Bonus: Saya tidak tahu mengapa saya melakukannya, tapi ... menu tarik-turun dengan satu pilihan dan setel ulang berbasis CSS:





Mengapa ini dibutuhkan?

Karena fakta bahwa berdasarkan komentar, tidak semua orang mengerti mengapa kode ini berguna, saya menganggap perlu untuk memberikan klarifikasi.

Saat menata daftar drop-down formulir:
<select>
  <option> 1</option>
  <option> 2</option>
</select>

Ada batasan gaya yang serius. Oleh karena itu, mereka diganti dengan daftar sederhana:
<ul>
  <li> 1</li>
  <li> 2</li>
</ul>

dengan mana semua fungsi yang diperlukan digantung menggunakan JavaScript.

Karena daftar pada awalnya tidak berinteraksi dengan formulir dengan cara apa pun , ini menyebabkan masalah.

Tidak hanya itu perlu untuk menerapkan semua fungsi dasar:

  • beralih poin dan interaksinya
  • negara (dicentang, dinonaktifkan)
  • mengikat ke formulir dan mengirim data ke server
  • inisialisasi data awal (pengisian otomatis)
  • form reset (ketika Anda mengklik tombol "reset", daftar harus dikembalikan ke keadaan selama inisialisasi)


Faktanya, jika ada yang rusak dalam JavaScript, itu tidak masalah, karena skrip tidak dimuat, bug muncul, membuat koreksi - jika ada masalah, daftar drop-down berubah menjadi ... sesuatu yang terlihat seperti daftar drop-down, tetapi tidak berfungsi.
Umumnya. Tidak mungkin.

Untuk pengguna, akan terlihat seperti ini: ada daftar drop-down, tetapi Anda tidak dapat bekerja dengannya.

Untuk server, ini akan terlihat lebih "menyenangkan" - formulir telah tiba di mana tidak ada cukup data. Adalah baik bahwa situasi seperti itu diramalkan sebelumnya ketika berkembang ... Lagi pula, itu sudah diramalkan, kan?


Pro dari solusi yang dihasilkan:

  • ( ), . JavaScript ( ). , — . , — / — html ( JS), .
  • . , , ( ). ul — li , .



(. , , JavaScript' / ):

  • tab
  • ( select -)
  • ( , )
  • select ( select . select)
  • , (JS )
  • ( OptGroup) (, )


Seperti yang Anda lihat, tidak ada kerugian di atas yang penting untuk sebagian besar daftar, dan jika perlu diimplementasikan menggunakan JavaScript, dan karena itu ...


Selamat datang di dunia tempat perpustakaan Anda untuk menata daftar Select-Option-like akan menjadi sedikit lebih kecil, dan bekerja dengan daftar ini tanpa pustaka akan hampir nyaman!



UPD: ternyata, dalam kasus kotak centang, atribut yang diperlukan tidak bekerja dengan benar, dan itu juga perlu ditiru menggunakan JavaScript (saat ini, semua kotak centang yang ditandai sebagai diperlukan menjadi wajib, dan hanya mereka)

More articles:


All Articles