jQuery gaya rata pemalam pengindahan kotak drop-down FancySelect panduan penggunaan_jquery

FancySelect ialah pemalam pengindahan kotak lungsur jQuery yang kecil dan praktikal. Pemalam pengindahan kotak drop-down ini menggunakan gaya reka bentuk rata dan merupakan salah satu pemalam pengindahan kotak drop-down pilihan pertama untuk pembangun yang mengejar fesyen.

Cara menggunakan

struktur HTML

FancySelect sangat mudah digunakan dan boleh digunakan bersama-sama dengan jQuery atau Zepto. Letakkan beberapa komponen kotak lungsur pada halaman, dan kemudian panggil pemalam kotak lungsur melalui kaedah .fancySelect(). Jika pilihan dalam kotak lungsur turun tidak mempunyai nilai, pemalam akan menggunakan beberapa jenis teks pemegang tempat untuk menggantikannya.

Secara lalai, FancySelect hanya menggunakan kotak lungsur turun asli dan gaya pada peranti iOS. Jika anda ingin mengatasinya, tetapkan forceiOS kepada benar apabila pemalam kotak lungsur dimulakan.

FancySelect juga boleh menentukan gaya melalui atribut kelas data bagi elemen

Salin kod Kod adalah seperti berikut:

Pilih sesuatu…
Lorem
Ipsum
Dolor
Duduk
Amet

JAVASCRIPT

Salin kod Kod adalah seperti berikut:

$('.basic').fancySelect();

Pilihan kemas kini

Jika pilihan kotak lungsur turun anda diubah suai selepas pemalam dimulakan, anda boleh memberitahu pemalam untuk mengemas kini senarai pilihan dengan mencetuskan kaedah update.fs pada kotak lungsur.

Salin kod Kod adalah seperti berikut:

var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('');
mySelect.trigger('update.fs');

Dayakan/lumpuhkan kotak lungsur turun

Pemalam kotak lungsur FancySelect akan secara automatik menetapkan kotak lungsur ke keadaan dilumpuhkan selepas pemulaan. Jika anda perlu menetapkan semula keadaan kotak lungsur, anda boleh menggunakan kaedah enable.fs atau disable.fs pada elemen pilih untuk mengubah suainya.

Salin kod Kod adalah seperti berikut:

Pilihan Pertama
Pilihan Kedua

var mySelect = $('.my-select');
mySelect.fancySelect(); // pada masa ini dilumpuhkan kerana sifat html
// nanti…
mySelect.trigger('enable.fs'); // kini didayakan
// malah kemudian...
mySelect.trigger('disable.fs'); // kini dilumpuhkan semula

Jika anda perlu mencipta beberapa kesan yang diperibadikan, anda boleh menggunakan kaedah triggerTemplate dan triggerTemplate, yang kedua-duanya mengembalikan rentetan HTML melalui pilihan pilihan:

Salin kod Kod adalah seperti berikut:

Pijar
CFL
Halogen

$('.bulbs').fancySelect({
optionTemplate: function(optionEl) {
          return optionEl.text() '
'; } })

Anda boleh mendengar acara change.fs apabila pilihan kotak lungsur berubah:

Salin kod Kod adalah seperti berikut:

    Pilihan Pertama
    Pilihan Kedua

var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
    $(this).trigger('change.$');
}); // mencetuskan peristiwa perubahan DOM apabila menukar FancySelect