Plugin WordPress untuk penggayaan pilih. Tukar gaya Pilih dengan jQuery

Perhatian! Pembangunan lanjut dan sokongan pemalam telah dihentikan kerana ia kini merupakan sebahagian daripada .

Salah satu perkara yang paling menjengkelkan (dan saya juga akan mengatakan yang dahsyat) dalam pembangunan web ialah susun atur borang html. Malangnya, tiada standard tunggal untuk memaparkan elemen bentuk tanpa mengira penyemak imbas dan sistem pengendalian, dan tidak mungkin untuk menggayakan beberapa elemen ini sewenang-wenangnya menggunakan helaian gaya berlatarkan.

Elemen bentuk html berikut tidak boleh digayakan sepenuhnya:

• senarai juntai bawah ;
  kotak semak
  ;
• suis .
• kotak muat naik fail .

Seperti yang sudah jelas dari tajuk siaran, di sini kita hanya akan bercakap tentang pilih.

Terdapat banyak penyelesaian sedia dalam bentuk pemalam jQuery untuk menggayakan senarai juntai bawah. Tetapi saya (disebabkan oleh fakta bahawa tiada pemalam yang sesuai untuk saya atas satu sebab atau yang lain) memutuskan untuk mencipta roda saya sendiri dan menulis pemalam saya sendiri, yang saya kongsikan dalam artikel ini.

Saya ingin menunjukkan dengan segera bahawa pemalam ini tidak sesuai untuk semua kemungkinan kes penggunaan pilihan(baca keburukan).

Demo pemalam

Anda boleh melihat contoh pilihan penggayaan menggunakan pemalam saya. Saya membuat reka bentuk mereka tanpa menggunakan imej.

Kelebihan

• Apabila JavaScript dilumpuhkan, pilihan standard dipaparkan.
• Saiz skrip kecil, kira-kira 4 kilobait.
• Berfungsi dalam IE6+ dan semua pelayar desktop moden.
• Keluaran sebaris.
• Mudah digayakan dengan CSS.
• Membolehkan anda menetapkan ketinggian maksimum untuk senarai lungsur turun (menggunakan sifat CSS ketinggian maksimum).
• Melaraskan lebar secara automatik jika ia tidak dinyatakan.
• Menyokong tatal roda tetikus.
• Mempunyai "kedudukan pintar", i.e. tidak melampaui bahagian halaman yang kelihatan apabila senarai dibuka.
• Mampu "menangkap" menekan kekunci Tab dan bertukar dengan anak panah pada papan kekunci.
• Menyokong atribut "kurang upaya".
• Ia juga berfungsi dengan pilihan yang ditambah/diubah secara dinamik.

keburukan

• Tidak menyokong atribut berbilang, i.e. tidak membenarkan berbilang pilihan (multiselect).
• Tidak menyokong pengumpulan item senarai (tag ).
• Tidak menyokong penukaran anak panah papan kekunci apabila senarai dikembangkan dengan klik tetikus.

Muat turun

Plugin tidak tersedia kerana ia tidak lagi relevan.

jQuery SelectBox Styler Plugin

Versi: 1.0.1 | Muat turun: 11103 | Saiz: 7 Kb | Kemaskini terakhir: 07.10.2012

Kemas kini

09/22/2012 Saya menukar skrip kepada pemalam (termasuk versi yang diminimumkan), dan juga menambah sokongan untuk menambah/menukar pilihan secara dinamik. 10/07/2012 Tingkah laku skrip tetap apabila menggunakan kaedah onchange teg .

Sambungan pemalam

Jika tapak tersebut belum lagi menyertakan jQuery, kemudian tambahkan baris berikut sebelum teg :

Sejurus selepas jQuery, masukkan fail dengan skrip:

Letakkan kod ini sebelum teg selepas fail di atas.

Apabila menukar pilihan secara dinamik, anda perlu menjalankan pencetus muat semula, contohnya:

(function($) ($(function() ($("butang").klik(function() ($("select"). find("option:nth-child(5)").attr("selected ", benar); $("select").trigger("refresh"); )) )) ))(jQuery)

Kod HTML selepas pelaksanaan pemalam

Strukturnya kelihatan seperti ini:

-- Pilih --

• -- Pilih --
• Perenggan 1
• Point 2
• Perkara 3

-- Pilih -- Perenggan 1 Point 2 Perkara 3

Kelas CSS digunakan untuk menggayakan pilihan

Untuk menggayakan pilihan dengan CSS, gunakan kelas berikut:

.selectbox	bekas induk untuk keseluruhan pilihan
.selectbox .select	pilih dalam keadaan runtuh
.selectbox.focused .select	fokus pada pilih apabila tab ditekan
.selectbox .select .text	teg bersarang untuk pilihan yang diruntuhkan sekiranya anda memasukkan imej latar belakang menggunakan teknik "pintu gelangsar".
.selectbox .trigger	sebelah kanan pilihan yang runtuh (suis bersyarat)
.selectbox .trigger .anak panah	tag bersarang untuk butang radio (anak panah)
.selectbox .dropdown	pembalut jatuh turun
.selectbox .dropdown ul	senarai juntai bawah
.selectbox li	pilih item (pilihan)
.selectbox li.selected	item pilih yang dipilih
.selectbox li.disabled	dilumpuhkan (tidak boleh dipilih) pilih item

Kesimpulan

Mencipta skrip sedemikian adalah tugas yang agak susah, kerana anda perlu mengambil kira banyak perkara yang berbeza. Saya sangat berharap tiada pepijat yang serius akan keluar. Tetapi jika ya, beritahu saya dalam ulasan.

Hello, habrausers dan hanya pembaca. Baru-baru ini, saya tertanya-tanya cara menggunakan gaya pada teg pilihan. Semua orang mahu gaya bentuk untuk dipadankan dengan reka bentuk tapak, tetapi buat masa ini, tidak semuanya boleh diterangkan dengan CSS tulen. Dalam artikel ini, kita akan melihat contoh mudah menulis senarai pilihan kita sendiri menggunakan CSS dan perpustakaan bahasa JavaScript - jQuery. Saya fikir bahan ini akan menjadi sangat menarik untuk pemula. Sudah tentu, adalah lebih baik untuk menulis dalam JS asli, tetapi semua orang tahu bahawa akan ada lebih banyak baris kod, dan ia tidak akan menjadi lebih jelas.

Sejujurnya, sebelum mula mencipta basikal seterusnya, saya cuba mencari penyelesaian yang sama, tetapi selain daripada pembungkus div yang menakjubkan untuk tag pilihan, saya tidak menemui apa-apa. Dan saya fikir ia adalah baik untuk menulis sesuatu yang mudah dan perlu. Baiklah, mari kita mulakan!

Tiga fail mengambil bahagian dalam bulatan pemodelan plastisin kami:

• selectbox.html
• selectbox.css
• selectbox.js

Mari kita pertimbangkan mereka secara bergilir. Mula-mula, mari kita perhatikan perkara paling mudah dalam contoh ini - susun atur senarai atau fail selectbox.html:

selectbox.html

Seperti yang anda lihat daripada kod html sumber, senarai kami akan menggesa kami untuk memilih satu bulan. Sekarang pertimbangkan fail selectbox.css:

selectbox.css

div#selectBox ( lebar: 250px; kedudukan: relatif; ketinggian: 50px; jejari sempadan: 3px; sempadan: pepejal 1px kelabu muda; warna latar: #fff; warna: #333; kursor: penunjuk; limpahan: tersembunyi; peralihan: .3s; ) div#selectBox p.valueTag ( padding: 15px; cursor: pointer; transition: .2s; height: 40px; ) div#selectBox > img.arrow ( position: absolute; right: 0; width: 50px; padding : 15px; ) /* untuk pengguna Safari, Chrome dan Opera, bonus yang bagus ialah bar skrol yang digayakan. */ ::-webkit-scrollbar ( latar belakang: lutsinar; lebar: 0.5em; kedudukan: mutlak; ) ::-webkit-scrollbar-trek ( latar belakang: lutsinar; kedudukan: mutlak; z-index: -2; ) :: -webkit-scrollbar-thumb ( jejari sempadan: 100px; latar belakang: #888; ) ul#selectMenuBox ( latar belakang: #fff; peralihan: .3s; lebar: 100%; tinggi: 200px; limpahan-y: auto; limpahan- x: tersembunyi !penting; kedudukan: mutlak; margin-atas: 00px; paparan: blok; ) ul#selectMenuBox > li ( paparan: blok; padding: 10px; jejari sempadan: 00px; kursor: penunjuk; ) ul#selectMenuBox > li.option ( warna: kelabu; padding: 10px; ) ul#selectMenuBox > li.option:hover ( warna: #333; latar belakang: #e1e1e1; peralihan: .2s; )

Tiada kesulitan khusus di sini jika anda mengetahui asas susun atur dan penanda menggunakan HTML dan CSS3, masing-masing.

Dan sekarang untuk barangan! Pertimbangkan kod sumber pemalam kotak pilihan() untuk jQuery, fail selectbox.js:

selectbox.js

(function($) ($.fn.selectbox = function() ( // parameter awal // tetapkan ketinggian lalai div"a. var selectDefaultHeight = $("#selectBox").height(); // putaran imej sudut dalam div"e var rotateDefault = "putar(0deg)"; // selepas menekan butang, fungsi dicetuskan di mana // ketinggian awal div"a kita dikira. // sangat mudah untuk membandingkan dengan parameter masuk (apa yang ditetapkan pada permulaan skrip ) $("#selectBox > p.valueTag").click(function() ( // mengira ketinggian objek menggunakan kaedah height() var currentHeight = $("#selectBox" ).height(); // menyemak keadaan padanan/ tidak sepadan dengan ketinggian yang diberikan pada mulanya, // untuk memahami perkara yang perlu dilakukan seterusnya jika (currentHeight< 100 || currentHeight == selectDefaultHeight) { // если высота блока не менялась и равна высоте, заданной по умолчанию, // тогда мы открываем список и выбираем нужный элемент. $("#selectBox").height("250px"); // «точка остановки анимации» // здесь стилизуем нашу стрелку и делаем анимацию средствами CSS3 $("img.arrow").css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } // иначе если список развернут (высота больше или равна 250 пикселям), // то при нажатии на абзац с классом valueTag, сворачиваем наш список и // и присваиваем блоку первоначальную высоту + поворот стрелки в начальное положение if (currentHeight >= 250) ($("#selectBox").height(selectDefaultHeight); $("img.arrow").css((transform: rotateDefault)); ) )); // juga runtuhkan senarai apabila elemen yang dikehendaki dipilih // dan tukar teks perenggan kepada teks elemen dalam senarai $("li.option").click(function() ( $("#selectBox ").height(selectDefaultHeight); $ ("img.arrow").css((transform: rotateDefault)); $("p.valueTag").text($(this).text()); )); ); ))(jQuery);

Terdapat lebih banyak kod, tetapi ia mungkin untuk memampatkan terima kasih kepada kaedah css () dan ketinggian (). Direka sebagai pemalam untuk kemudahan dan kebolehgunaan semula. Anda boleh melakukan apa sahaja yang anda suka, asalkan ia berkesan, jadi saya tidak akan tersinggung jika seseorang mengoptimumkan tongkat saya. Untuk memanggil, hanya masukkan fail skrip luaran dan panggil pemalam seperti berikut:

$("pemilih").selectbox();
Sebelum ini, dengan memasukkan panggilan dalam kaedah ready() bagi objek dokumen, supaya pemalam dimuatkan selepas dokumen dimuatkan sepenuhnya. Anda boleh membaca lebih lanjut tentang apa itu pemalam jQuery.

Sesiapa yang terlibat secara serius dalam susun atur halaman tahu bahawa kemungkinan Penggayaan pilih CSS amat terhad. Tetapi selalunya dalam standard reka bentuk pilih tidak sesuai sama sekali, jadi anda perlu lakukan penggayaan pilih melalui JavaScript. Malah, dalam artikel ini kami bersama anda buat pilihan kami sendiri dengan JavaScript.

Terdapat banyak pemalam sedia, termasuk jQuery yang membolehkan anda melakukan semua ini. Tetapi jika anda tidak memerlukan sesuatu yang sangat rumit, maka lebih mudah untuk melakukan semuanya sendiri dari awal dengan bersih JavaScript.

Pertama sekali, mari kita buat struktur HTML masa depan kita pilih:

Elemen 1

Elemen 2

Elemen 3

Seperti yang anda lihat, tag pilih bukan dekat sini pun. Sekarang kita boleh buat apa sahaja gayakan pilihan kita sendiri dengan CSS:

Pilih(
warna latar belakang: #0ee;
jejari sempadan: 10px
pelapik: 10px 0
lebar: 200px
}
.pilih p(
kursor: penunjuk;
margin: 0;
padding: 5px 20px;
}
.pilih p.aktif(
warna latar belakang: #ee0;
}

Sudah tentu, anda boleh melakukan apa sahaja di sini. Dan akhirnya, anda perlu mengubah penampilan menjadi pilih fungsi, iaitu pemilihan dan penyerlahan hanya satu elemen daripada beberapa, serta penyerahan seterusnya bersama-sama borang. Untuk ini kami akan gunakan JavaScript:

Pilih fungsi(elemen) (
var value = element.getAttribute("data-value"); // Baca nilai elemen yang dipilih
var nodes = element.parentNode.childNodes; // Dapatkan semua elemen lain
untuk (var i = 0; i< nodes.length; i++) {
/* Tapis teks luar dan elemen input */
if (nod[i] instanceof HTMLParagraphElement) (
/* Tambahkan aktif pada elemen yang dipilih, memadamkan kelas ini daripada semua yang lain */
jika (nilai == nod[i].getAttribute("data-value")) nod[i].className = "aktif";
nod[i].className = "";
}
}
document.getElementById("my_select").nilai = nilai; // Tetapkan medan tersembunyi kepada nilai yang dipilih
}

Perkara utama pelaksanaan fungsi pilih adalah medan tersembunyi, di mana nilai daripada kami pilih. Dan ini adalah nilai yang akan dihantar apabila borang diserahkan.

Dengan cara yang mudah, sama sekali JavaScript pilih gaya. Jika menggunakan jQuery, maka kod itu akan menjadi lebih mudah.

Semestinya standard pilih mempunyai lebih banyak fungsi. Sebagai contoh, ia bertindak balas kepada tab, anda juga boleh lelaran melalui elemen dengan anak panah pada papan kekunci. Tetapi anda juga boleh melaksanakan semua ini jika perlu pada JavaScript.

Dan cadangan terakhir. Teg telah digunakan dalam kod tiada skrip dan ia bukan kebetulan. Kerana bukan semua orang JavaScript didayakan, dan agar borang itu berfungsi secara umum untuk pengguna sedemikian, anda perlu memaparkan sekurang-kurangnya standard pilih. Dan setiap orang yang mempunyai JavaScript dihidupkan, mereka akan melihat keindahan kita pilih.

Kira-kira setahun yang lalu, saya telah membuat semakan terperinci tentang pemalam jQuery untuk pilihan penggayaan. Hasilnya mengecewakan, setiap daripada mereka mempunyai kelemahannya, dan saya tidak dapat mencari apa yang saya mahukan. Sebilangan besar pembangun menyahlanggan dalam ulasan, tetapi kami semua bersetuju bahawa tiada pemalam yang ideal, dan mana-mana daripada mereka perlu diusahakan dengan fail.

Baru-baru ini, Selectik melompat pada Habré - pemalam yang cukup bagus, tetapi bukan tanpa kelemahan. Mengusahakannya, berdasarkan GitHub, masih dalam proses, tetapi setakat ini ia tidak begitu mudah, dan masalah utamanya masih wujud.

Baru-baru ini, orang yang tidak dikenali menulis kepada saya dan meminta saya untuk menguji pemalam ikSelectnya, yang dia cuba tulis sedekat mungkin dengan yang ideal. Saya sangat menyukai pemalam itu sehingga selepas ujian yang meluas dan pembetulan pepijat, saya memutuskan untuk menulis ulasan mengenainya dan menamatkan topik ini, serta membantu pembangun pintar mendapatkan Habr.

Secara ringkasnya: ia boleh melakukan hampir semua perkara yang boleh dilakukan oleh pilihan standard, sementara ia digayakan dengan sempurna dan disesuaikan dengan spesifikasi pelaksanaan pilihan dalam penyemak imbas yang berbeza. Pemalam menyalin sepenuhnya rupa pilihan Mac OS X asli, tetapi ia boleh digayakan menggunakan css tanpa sebarang masalah.

Inilah yang kelihatan seperti ditutup:

Seperti ini di tempat terbuka:

Mengapa dia lebih baik daripada yang lain?

Kelantangan: 11KB

Kelebihan:

• berfungsi dalam semua penyemak imbas (IE6+, FF, Opera, Chrome, Safari), termasuk mudah alih
• melaraskan lebar secara automatik
• sentiasa dibuka pada bahagian halaman yang kelihatan (yang dipanggil "kedudukan pintar"), kedua-duanya dalam kedudukan mendatar dan menegak
• membolehkan anda menetapkan ketinggian maksimum senarai juntai bawah
• membolehkan anda mengumpulkan pilihan (optgroup)
• dikawal sepenuhnya daripada papan kekunci (termasuk bertindak balas kepada Tab peralihan "ohm, PgUp, PgDown, Home, End)
• mempunyai pilihan dengan huruf pertama (bukan hanya oleh satu, tetapi juga oleh yang berikutnya)
• menyokong menatal dengan roda tetikus
• disisipkan sebaris (sebaris-blok)
• berfungsi hebat dengan senarai besar (1000+ item)
• meninggalkan pilihan lalai apabila javascript dilumpuhkan
• mempunyai API yang hebat

Kelemahan:

• tidak membenarkan memilih beberapa item sekaligus (berbilang pilih)
• tidak menggayakan bar skrol senarai juntai bawah (kerana ia menjejaskan kelajuan kerja terlalu banyak)
• jangan lari untuk bir

pelayar mudah alih

Pemalam menggayakan medan itu sendiri, tetapi memanggil gelagat penyemak imbas asli apabila diklik. Diuji pada iOS (Safari) dan Android (2.3 asli, Firefox):

Dalam Opera mini, pilihan standard kekal, untuk mengelakkan memuatkan semula halaman semasa membuka senarai. Dalam mudah alih Opera, ia berfungsi dengan cara yang sama seperti dalam versi desktop.

Perhatian! Pembangunan lanjut dan sokongan pemalam telah dihentikan kerana ia kini merupakan sebahagian daripada .

Salah satu perkara yang paling menjengkelkan (dan saya juga akan mengatakan yang dahsyat) dalam pembangunan web ialah susun atur borang html. Malangnya, tiada standard tunggal untuk memaparkan elemen bentuk tanpa mengira penyemak imbas dan sistem pengendalian, dan tidak mungkin untuk menggayakan beberapa elemen ini sewenang-wenangnya menggunakan helaian gaya berlatarkan.

Elemen bentuk html berikut tidak boleh digayakan sepenuhnya:

• senarai juntai bawah ;
  kotak semak
  ;
• suis .
• kotak muat naik fail .

Seperti yang sudah jelas dari tajuk siaran, di sini kita hanya akan bercakap tentang pilih.

Terdapat banyak penyelesaian sedia dalam bentuk pemalam jQuery untuk menggayakan senarai juntai bawah. Tetapi saya (disebabkan oleh fakta bahawa tiada pemalam yang sesuai untuk saya atas satu sebab atau yang lain) memutuskan untuk mencipta roda saya sendiri dan menulis pemalam saya sendiri, yang saya kongsikan dalam artikel ini.

Saya ingin menunjukkan dengan segera bahawa pemalam ini tidak sesuai untuk semua kemungkinan kes penggunaan pilihan(baca keburukan).

Demo pemalam

Anda boleh melihat contoh pilihan penggayaan menggunakan pemalam saya. Saya membuat reka bentuk mereka tanpa menggunakan imej.

Kelebihan

• Apabila JavaScript dilumpuhkan, pilihan standard dipaparkan.
• Saiz skrip kecil, kira-kira 4 kilobait.
• Berfungsi dalam IE6+ dan semua pelayar desktop moden.
• Keluaran sebaris.
• Mudah digayakan dengan CSS.
• Membolehkan anda menetapkan ketinggian maksimum untuk senarai lungsur turun (menggunakan sifat CSS ketinggian maksimum).
• Melaraskan lebar secara automatik jika ia tidak dinyatakan.
• Menyokong tatal roda tetikus.
• Mempunyai "kedudukan pintar", i.e. tidak melampaui bahagian halaman yang kelihatan apabila senarai dibuka.
• Mampu "menangkap" menekan kekunci Tab dan bertukar dengan anak panah pada papan kekunci.
• Menyokong atribut "kurang upaya".
• Ia juga berfungsi dengan pilihan yang ditambah/diubah secara dinamik.

keburukan

• Tidak menyokong atribut berbilang, i.e. tidak membenarkan berbilang pilihan (multiselect).
• Tidak menyokong pengumpulan item senarai (tag ).
• Tidak menyokong penukaran anak panah papan kekunci apabila senarai dikembangkan dengan klik tetikus.

Muat turun

Plugin tidak tersedia kerana ia tidak lagi relevan.

jQuery SelectBox Styler Plugin

Versi: 1.0.1 | Muat turun: 11103 | Saiz: 7 Kb | Kemaskini terakhir: 07.10.2012

Kemas kini

09/22/2012 Saya menukar skrip kepada pemalam (termasuk versi yang diminimumkan), dan juga menambah sokongan untuk menambah/menukar pilihan secara dinamik. 10/07/2012 Tingkah laku skrip tetap apabila menggunakan kaedah onchange teg .

Sambungan pemalam

Jika tapak tersebut belum lagi menyertakan jQuery, kemudian tambahkan baris berikut sebelum teg :

Sejurus selepas jQuery, masukkan fail dengan skrip:

Letakkan kod ini sebelum teg selepas fail di atas.

Apabila menukar pilihan secara dinamik, anda perlu menjalankan pencetus muat semula, contohnya:

(function($) ($(function() ($("butang").klik(function() ($("select"). find("option:nth-child(5)").attr("selected ", benar); $("select").trigger("refresh"); )) )) ))(jQuery)

Kod HTML selepas pelaksanaan pemalam

Strukturnya kelihatan seperti ini:

-- Pilih --

• -- Pilih --
• Perenggan 1
• Point 2
• Perkara 3

-- Pilih -- Perenggan 1 Point 2 Perkara 3

Kelas CSS digunakan untuk menggayakan pilihan

Untuk menggayakan pilihan dengan CSS, gunakan kelas berikut:

.selectbox	bekas induk untuk keseluruhan pilihan
.selectbox .select	pilih dalam keadaan runtuh
.selectbox.focused .select	fokus pada pilih apabila tab ditekan
.selectbox .select .text	teg bersarang untuk pilihan yang diruntuhkan sekiranya anda memasukkan imej latar belakang menggunakan teknik "pintu gelangsar".
.selectbox .trigger	sebelah kanan pilihan yang runtuh (suis bersyarat)
.selectbox .trigger .anak panah	tag bersarang untuk butang radio (anak panah)
.selectbox .dropdown	pembalut jatuh turun
.selectbox .dropdown ul	senarai juntai bawah
.selectbox li	pilih item (pilihan)
.selectbox li.selected	item pilih yang dipilih
.selectbox li.disabled	dilumpuhkan (tidak boleh dipilih) pilih item

Kesimpulan

Mencipta skrip sedemikian adalah tugas yang agak susah, kerana anda perlu mengambil kira banyak perkara yang berbeza. Saya sangat berharap tiada pepijat yang serius akan keluar. Tetapi jika ya, beritahu saya dalam ulasan.