Pakeiskite pasirinkimo stilių naudodami jQuery. „IkSelect“ – puikus įskiepis, skirtas stiliaus atrankoms „Beautiful select jquery“.

Dėmesio! Tolesnė plėtra ir papildinio palaikymas buvo sustabdytas dėl to, kad jis dabar yra .

Vienas iš nemaloniausių (ir netgi sakyčiau baisiausių) dalykų kuriant internetą yra html formų išdėstymas. Deja, nėra vienodo formos elementų rodymo standarto, neatsižvelgiant į naršyklę ir operacinė sistema, kaip ir nėra galimybės pritaikyti kai kurių šių elementų naudojant pakopinius stiliaus lapus.

Šių HTML formos elementų negalima visiškai stilizuoti:

• išskleidžiamasis sąrašas;
• žymės langelis ;
• jungiklis .
• lauką failo siuntimui.

Kaip jau aišku iš įrašo pavadinimo, čia kalbėsime tik apie rinktines.

Yra daug paruoštų sprendimų jQuery įskiepių pavidalu, skirtų išskleidžiamiesiems sąrašams formuoti. Bet aš (dėl to, kad nė vienas įskiepis man netiko dėl vienokių ar kitokių priežasčių) nusprendžiau iš naujo išradinėti savo ratą ir parašiau savo įskiepį, kuriuo dalinuosi šiame straipsnyje.

Iš karto norėčiau pastebėti, kad šis įskiepis netinka visais galimais selektų naudojimo atvejais (skaitykite trūkumus).

Galite pamatyti parinkiklio stiliaus pavyzdį naudojant mano papildinį. Aš juos sukūriau nenaudodamas vaizdų.

• Kai „JavaScript“ išjungta, rodomi standartiniai parinkikliai.
• Scenarijus yra mažo dydžio, maždaug 4 kilobaitai.
• Veikia IE6+ ir visose šiuolaikinėse darbalaukio naršyklėse.
• Rodoma eilute.
• Lengvai formuojamas naudojant CSS.
• Leidžia nustatyti didžiausią išskleidžiamojo sąrašo aukštį (CSS ypatybė max-height).
• Automatiškai koreguoja plotį, jei jis nenurodytas.
• Palaiko pelės ratuko slinkimą.
• Turi „protingą padėties nustatymą“, t.y. atidarant sąrašą neperžengia matomos puslapio dalies.
• Gali „pagauti“ paspaudus klavišą Tab ir perjungti klaviatūros rodyklėmis.
• Palaiko atributą „išjungtas“.
• Jis taip pat veikia su dinamiškai pridėtais / pakeistais pasirinkimais.

• Nepalaiko kelių atributo, t.y. neleidžia pasirinkti kelių elementų (keli pasirinkimai).
• Nepalaiko sąrašo elementų grupavimo (žyma).
• Nepalaiko perjungimo klaviatūros rodyklių klavišais, kai sąrašas atidaromas spustelėjus pele.

Papildinys nepasiekiamas, nes tai nebeaktualu.

Versija: 1.0.1 | Atsisiuntimai: 11103 | Dydis: 7 KB | Naujausias atnaujinimas: 07.10.2012

Jei svetainėje dar neįjungta „jQuery“, prieš žymą pridėkite šią eilutę:

Iš karto po jQuery įtraukite failą su scenarijumi:

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

Įdėkite šį kodą prieš žymą po anksčiau pateiktų failų.

Kai dinamiškai keičiate pasirinkimus, turite suaktyvinti atnaujinimo aktyviklį, pvz.:

(function($) ( $(function() ( $("button").click(function()) ( $("select").find("parinktis:nth-child(5)").attr("pasirinkta ", tiesa); $("pasirinkti").trigger("atnaujinti"); )) )) ))(jQuery)

Jo struktūra atrodo taip:

-- Pasirinkite --

• -- Pasirinkite --
• 1 punktas
• 2 punktas
• 3 punktas

Išduoti pasirenka su naudojant CSS, naudokite šias klases:

Tokio scenarijaus kūrimas yra gana kruopštus darbas, nes reikia atsižvelgti į daugybę skirtingų dalykų. Labai tikiuosi, kad rimtų klaidų neatsiras. Bet jei ką, praneškite man komentaruose.

Sveiki, Habrauseriai ir tiesiog skaitytojai. Palyginti neseniai susimąsčiau, kaip pritaikyti stilius pasirinktai žymai. Visi nori, kad formos stilius atitiktų svetainės dizainą, tačiau dar ne viską galima apibūdinti naudojant gryną CSS. Šiame straipsnyje apžvelgsime paprastą pasirinkimo sąrašo sudarymo naudojant CSS ir JavaScript kalbos biblioteką – jQuery pavyzdį. Manau, ypač pradedantiesiems bus įdomi ši medžiaga. Žinoma, geriau būtų rašyti gimtąja JS, bet visi žino, kad kodo eilučių būtų daugiau, ir vargu ar būtų aiškiau.

Tiesą sakant, prieš pradėdamas kurti kitą dviratį, bandžiau rasti panašų sprendimą, bet neradau nieko kito, išskyrus įspūdingus „div“ įvyniojimus, skirtus pasirinktinai žymai. Ir pagalvojau, kad būtų malonu parašyti ką nors paprasto ir reikalingo. Na, pradėkime!

Mūsų plastilino modeliavimo ratelis apima tris failus:

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

selectbox.html

Mėnuo

• sausio mėn
• vasario mėn
• kovo mėn
• balandžio mėn
• gegužės mėn
• birželis
• liepos mėn
• rugpjūčio mėn
• rugsėjis
• spalis
• lapkritis
• gruodį

selectbox.css

div#selectBox ( plotis: 250 piks.; padėtis: santykinis; aukštis: 50 piks.; kraštinės spindulys: 3 piks.; kraštinė: vientisas 1 piks. šviesiai pilka; fono spalva: #fff; spalva: #333; žymeklis: žymeklis; perpildymas: paslėptas; perėjimas: „.3s“ : 15 pikselių; ) /* „Safari“, „Chrome“ ir „Opera“ naudotojams puiki premija yra stilizuota slinkties juosta. */ ::-webkit-scrollbar ( fonas: skaidrus; plotis: 0,5 em; padėtis: absoliutus; ) ::-webkit-scrollbar-track ( fonas: skaidrus; padėtis: absoliutus; z indeksas: -2; ) :: -webkit-scrollbar-thumb ( kraštinės spindulys: 100 pikselių; fonas: #888; ) ul#selectMenuBox ( fonas: #fff; perėjimas: .3s; plotis: 100%; aukštis: 200 pikselių; perpildymas-y: automatinis; perpildymas- x: paslėptas #333 fonas: #e1e1e1;

Dabar prie gėrybių! Pasvarstykime šaltinio kodas papildinys Selectbox () jQuery, selectbox.js failas:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // pradiniai parametrai // nustatykite standartinį div"a aukštį. var selectDefaultHeight = $("#selectBox").height(); // vaizdo pasukimas kampas in div"e var rotateDefault = "rotate(0deg)"; // paspaudus mygtuką suveikia funkcija, kurioje // apskaičiuojamas pradinis mūsų div"a aukštis // labai patogu palyginti su gaunamais parametrais (kas nustatyta scenarijaus pradžioje ) $("#selectBox > p.valueTag").click(function() ( // objekto aukščio apskaičiavimas naudojant height() metodą var currentHeight = $(). "#selectBox").height();< 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)); ) ));

išorinis failas
scenarijų ir iškvieskite papildinį taip:

$("selector").selectbox();

Pirmiausia įtraukite iškvietimą į dokumento objekto ready() metodą, kad įskiepis būtų įkeltas visiškai įkėlus dokumentą. Galite sužinoti daugiau apie tai, kas yra „jQuery“ papildinys.

Neseniai man parašė nepažįstamas žmogus ir paprašė išbandyti jo ikSelect įskiepį, kurį jis stengėsi parašyti kuo arčiau idealo. Įskiepis man taip patiko, kad po daugybės bandymų ir klaidų taisymo nusprendžiau parašyti jo apžvalgą ir užbaigti šią temą bei padėti protingam kūrėjui patekti į centrą.

Trumpai tariant: jis gali padaryti beveik viską, ką gali padaryti standartinis pasirinkimas, tuo pačiu puikiai stilizuotas ir pritaikytas prie pasirinkimo įgyvendinimo specifikos skirtingos naršyklės. Papildinys visiškai nukopijuoja išvaizda gimtoji „Mac OS X“ parinktis, tačiau ją galima be jokių problemų sukurti naudojant CSS.

Štai kaip atrodo uždarius:

Taip atvirai:

Privalumai:

• veikia visose naršyklėse (IE6+, FF, Opera, Chrome, Safari), įskaitant mobiliąsias
• automatiškai reguliuoja plotį
• visada atsidaro į matomą puslapio dalį (vadinamasis „protingas padėties nustatymas“) tiek horizontaliai, tiek vertikaliai
• leidžia nustatyti didžiausią išskleidžiamojo sąrašo aukštį
• leidžia grupuoti parinktis (optgroup)
• visiškai valdomas iš klaviatūros (įskaitant reagavimą į perėjimus naudojant Tab, PgUp, PgDown, Home, End)
• turi pasirinkimą pagal pirmąsias raides (ne tik vieną, bet ir paskesnes)
• palaiko slinkimą pelės ratuku
• įterptas į eilutę (įterptas blokas)
• puikiai veikia su didžiuliais sąrašais (1000 ir daugiau elementų)
• palieka standartinį pasirinkimą, kai javascript išjungtas
• turi puikią API

• neleidžia pasirinkti kelių elementų vienu metu (keli pasirinkimai)
• nekeičia išskleidžiamojo sąrašo slinkties juostos stiliaus (nes tai per daug paveikia greitį)
• nebėga prie alaus

„Opera mini“ išlieka standartiniai parinkikliai, kad būtų išvengta puslapio įkėlimo iš naujo atidarant sąrašą. „Opera Mobile“ ji veikia taip pat, kaip ir darbalaukio versijoje.

Kiekvienas, kuris rimtai susiduria su puslapio išdėstymu, žino, kad pasirinkimo stiliaus parinktys CSS yra labai ribotos. Tačiau labai dažnai standartinis pasirinkimas visiškai netelpa į dizainą, todėl jūs turite pasirinkti stilių naudodami JavaScript. Tiesą sakant, šiame straipsnyje mes sukursime savo pasirinkimą naudodami „JavaScript“.

Yra daug paruoštų įskiepių, įskaitant jQuery, kurie leidžia visa tai padaryti. Bet jei jums nereikia kažko itin sudėtingo, lengviau viską padaryti nuo nulio naudojant gryną JavaScript.

Pirmiausia sukurkime būsimojo pasirinkimo HTML struktūrą:

1 elementas
2 elementas
3 elementas

1 elementas

2 elementas

3 elementas

Kaip matote, čia nėra pasirinkimo žymos. Dabar mes galime pasirinkti savo pasirinktinį stilių taip, kaip norime, naudodami CSS:

Pasirinkite (
fono spalva: #0ee;
kraštinės spindulys: 10 pikselių;
užpildymas: 10 pikselių 0;
plotis: 200 pikselių;
}
.select p(
žymeklis: rodyklė;
paraštė: 0;
pamušalas: 5px 20px;
}
.select p.active (
fono spalva: #ee0;
}

Žinoma, čia gali daryti ką nori. Ir galiausiai, išvaizdą turime paversti pasirinkimo funkcionalumu, tai yra pasirinkti ir paryškinti tik vieną elementą iš kelių, o tada pateikti jį kartu su forma. Norėdami tai padaryti, naudosime JavaScript:

Funkcijos pasirinkimas(elementas) (
var reikšmė = element.getAttribute("duomenų vertė"); // Nuskaitykite pasirinkto elemento reikšmę
var mazgai = element.parentNode.childNodes; // Gaukite visus kitus elementus
už (var i = 0; i< nodes.length; i++) {
/* Filtruoti pašalinį tekstą ir įvesties elementus */
if (mazgai[i] HTMLParagraphElement egzempliorius) (
/* Pridėti aktyvų prie pasirinkto elemento, ištrinant šią klasę iš visų kitų */
if (value == mazgai[i].getAttribute("duomenų vertė")) nodes[i].className = "aktyvus";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = vertė; // Nustatykite paslėptą lauką į pasirinktą reikšmę
}

Svarbiausia, kad būtų įdiegta pasirinkimo funkcija, yra paslėptas laukas, kuriame saugoma mūsų pasirinkimo vertė. Ir tai yra reikšmė, kuri bus išsiųsta, kai bus pateikta forma.

Tai paprastas būdas atlikti bet kokį pasirinktą stilių „JavaScript“. Jei naudosite jQuery, kodas bus dar paprastesnis.

Žinoma, standartinis pasirinkimas turi daugiau funkcijų. Pavyzdžiui, jis reaguoja į skirtuką , o elementams naršyti taip pat galite naudoti klaviatūros rodyklių klavišus. Bet jei reikia, visa tai galite įdiegti ir JavaScript.

Ir paskutinė rekomendacija. Kode buvo naudojama noscript žyma, ir tai nebuvo atsitiktinumas. Kadangi ne visi įgalina JavaScript ir kad forma iš viso veiktų tokiems vartotojams, reikia rodyti bent standartinį pasirinkimą . Ir kiekvienas, turintis įjungtą „JavaScript“, matys mūsų nuostabius pasirinkimus.

Kurdamas svetainę kiekvienas interneto meistras stengiasi, kad jo kūrinys būtų vienodai skaitomas visose naršyklėse, ir tai kartais sukelia bėdų. Todėl šioje pamokoje kalbėsime apie svetainės elemento, pvz., pasirinkimo arba, paprasčiau tariant, pasirinkimo mygtuko, kūrimą ir stilių. Pažiūrėsime į kelis scenarijus, kurie pakeis įprastą elementą pasirinkiteį stilingesnį ir funkcionalesnį svetainės valdiklį, kuris tinkamai rodomas skirtingos naršyklės. Taigi, pažiūrėkime, ką turime...

ŠALTINIAI

Pamokoje naudosime HTML5, todėl pirmiausia sukuriame HTML žymėjimą, kuris atrodo taip:

Sukurkite pasirinktą svetainės elementą | Demonstracija iš interneto svetainės




Pasirinkite gaminį Informacinis lapas apie interneto dizainą TVS+šablonai, papildiniai Įdomios pamokos apie svetainių kūrimą RSS naujienos iš mūsų tinklaraščio visada šalia

Toliau pažvelkime į kai kuriuos atributus, pavyzdžiui, atributą duomenis naudojami norint sujungti informaciją parinkčių elementuose. Juose yra produkto piktograma ir tekstinis aprašymas su formatavimu. Abu šie elementai bus rodomi mūsų pasirinkto elemento versijoje.

Dabar sujungiame efektus, jQuery patikrina elementą pasirinkite ir, naudojant duomenų atributus, sukuria žymėjimą, kuris pridedamas iškart po elemento pasirinkite:

Pasirinkite prekę

• JavaScript + jQuery pradedantiesiems vaizdo formatu žiūrėti vaizdo pristatymą
• PHP + MySQL pradedantiesiems pirkti
• WordPress – profesionalus dienoraštis per vieną dieną parsisiųsti
• Joomla – profesionali svetainė per vieną dieną pirkti

Mūsų meniu sudarys netvarkingą prekių sąrašą li, kurie žymi kiekvieną elementą variantas iš elemento pasirinkite.

Dabar pažiūrėkime į „JavaScript“, kuris sklandžiai animuos mūsų elementą:

$(document).ready(function())( // Pasirinkimo elementas, kuris bus pakeistas: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",( plotis: select.outerWidth() , className : "tzSelect", html: "" )); var dropDown = $("

",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Pereikite per pradinį pasirinkimo elementą select.find("option").each(function(i)( var option = $(this); if(i==select.attr("selectedIndex"))( selectBox.html(option.text());) // Kadangi naudojama jQuery 1.4.3, galime pasiekti // HTML5 duomenis atributai naudojant duomenų() metodą if(option.data("skip"))(return true; ) // Sukurkite išskleidžiamąjį elementą pagal duomenų piktogramą ir HTML5 duomenų atributus: var li = $("
• ",(html: " "+ option.data("html-text")+"" )); li.click(function())( selectBox.html(option.text()); dropDown.trigger("hide"); // Kada tai atsitinka spustelėjus įvykį, mes taip pat atspindime pradinio elemento pakeitimus: select.val(option.val()) select.hide(). / Surišti pasirinktiniai renginiai rodyti ir paslėpti elemente dropDown: dropDown.bind("show",function())(if(dropDown.is(":animated"))( return false; ) selectBox.addClass("expanded"); dropDown.slideDown () ; )).bind("slėpti",funkcija())(if(dropDown.is(":animated"))( return false; ) selectBox.removeClass("išskleista"); dropDown.slideUp(); ) ).bind ("perjungti",funkcija())(if(selectBox.hasClass("išplėstas"))( dropDown.trigger("hide"); ) else dropDown.trigger("show"); ));

  selectBox.click(function())( dropDown.trigger("toggle"); return false; )); // Jei spustelėsite pelės mygtuką bet kurioje puslapio vietoje, kai atidarytas elementas dropDown, // jis bus paslėptas: $(document).click(function())( dropDown.trigger("hide"); )); )); pasirinkite Dabar mažas niuansas, kuriant mūsų elementą, originalų elementą

  išsaugotas, jis bus paslėptas naudojant hide() metodą. Tai ne mažiau svarbu, nes joje atsispindi visi pokyčiai. Tada žiūrime į savo CSS stiliai

  #puslapis( plotis:490px; paraštė:50px automatinis; ) #puslapis h1(šrifto svoris:normalus; teksto įtrauka:-99999px; perpildymas:paslėptas; background:url(../img/your_product.png") ne -pakartoti plotis:490px; aukštis:36px; ) #page form( margin: 20px - plotis:460px; /* Iš anksto įkelkite išskleidžiamojo sąrašo elementų fono vaizdą */ :100%; plotis: 100%; /* šrifto nustatymas ; /* Naudojant kelis CSS3 fonus */ 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");fono padėtis: 0–136 pikseliai, dešinė – 204px, 50% -68px, 0 0; background-repeat: nekartoti, nekartoti, nekartoti, kartoti-x; žymeklis:žymiklis;

  -moz-border-radius:3px; -Webkit-border-radius:3px; kraštinės spindulys: 3 pikseliai; ). ;) Šiame pavyzdyje naudojama daug skaidrių vaizdų, kurie yra vienas ant kito. Keli fono paveikslėliai

  TzSelect .dropDown (pozicija: absoliutus; viršuje: 40 tšk.; kairėn: 0; plotis: 100%; kraštinė: 1 piks. vientisas #32333b; kraštinės plotis: 0 1 piks. 1 piks.; sąrašo stilius: nėra; -moz-box-sizing:border -dėžutė; santykinis; /* Naudojant kelis CSS3 fonus */ background:url("../img/dropdown_slice.png") pakartoti- x #222, url; (../img/dropdown_slice.png"),url(../img/dropdown_slice.png"); fono padėtis: 50% -171px, 0 -85px, 0 0 , nesikartoti, kartoti-x ) .tzPasirinkite li:hover(fono padėtis: 50% -256px, 0-85px, 0 0; ) .tzPasirinkite li span(kairė:88px; padėtis:absoliutus; viršuje:27px; ) "

  Naudojant dėžutės dydžio nustatymas, turime jam priskirti vertę kraštinė-dėžė, tai neleis bendram plotiui padidėti, nes mūsų fragmentai yra elemento viduje. Tai viskas, sukurti mūsų patobulinti atrankos elementai, sėkmės eksperimentuose.