Schimbați stilul Selectați folosind jQuery. IkSelect - pluginul perfect pentru stilul selectează Beautiful select jquery

Atenţie! Dezvoltare în continuare iar suportul pentru plugin a fost oprit din cauza faptului că acum face parte din .

Unul dintre cele mai neplăcute (și aș spune chiar teribile) lucruri în dezvoltarea web este aspectul formularelor html. Din păcate, nu există un standard uniform pentru afișarea elementelor de formular, indiferent de browser și sistem de operare, așa cum nu există nicio modalitate de a personaliza unele dintre aceste elemente folosind foi de stil în cascadă.

Următoarele elemente de formular HTML nu pot fi stilate complet:

• lista drop-down;
• caseta de selectare;
• comutator.
• câmp pentru trimiterea unui fișier.

După cum reiese deja din titlul postării, aici vom vorbi doar despre selecții.

Există multe soluții gata făcute sub formă de pluginuri jQuery pentru stilarea listelor drop-down. Dar eu (din cauza faptului că niciunul dintre pluginuri nu mi se potrivea dintr-un motiv sau altul) am decis să merg prin a-mi reinventa propria roată și am scris propriul plugin, pe care îl împărtășesc în acest articol.

Aș dori să notez imediat că acest plugin nu este potrivit pentru toate cazurile posibile de utilizare a selectărilor (citiți dezavantaje).

Puteți vedea un exemplu de stil selector folosind pluginul meu. Le-am proiectat fără a folosi imagini.

• Când JavaScript este dezactivat, se afișează selectoare standard.
• Scriptul este de dimensiuni mici, aproximativ 4 kiloocteți.
• Funcționează în IE6+ și în toate browserele desktop moderne.
• Afișat în linie.
• Stilizat cu ușurință folosind CSS.
• Vă permite să setați înălțimea maximă pentru lista derulantă (proprietatea CSS max-height).
• Reglează automat lățimea dacă nu este specificată.
• Acceptă derularea rotiței mouse-ului.
• Are „poziționare inteligentă”, adică nu depășește partea vizibilă a paginii la deschiderea listei.
• Poate „prinde” apăsând tasta Tab și comuta cu săgețile de pe tastatură.
• Acceptă atributul „dezactivat”.
• De asemenea, funcționează cu selecții adăugate/modificate dinamic.

• Nu acceptă atributul multiplu, de ex. nu permite selectarea mai multor elemente (multi-select).
• Nu acceptă gruparea elementelor din listă (etichetă).
• Nu acceptă comutarea cu tastele săgeți de pe tastatură atunci când lista este deschisă făcând clic cu mouse-ul.

Pluginul nu este disponibil deoarece nu mai este relevant.

Versiune: 1.0.1 | Descărcări: 11103 | Dimensiune: 7 KB | Ultima actualizare: 07.10.2012

Dacă site-ul nu are încă activat jQuery, adăugați următoarea linie înainte de etichetă:

Imediat după jQuery, includeți fișierul cu scriptul:

(funcție($) ( $(funcție() ( $("selectați").selectbox(); )) ))(jQuery)

Plasați acest cod înaintea etichetei după fișierele de mai sus.

Când schimbați dinamic selecțiile, trebuie să activați declanșatorul de reîmprospătare, de exemplu:

(funcție($) ( $(funcție() ( $(„buton”).click(funcție() ( $(„selectați”).find(„opțiune:nth-child(5)”).attr(„selectat ", adevărat); $("selectați").trigger("reîmprospătare"); )) )) ))(jQuery)

Structura sa arată astfel:

-- Selectați --

• -- Selectați --
• Punctul 1
• Punctul 2
• Punctul 3

Pentru a emite selecții cu folosind CSS, utilizați următoarele clase:

Crearea unui astfel de script este o sarcină destul de minuțioasă, deoarece trebuie să țineți cont de multe puncte diferite. Chiar sper că nu vor apărea erori serioase. Dar, dacă este ceva, vă rog să-mi spuneți în comentarii.

Bună ziua, Habrausers și doar cititori. Relativ recent m-am întrebat cum să aplic stiluri etichetei select. Toată lumea vrea ca stilul formularului să se potrivească cu designul site-ului, dar nu totul poate fi încă descris cu CSS pur. În acest articol ne vom uita la un exemplu simplu de scriere a propriei liste de selectare folosind CSS și biblioteca de limbaj JavaScript - jQuery. Cred că în special începătorii vor fi interesați de acest material. Desigur, ar fi mai bine să-l scrieți în JS nativ, dar toată lumea știe că ar fi mai multe linii de cod și cu greu ar fi mai clar.

Sincer să fiu, înainte de a începe să creez următoarea bicicletă, am încercat să găsesc o soluție similară, dar nu am putut găsi altceva decât ambalaje div spectaculoase pentru eticheta select. Și m-am gândit că ar fi bine să scriu ceva simplu și necesar. Ei bine, să începem!

Cercul nostru de modelare cu plastilină implică trei fișiere:

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

selectbox.html

Lună

• ianuarie
• februarie
• martie
• aprilie
• mai
• iunie
• iulie
• august
• septembrie
• octombrie
• noiembrie
• decembrie

selectbox.css

div#selectBox ( lățime: 250px; poziție: relativă; înălțime: 50px; chenar-radius: 3px; chenar: solid 1px gri deschis; culoarea fundal: #fff; culoare: #333; cursor: pointer; overflow: ascuns; tranziție: .3s; ) div#selectBox p.valueTag ( padding: 15px; cursor: pointer; tranziție: .2s; înălțime: 40px; ) div#selectBox > img.arrow (poziție: absolut; dreapta: 0; lățime: 50px; padding : 15px ) /* pentru utilizatorii Safari, Chrome și Opera un bonus frumos este o bară de defilare stilizată. */ ::-webkit-scrollbar ( fundal: transparent; lățime: 0,5 em; poziție: absolut; ) ::-webkit-scrollbar-track ( fundal: transparent; poziție: absolut; z-index: -2; ) :: -webkit-scrollbar-thumb ( chenar-rază: 100px; fundal: #888; ) ul#selectMenuBox ( fundal: #fff; tranziție: .3s; lățime: 100%; înălțime: 200px; overflow-y: auto; overflow- x: ascuns !important; #333; fond: #e1e1e1;

Acum, la bunătăți! Să luăm în considerare cod sursă plugin selectbox() pentru jQuery, fișier selectbox.js:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // parametrii initiali // seteaza inaltimea standard a div"a. var selectDefaultHeight = $("#selectBox").height(); // rotatia imaginii angle in div"e var rotateDefault = "rotate(0deg)"; // după apăsarea butonului, este declanșată o funcție în care // se calculează înălțimea inițială a div"a nostru // foarte convenabil pentru comparație cu parametrii de intrare (ce este setat la începutul scriptului ) $("#selectBox > p.valueTag").click(function() ( // calculând înălțimea obiectului folosind metoda height() var currentHeight = $(). "#selectBox").height(); // verificarea condiției pentru potrivire/ nu se potrivește la început cu înălțimea dată, // pentru a înțelege ce trebuie făcut în continuare dacă (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)); ) ));

fișier extern
script și apelați pluginul astfel:

$("selector").selectbox();

Mai întâi, includeți un apel în metoda ready() a obiectului document, astfel încât pluginul să fie încărcat după ce documentul este încărcat complet. Puteți afla mai multe despre ce este un plugin jQuery.

Recent, un străin mi-a scris și mi-a cerut să-i testez pluginul ikSelect, pe care a încercat să-l scrie cât mai aproape de ideal. Mi-a plăcut atât de mult pluginul încât, după teste ample și remediere a erorilor, am decis să scriu o recenzie a acestuia și să pun capăt acestui subiect, precum și să ajut un dezvoltator inteligent să intre în hub.

Pe scurt: poate face aproape tot ceea ce poate face un select standard, fiind în același timp perfect stilizat și ajustat la specificul implementării selectului browsere diferite. Pluginul copiază complet aspect nativ Mac OS X select, dar poate fi stilat prin CSS fără probleme.

Iată cum arată când este închis:

Așa în deschis:

Avantaje:

• funcționează în toate browserele (IE6+, FF, Opera, Chrome, Safari), inclusiv în cele mobile
• ajustează automat lățimea
• se deschide întotdeauna către partea vizibilă a paginii (așa-numita „poziționare inteligentă”), atât pe orizontală, cât și pe verticală
• vă permite să setați înălțimea maximă a listei derulante
• vă permite să grupați opțiunile (optgroup)
• controlat complet de la tastatură (inclusiv răspunsul la tranziții cu Tab, PgUp, PgDown, Acasă, End)
• are o selecție bazată pe primele litere (nu numai una, ci și pe cele ulterioare)
• acceptă derularea cu rotița mouse-ului
• inserat inline (inline-block)
• funcționează excelent cu liste uriașe (1000+ articole)
• lasă selectarea standard când javascript este dezactivat
• are un API grozav

• nu permite selectarea mai multor elemente simultan (multiselect)
• nu stilizează bara de derulare a listei derulante (pentru că afectează prea mult viteza)
• nu aleargă după bere

În Opera mini rămân selectoare standard pentru a evita reîncărcarea paginii la deschiderea unei liste. În Opera mobil funcționează la fel ca în versiunea desktop.

Oricine se ocupă serios de aspectul paginii știe că opțiunile de stil pentru select în CSS sunt extrem de limitate. Dar de foarte multe ori selecția standard nu se încadrează deloc în design, așa că trebuie să stilați selecția folosind JavaScript. De fapt, în acest articol vom crea propria noastră selecție folosind JavaScript.

Există o mulțime de pluginuri gata făcute, inclusiv cele jQuery, care vă permit să faceți toate acestea. Dar dacă nu aveți nevoie de ceva super complex, atunci este mai ușor să faceți totul de la zero folosind JavaScript pur.

Mai întâi de toate, să creăm structura HTML a viitoarei noastre selecții:

Elementul 1
Elementul 2
Elementul 3

Elementul 1

Elementul 2

Elementul 3

După cum puteți vedea, nu există nicio etichetă selectată aici. Acum putem stila selecția personalizată așa cum dorim, folosind CSS:

Selectați (
culoare de fundal: #0ee;
chenar-rază: 10px;
umplutură: 10px 0;
lățime: 200px;
}
.selectați p(
cursor: pointer;
marja: 0;
umplutură: 5px 20px;
}
.selectați p.activ (
culoare de fundal: #ee0;
}

Bineînțeles, poți face ce vrei aici. Și, în cele din urmă, trebuie să transformăm aspectul în funcționalitate selectată, adică selectând și evidențiind doar un element din mai multe, apoi trimiterea acestuia împreună cu formularul. Pentru a face acest lucru vom folosi JavaScript:

Funcție select(element) (
var value = element.getAttribute("data-value"); // Citiți valoarea elementului selectat
var nodes = element.parentNode.childNodes; // Obține toate celelalte elemente
pentru (var i = 0; i< nodes.length; i++) {
/* Filtrează textul străin și elementele de intrare */
if (noduri[i] instanță de HTMLParagraphElement) (
/* Adăugați activ la elementul selectat, ștergând această clasă din toate celelalte */
if (valoare == nodes[i].getAttribute("data-value")) nodes[i].className = "activ";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = valoare; // Setați câmpul ascuns la valoarea selectată
}

Cheia pentru implementarea funcționalității select este câmpul ascuns, care stochează valoarea din selectul nostru. Și aceasta este valoarea care va fi trimisă la depunerea formularului.

Acesta este un mod simplu de a face absolut orice stil selectat în JavaScript. Dacă utilizați jQuery, codul va fi și mai simplu.

Desigur, selecția standard are mai multe funcționalități. De exemplu, răspunde la tab și puteți folosi și tastele săgeți de pe tastatură pentru a naviga prin elemente. Dar puteți implementa toate acestea și în JavaScript, dacă este necesar.

Și ultima recomandare. Codul a folosit eticheta noscript și nu a fost un accident. Deoarece nu toată lumea are JavaScript activat și pentru ca formularul să funcționeze deloc pentru astfel de utilizatori, trebuie să afișați cel puțin o selecție standard . Și toți cei care au JavaScript activat vor vedea frumoasa noastră selecție.

Când creează un site web, fiecare webmaster încearcă să-și facă creația să fie citită în mod egal în toate browserele, iar acest lucru cauzează uneori probleme. Prin urmare, în această lecție vom vorbi despre crearea și stilizarea unui element de site, cum ar fi select sau, mai simplu spus, un buton de selecție. Ne vom uita la mai multe scripturi care vor transforma un element obișnuit selectaîntr-un control al site-ului mai elegant și mai funcțional, care se afișează corect în browsere diferite. Deci, să vedem ce avem...

SURSE

În lecție vom folosi HTML5, așa că în primul rând creăm un marcaj HTML, care arată astfel:

Creați un element de selectare pentru site | Demonstrație de pe site-ul web




Alegeți-vă Selectați un produs Fișă cu informații despre web design CMS+șabloane, plugin-uri Lecții interesante despre crearea de site-uri web Știri RSS de pe blogul nostru sunt întotdeauna în apropiere

În continuare, să ne uităm la unele atribute, de exemplu, atributul date sunt folosite pentru a combina informații în elemente de opțiune. Acestea conțin o pictogramă a produsului și o descriere text cu formatare. Ambele elemente vor apărea în versiunea noastră a elementului select.

Acum conectăm efectele, jQuery verifică elementul selectași, folosind atribute de date, creează un marcaj care este adăugat imediat după element selecta:

Selectați produsul

• JavaScript + jQuery pentru începători în format video urmăriți prezentarea video
• PHP + MySQL pentru începători cumpăra
• WordPress - blog profesional într-o singură zi descărcare
• Joomla - site web profesional într-o singură zi cumpăra

Meniul nostru va construi o listă neordonată de articole li, care reprezintă fiecare articol opţiune din element selecta.

Acum să ne uităm la JavaScript-ul nostru, care va anima fără probleme elementul nostru:

$(document).ready(function())( // Elementul select care va fi înlocuit: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",( width: select.outerWidth() , className: "tzSelect", html: "" )); var dropDown = $(");

",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Circula prin elementul select original select.find("option").each(function(i)( var option = $(this); if(i==select.attr("selectedIndex"))( selectBox.html(option.text());) // Deoarece este folosit jQuery 1.4.3, putem accesa // datele HTML5 atribute folosind metoda data() if(option.data("skip"))(return true; ) // Creați un element derulant conform // cu pictograma de date și atributele de date HTML5: var li = $("
• ",(html: " "+ option.data("html-text")+"" )); li.click(function())( selectBox.html(option.text()); dropDown.trigger("hide"); // Când se întâmplă clic, reflectăm și // modificări ale elementului select: select.val(option.val()); select.hide().after(selectBoxContainer); / Leagă evenimente personalizate afișați și ascundeți în elementul dropDown: dropDown.bind("show",function())( if(dropDown.is(":animated"))( return false; ) selectBox.addClass("expanded"); dropDown.slideDown () ; )).bind("hide",function())( if(dropDown.is(":animated"))( return false; ) selectBox.removeClass("expanded"); dropDown.slideUp(); ) ).bind ("toggle",function())( if(selectBox.hasClass("expanded"))( dropDown.trigger("hide"); ) else dropDown.trigger("show"); ));

  selectBox.click(function())( dropDown.trigger("toggle"); return false; )); // Dacă faceți clic pe butonul mouse-ului oriunde în pagină în timp ce elementul dropDown este deschis, // acesta va fi ascuns: $(document).click(function())( dropDown.trigger("hide"); )); )); selecta Acum o mică nuanță, atunci când ne creăm elementul, elementul original

  salvat, va fi ascuns folosind metoda hide(). Acest lucru nu este mai puțin important, deoarece toate schimbările se reflectă în el. Apoi ne uităm la noi Stiluri CSS

  #pagină( lățime:490px; margine:50px automat; ) #pagina h1( greutatea fontului:normal; text-indent:-99999px; overflow:hidden; background:url("../img/your_product.png") nu -repeat; width:490px height:36px; ) #page form( margin:20px auto; width:460px; ) .tzSelect( /* Container pentru noul element select */ height:34px; display:inline-block; - width:460px; position:relative; /* Preîncărcați imaginea de fundal pentru elementele drop-down */ background:url("../img/dropdown_slice.png") no-repeat -99999px .tzSelect .selectBox( position:absolute; :100%; width:100% /* Setarea fontului: 13px/34px "Lucida Sans Unicode", sans-serif:1px 0 # EEEEEE; ; /* Folosind mai multe fundaluri CSS3 */ background:url("../img/select_slice.png") repeat-x #ddd background-image:url("../img/select_slice. png"),url(; "../img/select_slice.png"),url("../img/select_slice.png"),url("../img/select_slice.png");poziție de fundal: 0 -136px, dreapta - 204px, 50% -68px, 0 0; background-repeat: fără repetare, fără repetare, fără repetare, repetare-x; cursor:pointer;

  -moz-border-radius:3px; -webkit-border-radius:3px; chenar-raza:3px; ) .tzSelect .selectBox:hover, .tzSelect .selectBox.expanded( background-position:0 -170px, dreapta -238px, 50% -102px, 0 -34px; color:#2c5667; text-shadow:1px 1px 0 #9bc2d0 ) Acest exemplu folosește multe imagini transparente care sunt suprapuse una pe una. Multiplu imagini de fundal

  TzSelect .dropDown( poziție: absolut; sus:40px; stânga:0; lățime:100%; chenar:1px solid #32333b; border-width:0 1px 1px; list-style:none; -moz-box-sizing:border -box-box-sizing:border-box -moz-box-shadow:0 0 4px #111 ) .tzSelect li( height:85px; relative; /* Folosind mai multe fundaluri CSS3 */ background:url("../img/dropdown_slice.png") repeat- x #222 background-image:url("../img/dropdown_slice.png"),url ("../img/dropdown_slice.png"),url("../img/dropdown_slice.png"); fundal-poziție: 50% -171px, 0 -85px, 0 0: nu se repetă; , fără repetare, repetare-x ) .tzSelect li:hover( poziție de fundal: 50% -256px, 0 - 85px, 0 0; ) .tzSelect li span( stânga:88px; poziție:absolut; sus:27px; ) .tzSelect li i( color:#999999; display:block; font-size:12px; ) .tzSelect li img( left:9px; position:absolute;top:13px)

  Folosind dimensiunea cutiei, trebuie să îi atribuim o valoare cutie-chenar, acest lucru va împiedica creșterea lățimii totale, deoarece fragmentele noastre sunt plasate în interiorul elementului. Asta e tot, au fost create elementele noastre de selecție îmbunătățite, mult succes cu experimentele tale.