cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery gaya rata pemalam pengindahan kotak drop-down FancySelect panduan penggunaan_jquery

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

WBOY
WBOYasal
2016-05-16 16:14:341268semak imbas

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

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:


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:






$('.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:


var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
    $(this).trigger('change.$');
}); // mencetuskan peristiwa perubahan DOM apabila menukar FancySelect
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pengenalan terperinci kepada modul penimbalan dan penstriman dalam Node.js_node.jsArtikel seterusnya：Pengenalan terperinci kepada modul penimbalan dan penstriman dalam Node.js_node.js

Artikel berkaitan

Lihat lagi