Terangkan Chosen dan Select2 berserta contoh

Kita boleh menggunakan dua plugin jQuery untuk menggayakan kotak pilihan iaitu Select2 dan Chosen. Kedua-dua pemalam Select2 dan Chosen menambah baik penampilan kotak yang dipilih dan meningkatkan tingkah laku kotak, menjadikannya mesra pengguna. Selain itu, kedua-dua pemalam boleh digunakan dengan berbilang kotak terpilih serta satu kotak terpilih.

Pilih

Pemalam JavaScript untuk mencipta kotak pilihan yang mesra pengguna. Chosen tersedia dalam kedua-dua prototaip dan versi JQuery.

Ciri Terpilih

Mesra pengguna

Pengguna anda tidak perlu mengharungi banyak kemungkinan; mereka boleh mulakan dengan nama perkara yang mereka cari. Memilih alternatif hanyalah dengan menekan "Enter" atau mengklik tetikus entri yang tidak sepadan akan dialih keluar dari skrin.

Peningkatan Progresif

Memandangkan Chosen menggantikan medan Pilih HTML lalai, anda tidak perlu lagi mengambil sebarang langkah lanjut untuk menjadikannya berfungsi dalam penyemak imbas yang tidak menyokong JavaScript. Bahagian belakang juga tidak menggunakan acara untuk mengurus data.

Persediaan mudah

Hanya masukkan fail yang dipilih dalam aplikasi anda dan buka pemalam. Kumpulan pilihan, keadaan terpilih, berbilang ciri dan susunan tab penyemak imbas dihormati secara automatik oleh pilihan.

Pilih 2

Select2 menyediakan pengguna dengan kotak pilihan yang boleh disesuaikan yang boleh digunakan untuk carian, set data jauh, penanda, tatal tak terhingga dan banyak lagi sifat berguna yang lain.

Ciri-ciri Select2 ialah

Selain menyokong carian, penandaan, set data jauh, tatal tak terhingga dan banyak pilihan lain, ia juga menyediakan kotak pilihan yang boleh disesuaikan pengguna kepada pengguna.

Persekitaran RTL

Ia menyokong persekitaran RTL dan mempunyai fungsi carian terbina dalam dalam lebih 40 bahasa.

Ajax

Anda boleh menggunakan Ajax untuk mencari senarai panjang item dengan cepat.

Buat CSS boleh kulit sepenuhnya menggunakan Sass dan tema Bootstrap 3 pilihan.

Pustaka JavaScript pilihan

Untuk menggunakan pemalam yang dipilih dalam JQuery, kami perlu menambah beberapa perpustakaan seperti yang ditunjukkan di bawah -

• chosen.jquery.min.js

• Pilih .min.css

Juga untuk mengaktifkan pemalam pada kotak yang dipilih kita perlu menambah kod berikut -

$(“.chosen-select”).chosen()

Kod yang ditulis di atas ialah skrip dalam JQuery.

Pilih 2 perpustakaan JavaScript

Untuk menggunakan pemalam select2 dalam jQuery, kami perlu menambah beberapa perpustakaan seperti yang ditunjukkan di bawah -

• select2.min.js

• pilih2.min.css

Juga untuk mengaktifkan pemalam pada kotak yang dipilih kita perlu menambah kod berikut -

$(“.chosen-select”).select2()

Kod yang ditulis di atas ialah skrip dalam JQuery.

Kami telah memahami asas-asas terpilih dan pilih2, sekarang marilah kita ke intipati iaitu dalam intipati kita akan melihat perbezaan antara mereka.

Perbezaan antara Terpilih dan Terpilih2

Dua perpustakaan yang paling biasa digunakan untuk meningkatkan kotak pilihan ialah Pilih dan pilih2. Chosen lebih lama daripada Select2 dan menyokong jQuery dan Prototaip. Kedua-duanya sedang dikemas kini. Select2 diilhamkan oleh Chosen dan hanya menyokong jQuery.

Jom lihat perbezaan antara terpilih dan pilih2 -

Muat data

Apabila memuatkan data menggunakan pilihan, keseluruhan set data perlu dimuatkan sebagai teg pilihan dalam DOM, jadi pengendalian set data kecil adalah terhad. Select2, sebaliknya, menggunakan konsep fungsi untuk mencari hasil secara dinamik, membolehkan kaedah select2 memuatkan sebahagian keputusan, sekali gus menghapuskan kekurangan terpilih .

Keperluan penomboran

Seperti yang kita bincangkan dalam perkara sebelumnya, keseluruhan set data dimuatkan oleh pemilih sekaligus, yang bermaksud tidak perlu membahagikan data kepada bahagian, jadi konsep paging tidak berguna. Fungsi Select2 sebaliknya mengendalikan set data lengkap dan sebahagiannya memuatkan hasil yang diperlukan dan ia menyokong konsep paging. Apabila pengguna menatal ke bahagian bawah data semasa, ia akan memanggil fungsi carian untuk menyediakan lebih banyak data dengan memuatkannya.

Tag jenis sokongan

Satu-satunya sokongan penanda yang disediakan oleh teg pilihan ialah teks yang diberikan disokong oleh pemilihan, Select2 sebaliknya menyediakan titik sambungan yang boleh digunakan untuk membuat pelbagai penandaan untuk mewakili keputusan.

Tambah hasil

Untuk menambah hasil, Choosen dan select2 mempunyai dua pilihan, statik atau dinamik, tetapi Choose tidak boleh menambah hasil secara dinamik, manakala select2 melakukan sebaliknya dan membenarkan hasil ditambah secara dinamik dengan menggunakan teg.

Pembangunan

Sass dan CoffeeScript digunakan untuk membangunkan select, manakala JavaScript tulen dan CSS digunakan untuk membangunkan select2.

Perbezaan yang diberikan di atas adalah perbezaan utama antara Pilih dan Pilih, terdapat juga beberapa perbezaan kecil seperti saiz Pilih ialah 27KB manakala saiz Pilih 2 lebih besar iaitu 57 KB.

NOTA - Saas dan CoffeeScript didapati membuat pilihan penyahpepijatan lebih sukar.

Select2 menyokong peranti mudah alih secara terbuka, manakala Chosen sengaja melumpuhkan dirinya sendiri pada sesetengah peranti. Oleh itu, jika anda ingin menggunakan "kotak pilihan yang dikembangkan" pada peranti mudah alih, adalah disyorkan untuk menggunakan Select2.

Kesimpulan

Dalam artikel ini, kami mengetahui bahawa terdapat dua pemalam JQuery yang boleh digunakan untuk menggayakan kotak pilihan, iaitu Select2 dan Chosen. Kedua-dua pemalam Select2 dan Chosen menambah baik penampilan kotak yang dipilih dan meningkatkan tingkah laku kotak, menjadikannya mesra pengguna. Terdapat banyak perbezaan antara Select2 dan pilih, termasuk proses pemuatan data, sama ada paging diperlukan, sama ada hasil boleh ditambah secara dinamik dan kaedah pembangunan.

Atas ialah kandungan terperinci Terangkan Chosen dan Select2 berserta contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!