Promjena stila Select koristeći jQuery. IkSelect - savršeni dodatak za stiliziranje odabire Beautiful select jquery

Pažnja! Dalji razvoj i podrška za dodatak je zaustavljena zbog činjenice da je sada dio .

Jedna od najneugodnijih (i rekao bih čak i strašnih) stvari u web razvoju je raspored html obrazaca. Nažalost, ne postoji jedinstveni standard za prikaz elemenata obrasca, bez obzira na pretraživač i operativni sistem, kao što ne postoji način za prilagođavanje nekih od ovih elemenata pomoću kaskadnih stilskih tablica.

Sljedeći elementi HTML obrasca ne mogu se u potpunosti stilizirati:

• padajuća lista ;
• potvrdni okvir ;
• prekidač .
• polje za slanje fajla.

Kao što je već jasno iz naslova posta, ovdje ćemo govoriti samo o odabranima.

Postoji mnogo gotovih rješenja u obliku jQuery dodataka za stiliziranje padajućih lista. Ali ja sam (zbog činjenice da mi nijedan od dodataka iz ovog ili onog razloga nije odgovarao) odlučio da ponovo izmislim svoj točak i napisao sam svoj dodatak, koji dijelim u ovom članku.

Odmah želim napomenuti da ovaj dodatak nije prikladan za sve moguće slučajeve korištenja odabira (pročitajte nedostatke).

Možete vidjeti primjer stilizovanja selektora koristeći moj dodatak. Dizajnirao sam ih bez upotrebe slika.

• Kada je JavaScript onemogućen, prikazuju se standardni selektori.
• Skripta je male veličine, otprilike 4 kilobajta.
• Radi u IE6+ i svim modernim desktop pretraživačima.
• Prikazuje se u liniji.
• Lako se stilizira pomoću CSS-a.
• Omogućava vam da postavite maksimalnu visinu za padajuću listu (CSS svojstvo max-height).
• Automatski podešava širinu ako nije navedena.
• Podržava skrolovanje točkića miša.
• Ima „pametno pozicioniranje“, tj. ne prelazi vidljivi dio stranice prilikom otvaranja liste.
• Može "uhvatiti" pritiskanje tastera Tab i prebacivanje sa strelicama na tastaturi.
• Podržava atribut "onemogućeno".
• Također radi sa dinamički dodanim/promijenjenim odabirima.

• Ne podržava višestruki atribut, tj. ne dozvoljava odabir više stavki (višestruki odabir).
• Ne podržava grupisanje stavki liste (oznaka).
• Ne podržava prebacivanje pomoću tipki sa strelicama na tastaturi kada se lista otvori klikom miša.

Dodatak nije dostupan jer više nije relevantno.

Verzija: 1.0.1 | Preuzimanja: 11103 | Veličina: 7 KB | Najnovije ažuriranje: 07.10.2012

Ako stranica još uvijek nema omogućen jQuery, dodajte sljedeći red prije oznake:

Odmah nakon jQueryja, uključite datoteku sa skriptom:

(function($) ( $(function() ( $("select").selectbox(); )) ))(jQuery)

Postavite ovaj kod ispred oznake nakon gornjih datoteka.

Kada dinamički mijenjate odabire, morate pokrenuti okidač za osvježavanje, na primjer:

(function($) ( $(function() ( $("button").click(function() ( $("select").find("option:nth-child(5)")).attr("selected ", true); $("select").trigger("refresh"); )) )) ))(jQuery)

Njegova struktura izgleda ovako:

-- Odaberite --

• -- Odaberite --
• Tačka 1
• Tačka 2
• Tačka 3

Za izdavanje bira sa koristeći CSS, koristite sljedeće klase:

Kreiranje takve skripte je prilično mukotrpan zadatak, jer morate uzeti u obzir mnogo različitih tačaka. Zaista se nadam da se neće pojaviti ozbiljne greške. Ali, ako bilo šta, javite mi u komentarima.

Zdravo, habrauzeri i samo čitaoci. Relativno nedavno sam se pitao kako primijeniti stilove na oznaku za odabir. Svi žele da stil forme odgovara dizajnu sajta, ali još uvek se ne može sve opisati čistim CSS-om. U ovom članku ćemo pogledati jednostavan primjer pisanja vlastite liste odabira koristeći CSS i JavaScript biblioteku jezika - jQuery. Mislim da će posebno početnici biti zainteresirani za ovaj materijal. Naravno, bilo bi bolje da to napišete na izvornom JS-u, ali svi znaju da bi bilo više linija koda, a teško da bi bilo jasnije.

Da budem iskren, prije nego što sam počeo kreirati sljedeći bicikl, pokušao sam pronaći slično rješenje, ali nisam mogao pronaći ništa drugo osim spektakularnih div omotača za odabranu oznaku. I mislio sam da bi bilo lijepo napisati nešto jednostavno i potrebno. Pa, počnimo!

Naš krug za modeliranje od plastelina uključuje tri datoteke:

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

selectbox.html

Mjesec

• januara
• februar
• mart
• april
• maja
• juna
• jula
• avgust
• septembra
• oktobar
• novembar
• decembar

selectbox.css

div#selectBox ( širina: 250px; pozicija: relativna; visina: 50px; granica radijusa: 3px; granica: čvrsta 1px svijetlosiva; boja pozadine: #fff; boja: #333; kursor: pokazivač; prelijevanje: skriveno; prijelaz: .3s;) div#selectBox p.valueTag (odmak: 15px; kursor: pokazivač; prijelaz: .2s; visina: 40px; ) div#selectBox > img.arrow (pozicija: apsolutna; desno: 0; širina: 50px; padding: .3s; visina: 40px; ) div#selectBox p.valueTag : 15px ) /* za korisnike Safarija, Chrome-a i Opera-a lijep bonus je stilizirana traka za pomicanje. */ ::-webkit-scrollbar (pozadina: transparentna; širina: 0.5em; pozicija: apsolutna; ) ::-webkit-scrollbar-track (pozadina: transparentna; pozicija: apsolutna; z-indeks: -2; ) :: -webkit-scrollbar-thumb ( granica-radijus: 100px; pozadina: #888; ) ul#selectMenuBox (pozadina: #fff; prijelaz: .3s; širina: 100%; visina: 200px; overflow-y: auto; overflow- x: hidden !important: absolute-top: 00px display: block ) ul#selectMenuBox > li.option (color: gray; padding: 10px; ) ul#selectMenuBox (color:hover; #333 pozadina: #e1e1e1;

Sada na dobrote! Hajde da razmotrimo izvorni kod plugin kutija za odabir() za jQuery, selectbox.js fajl:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // početni parametri // postavite standardnu ​​visinu div"a. var selectDefaultHeight = $("#selectBox").height(); // rotacija slike ugao u div"e var rotateDefault = "rotate(0deg)"; // nakon pritiska na dugme, aktivira se funkcija u kojoj se // izračunava početna visina našeg div"a // vrlo zgodno za poređenje sa ulaznim parametrima (ono što je postavljeno na početku skripte ) $("#selectBox > p.valueTag").click(function() ( // izračunavanje visine objekta pomoću metode height() var currentHeight = $(). "#selectBox").height( // provjeravanje uvjeta za podudaranje/ isprva se ne poklapa s datom visinom, // da bismo razumjeli što dalje ako (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)); ) ));

eksterni fajl
skriptu i pozovite plugin ovako:

$("selector").selectbox();

Prvo, uključite poziv u metodu ready() objekta dokumenta tako da se dodatak učita nakon što se dokument potpuno učita. Možete saznati više o tome šta je jQuery dodatak.

Nedavno mi je jedan stranac pisao i zamolio me da testiram njegov ikSelect dodatak, koji je pokušao da napiše što je moguće bliže idealnom. Dodatak mi se toliko dopao da sam nakon opsežnog testiranja i ispravljanja grešaka odlučio da napišem njegovu recenziju i stavim tačku na ovu temu, kao i da pomognem pametnom programeru da dođe do centra.

Ukratko: može učiniti gotovo sve što standardni odabir može, dok je savršeno stiliziran i prilagođen specifičnostima implementacije odabira različitim pretraživačima. Dodatak se u potpunosti kopira izgled izvorni Mac OS X selektor, ali se može bez problema stilizirati preko CSS-a.

Ovako to izgleda kada je zatvoreno:

Ovako na otvorenom:

Prednosti:

• radi u svim pretraživačima (IE6+, FF, Opera, Chrome, Safari), uključujući i mobilne
• automatski podešava širinu
• uvijek se otvara na vidljivom dijelu stranice (tzv. “pametno pozicioniranje”), i horizontalno i okomito
• omogućava vam da postavite maksimalnu visinu padajuće liste
• omogućava vam da grupišete opcije (optgroup)
• potpuno kontrolisano s tastature (uključujući odgovaranje na prijelaze pomoću Tab, PgUp, PgDown, Home, End)
• ima izbor na osnovu prvih slova (ne samo jednog, već i sljedećih)
• podržava skrolovanje pomoću točkića miša
• umetnut inline (inline-block)
• odlično radi sa ogromnim listama (1000+ stavki)
• ostavlja standardni odabir kada je javascript onemogućen
• ima odličan API

• ne dozvoljava odabir nekoliko stavki odjednom (višestruki odabir)
• ne stilizira traku za pomicanje padajuće liste (jer previše utiče na brzinu)
• ne trči po pivo

U Opera mini, standardni birači ostaju kako bi se izbjeglo ponovno učitavanje stranice prilikom otvaranja liste. U Opera mobile radi isto kao iu desktop verziji.

Svako ko se ozbiljno bavi izgledom stranice zna da su opcije stilizovanja za odabir u CSS-u izuzetno ograničene. Ali vrlo često se standardni odabir uopće ne uklapa u dizajn, tako da morate stilizirati odabir koristeći JavaScript. Zapravo, u ovom članku ćemo kreirati vlastiti odabir koristeći JavaScript.

Postoji mnogo gotovih dodataka, uključujući i jQuery, koji vam omogućavaju sve ovo. Ali ako vam ne treba nešto super složeno, onda je lakše sve napraviti sami od nule koristeći čisti JavaScript.

Prije svega, napravimo HTML strukturu našeg budućeg select :

Element 1
Element 2
Element 3

Element 1

Element 2

Element 3

Kao što vidite, ovdje ne postoji oznaka za odabir. Sada možemo stilizirati naš prilagođeni odabir kako god želimo koristeći CSS:

Odaberite (
boja pozadine: #0ee;
radijus granice: 10px;
padding: 10px 0;
širina: 200px;
}
.odaberite p(
kursor: pokazivač;
margina: 0;
padding: 5px 20px;
}
.odaberite p.aktivno (
boja pozadine: #ee0;
}

Naravno, ovdje možete raditi šta god želite. I na kraju, trebamo izgled pretvoriti u funkciju odabira, odnosno odabrati i istaknuti samo jedan element od nekoliko, a zatim ga poslati zajedno s formom. Za ovo ćemo koristiti JavaScript:

Odabir funkcije (element) (
var value = element.getAttribute("data-value"); // Čitanje vrijednosti odabranog elementa
var nodes = element.parentNode.childNodes; // Dobiti sve ostale elemente
za (var i = 0; i< nodes.length; i++) {
/* Filtrirajte suvišan tekst i elemente unosa */
if (nodes[i] instanceof HTMLParagraphElement) (
/* Dodaj aktivno odabranom elementu, brišući ovu klasu iz svih ostalih */
if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = vrijednost; // Postavite skriveno polje na odabranu vrijednost
}

Ključ za implementaciju funkcije odabira je skriveno polje, koje pohranjuje vrijednost iz našeg select . A ovo je vrijednost koja će biti poslana kada se obrazac pošalje.

Ovo je jednostavan način da napravite apsolutno bilo koji odabrani stil u JavaScript-u. Ako koristite jQuery, kod će biti još jednostavniji.

Naravno, standardni odabir ima više funkcionalnosti. Na primjer, odgovara na tab , a možete koristiti i tipke sa strelicama na tastaturi za navigaciju kroz elemente. Ali sve ovo možete implementirati iu JavaScriptu ako je potrebno.

I poslednja preporuka. Kod je koristio noscript oznaku i to nije bilo slučajno. Budući da nemaju svi omogućen JavaScript i da bi obrazac uopće funkcionirao za takve korisnike, morate prikazati barem standardni odabir . I svi koji imaju omogućen JavaScript vidjet će našu prekrasnu selekciju.

Prilikom izrade web stranice, svaki web majstor nastoji da njegova kreacija bude jednako čitana u svim pretraživačima, a to ponekad stvara probleme. Stoga ćemo u ovoj lekciji govoriti o kreiranju i stiliziranju elementa stranice kao što je odabir ili, jednostavnije rečeno, gumb za odabir. Pogledaćemo nekoliko skripti koje će transformisati regularni element izaberite u elegantniju i funkcionalniju kontrolu stranice koja se ispravno prikazuje u različitim pretraživačima. Pa da vidimo šta imamo...

IZVORI

U ovom tutorialu ćemo koristiti HTML5, tako da prije svega kreiramo HTML markup, koji izgleda ovako:

Kreirajte odabrani element za web lokaciju | Demonstracija sa web stranice




Napravite svoj izbor Odaberite proizvod Informativni list o web dizajnu CMS+šabloni, dodaci Zanimljive lekcije o kreiranju web stranica RSS vijesti sa našeg bloga su uvijek u blizini

Zatim, pogledajmo neke atribute, na primjer atribut podaci koriste se za kombinovanje informacija u elementima opcija. Sadrže ikonu proizvoda i tekstualni opis s formatiranjem. Obje ove stavke će se pojaviti u našoj verziji elementa za odabir.

Sada povezujemo efekte, jQuery provjerava element izaberite i, koristeći atribute podataka, gradi oznaku koja se dodaje odmah nakon elementa izaberite:

Odaberite proizvod

• JavaScript + jQuery za početnike u video formatu pogledajte video prezentaciju
• PHP + MySQL za početnike kupiti
• WordPress - profesionalni blog u jednom danu preuzimanje
• Joomla - profesionalna web stranica u jednom danu kupiti

Naš meni će napraviti neuređenu listu stavki li, koji predstavljaju svaku stavku opcija od elementa izaberite.

Sada pogledajmo naš JavaScript, koji će glatko animirati naš element:

$(document).ready(function())( // Select element koji će biti zamijenjen: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",( width: select.outerWidth() , className : "tzSelect", html: "" ) var dropDown = $(");

",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Petlja kroz originalni element odabira select.find("option").each(function(i)( var opcija = $(this if(i==select.attr("selectedIndex"))( selectBox.html(option.text());) // Pošto se koristi jQuery 1.4.3, možemo pristupiti // HTML5 podacima); atributi koristeći metodu data() if(option.data("skip"))(return true; ) // Kreirajte padajuću stavku prema // ikoni podataka i HTML5 atributima podataka: var li = $("
• ",(html: " "+ option.data("html-text")+"" )); li.click(function())( selectBox.html(option.text()); dropDown.trigger("hide"); // Kada događa se klikni događaj, mi također odražavamo promjene u originalnom elementu select.val() dropDown(li)); / Bind prilagođeni događaji prikaži i sakrij u dropDown element: 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; )); // Ako kliknete gumb miša bilo gdje na stranici dok je padajući element otvoren, // bit će skriven: $(document).click(function())( dropDown.trigger("hide"); )); )); izaberite Sada mala nijansa, kada kreiramo naš element, originalni element

  sačuvan, biće skriven pomoću hide() metode. To nije ništa manje važno, jer se u njemu odražavaju sve promjene. Onda pogledamo naše CSS stilovi

  #page( width:490px; margin:50px auto; ) #page h1( font-weight:normal; text-indent:-99999px; overflow:hidden; background:url("../img/your_product.png") ne -repeat:490px height:36px ) #page form(margin:20px auto; width:460px;) .tzSelect( /* Kontejner za novi element za odabir */ height:34px; - width:460px; position:relative /* Unaprijed učitavanje pozadinske slike za padajuće stavke :100% širina: 100% /* font:13px/34px "Lucida Sans Unicode", "Lucida Grande", text-shadow: 1px 1px 0 # EEEEEE; ; /* Korištenje višestrukih CSS3 pozadina */ background:url("../img/select_slice.png") repeat-x #ddd background-image:url("../img/select_slice. png"); "../img/select_slice.png"),url("../img/select_slice.png"),url("../img/select_slice.png");background-position: 0 -136px, desno - 204px, 50% -68px, 0 0; background-repeat: bez ponavljanja, bez ponavljanja, bez ponavljanja, ponavljanja-x; kursor:pokazivač;

  -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; ) .tzSelect .selectBox:hover, .tzSelect .selectBox.expanded( background-position:0 -170px, desno -238px, 50% -102px, 0 -34px; boja:#2c5667; text-shadow:1px 1px 0 #9bccd0 ; Ovaj primjer koristi mnogo prozirnih slika koje su postavljene jedna na jedna. Višestruko pozadinske slike

  TzSelect .dropDown( position:apsolute; top:40px; left:0; width:100%; border:1px solid #32333b; border-width:0 1px 1px; list-style:none; -moz-box-sizing:border -box-box-sizing:border-box:0 4px #111 ) .tzSelect li(visina:pokazivač; položaj:); relativno /* Korištenje višestrukih CSS3 pozadina */ 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"); , no-repeat, repeat-x ) .tzSelect li:hover( background-position: 50% -256px, 0 - 85px, 0 0; ) .tzSelect li span( left:88px; position:apsolute; top:27px; ) .tzSelect li i( boja:#999999; display:block; font-size:12px; ) .tzSelect li img( lijevo:9px; position:apsolute;top:13px)

  Koristeći veličine kutije, moramo mu dodijeliti vrijednost granična kutija, to će spriječiti povećanje ukupne širine jer su naši fragmenti smješteni unutar elementa. To je sve, naši poboljšani elementi selekcije su kreirani, sretno sa vašim eksperimentima.