JQuery dodatak za selektore stilova. IkSelect je idealan dodatak za odabir stila. Zašto je bolji od ostalih?

Funkcija renderiranja uzima element opcije (koji se nalazi u odabiru) i vraća element li, koji dodatak povezuje na padajuću listu. Ovo rješava problem #1 iznad.

Prije nego što se pozabavimo problemom #2, da vidimo kako će se dodatak zvati:

$(document).ready(function())( $("select").tzSelect(); ));

U kodu iznad, možete vidjeti da je dodatak primijenjen na svaki element odabira. Ovim elementima se može pristupiti pomoću ovog objekta, koji se prosljeđuje dodatku.

Vrati this.each(function())( // ključna riječ "ovo" je trenutni element odabira var select = $(this); // selectBoxContainer je blok omota za ul var selectBoxContainer = $("

",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Prolazi kroz oznake opcija originalne oznake za odabir if(options.className)( dropDown.addClass(options.className ) select.find("option").each(function(i)(var option = $(this); if(i==select.attr("selectedIndex"))( selectBox.html(option.text(); )); ) // Budući da imamo jQuery 1.4.3, možete pristupiti // HTML5 atributu podataka pomoću metode data() if(option.data("skip"))( return true; ) // kreirajte pad; -down list, prema HTML5 atributima // data-icon i data-html-text var li = options.render(option())( selectBox.html(option.text()); dropDown .trigger("hide" ) // Kada se klikne, odražavamo promjene u originalnom elementu select.val(option.val()); selectBoxContainer.append(dropDown.hide() ).after(selectBoxContainer) // Povežite događaje s padajućim izbornikom: dropDown.bind("show",function()); )( if(dropDown.is(":animated") )( return false; ) selectBox.addClass("prošireno"); 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 postoji klik negdje na stranici kada je padajući popis otvoren //, onda ga sakrijte: $(document).click(function())( dropDown.trigger("hide"); )); ));

Isječak prikazan iznad je skoro identičan kodu vodiča koji ćemo danas konvertirati. Jedina primjetna razlika je u tome što dodjeljujemo $(this) varijabli odabira (red 5), dok je ranije bio $("select.makeMeFancy") (tvrdo kodirani selektor), što je značajno suzilo opseg koda.

Druga promjena je da umjesto direktnog generiranja padajućeg izbornika, pozivamo funkciju renderiranja koju smo proslijedili kao parametar (red 51).

Stavljajući sve zajedno, dobijamo puni izvorni kod dodatka:

(funkcija($)( $.fn.tzSelect = funkcija(opcije)(opcije = $.extend(( render: function(option)( return $("

• ",( html: option.text() )); ), className: "" ),options); return this.each(function())( // ključna riječ "ovo" je trenutni element odabira var select = $( this ); // selectBoxContainer - omotač bloka za ul var selectBoxContainer = $("",( width: select.outerWidth(), className: "tzSelect", html: "" )); padajući izbornik = $ ("
  ",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Prolazi kroz oznake opcija originalne oznake za odabir if(options.className)( dropDown.addClass(options.className ) select.find("option").each(function(i)(var option = $(this); if(i==select.attr("selectedIndex"))( selectBox.html(option.text(); )); ) // Budući da imamo jQuery 1.4.3, možete pristupiti // HTML5 atributu podataka pomoću metode data() if(option.data("skip"))( return true; ) // kreirajte pad; -down list, prema HTML5 atributima // data-icon i data-html-text var li = options.render(option())( selectBox.html(option.text()); dropDown .trigger("hide" ) // Kada se klikne, odražavamo promjene u originalnom elementu select.val(option.val()); selectBoxContainer.append(dropDown.hide() ).after(selectBoxContainer) // Povežite događaje s padajućim izbornikom: dropDown.bind("show",function()); )( if(dropDown.is(":animated") )( return false; ) selectBox.addClass("prošireno"); 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 postoji klik negdje na stranici kada je padajući popis otvoren //, onda ga sakrijte: $(document).click(function())( dropDown.trigger("hide"); )); )); ) ))(jQuery);

  Problem br. 3 rješavamo postavljanjem ovog dodatka u poseban fajl. Međutim, kao što sam ranije spomenuo, namjerno nismo uključili kod koji sadrži atribute podataka kako bi dodatak bio prilagođeniji mobilnim uređajima. Da biste to kompenzirali, morate proći prilagođenu funkciju renderiranja prilikom pozivanja dodatka, kao što možete vidjeti u nastavku (ovaj kod se također koristi u demo-u).

  $(document).ready(function())( $("select.makeMeFancy").tzSelect(( render: function(option)( return $("

  • ",(html: " "+ option.data("html-text")+"" )); ), className: "hasDetails" )); // pozivamo zadanu verziju $("select.regularSelect").tzSelect(); ));

    Možete koristiti ovaj dodatak tako što ćete ispustiti mapu tzSelect u svoj korijenski direktorij i uključiti jquery.tzSelect.css i jquery.tzSelect.js u svoje HTML dokumente.

    Prije otprilike godinu dana, već sam napravio detaljan pregled jQuery dodataka za odabir stilova. Rezultat je bio razočaravajući, svaki od njih je imao svoje nedostatke, a nisam mogao pronaći ono što sam želio. Dosta programera je odgovorilo u komentarima, ali svi smo se složili da ne postoji savršeni dodatak i da bilo koji od njih zahtijeva puno rada sa fajlom.

    Nedavno se Selectik pojavio na Habréu - prilično dobar dodatak, ali ne bez nedostataka. Sudeći po GitHubu, rad na njemu je još u toku, ali za sada nije baš zgodan, a njegovi glavni problemi i dalje postoje.

    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 da uradi skoro sve što može da uradi standardni izbor, dok je savršeno stilizovan i prilagođava se karakteristikama implementacije selekcije u različitim pretraživačima. Dodatak u potpunosti kopira izgled izvornog Mac OS X selektora, ali se može bez problema stilizirati putem css-a.

    Ovako to izgleda kada je zatvoreno:

    Ovako na otvorenom:
    
    

    Zašto je bolji od ostalih Volumen: 11KB?

    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
    Nedostaci:
    • 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
    Mobilni pretraživači Dodatak stilizuje samo polje, ali kada se klikne na njega, poziva se na ponašanje pretraživača. Testirano na iOS-u (Safari) i Androidu (2.3 izvorni, Firefox):

    

    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 select 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 sadrži 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.

    Pažnja! Dalji razvoj i podrška dodatka je zaustavljen 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 prikazivanje elemenata obrasca, bez obzira na pretraživač i operativni sistem, kao što ne postoji način da se neki od ovih elemenata prilagode korišćenjem kaskadnih stilova.

    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).

    Demonstracija dodatka

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

    Prednosti
    • 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.
    • Prikazano 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.
    Nedostaci
    • 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.
    Skinuti

    Dodatak nije dostupan jer više nije relevantno.

    jQuery dodatak “SelectBox Styler”

    Verzija: 1.0.1 | Preuzimanja: 11103 | Veličina: 7 KB | Posljednje ažuriranje: 10.07.2012

    Ažuriranja 22.09.2012. Pretvorena je skripta u dodatak (uključujući minimiziranu verziju), a također je dodana podrška za dinamičko dodavanje/promjenu odabira. 10.07.2012. Ispravljeno ponašanje skripte kada se koristi onchange metoda oznake. Povezivanje dodatka

    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)

    HTML kod nakon izvršenja dodatka

    Njegova struktura izgleda ovako:

    -- Odaberite --

    • -- Odaberite --
    • Stav 1
    • Tačka 2
    • Tačka 3
    -- Odaberite -- Stavka 1 Stavka 2 Stavka 3
    CSS klase koje se koriste za stiliziranje selektora

    Za stiliziranje selektora koristeći CSS, koristite sljedeće klase:

    .selectbox	roditeljski kontejner za cijeli odabir
    .selectbox .select	odaberite u skupljenom stanju
    .selectbox.focused .select	fokus na odabiru kada se pritisne tipka Tab
    .selectbox .select .text	ugniježđena oznaka za skupljeni odabir u slučaju umetanja pozadinske slike tehnikom "kliznih vrata"
    .selectbox .trigger	desna strana skupljenog odabira (uslovni prekidač)
    .selectbox .trigger .arrow	podtag za radio dugme (strelica)
    .selectbox .dropdown	omot za padajuću listu
    .selectbox .padajući meni ul	padajuće liste
    .selectbox li	odaberite stavku (opcija)
    .selectbox li.selected	odabrani odaberite stavku
    .selectbox li.disabled	onemogućeno (nije dostupno za odabir) odaberite stavku

    Zaključak

    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.

    Uključite CSS datoteku u odjeljak zaglavlja:

    .. ..

    Ako želite da koristite drugu temu, ne zaboravite da kopirate CSS datoteku u fasciklu svog projekta.

    Primjena stila na Select

    Kada koristite EasyDropDown.js, vaša oznaka ostaje jasna i intuitivna. Vi samo trebate dodati običan element odabira. Također možete onemogućiti ovaj element, dodijeliti oznaku i odrediti element koji bi trebao biti odabran prema zadanim postavkama.

    Da biste stilizirali element, samo mu dodijelite padajuću klasu. Evo primjera:

    Postavka Opcija 1 Opcija 2 Opcija 3 Opcija 4 Opcija 5

    To je sve, ne treba ti ništa drugo. Sada će vaš SELECT element biti ljepši.

    

    Ako prvo trebate odabrati element, koristite odabrani atribut. U ovom slučaju ne preporučujemo korištenje etikete, jer Prikaz može biti malo izobličen.

    ... Opcija 2 ...

    

    Također možete onemogućiti element dodavanjem atributa disabled:

    ...

    Odabir teme

    Dodatak EasyDropDown.js dolazi sa 2 teme u stilu: Metro i Flat. Da biste ih povezali, koristite HTML5 data-attribute atribut.

    Da biste primijenili drugu temu, unutar elementa SELECT upišite data-settings="("wrapperClass":"theme-name")" . Parametar naziva-teme može imati sljedeće vrijednosti: metro ili stan . primjeri:

    ...