Mainiet atlases stilu, izmantojot jQuery. IkSelect — ideāls spraudnis stila atlasei Beautiful select jquery

Uzmanību! Tālāka attīstība un spraudņa atbalsts ir pārtraukts, jo tas tagad ir daļa no .

Viena no nepatīkamākajām (un es pat teiktu, ka briesmīgajām) lietām web izstrādē ir html formu izkārtojums. Diemžēl nav vienota standarta formas elementu attēlošanai neatkarīgi no pārlūkprogrammas un operētājsistēma, tāpat kā dažus no šiem elementiem nav iespējams pielāgot, izmantojot kaskādes stila lapas.

Šos HTML veidlapas elementus nevar pilnībā noformēt:

• nolaižamais saraksts;
• izvēles rūtiņa ;
• slēdzis.
• lauks faila nosūtīšanai.

Kā jau ir skaidrs no ieraksta nosaukuma, šeit mēs runāsim tikai par atlasītajiem.

Ir daudz gatavu risinājumu jQuery spraudņu veidā nolaižamo sarakstu veidošanai. Bet es (sakarā ar to, ka neviens no spraudņiem man tā vai cita iemesla dēļ nederēja) nolēmu no jauna izgudrot savu riteni un uzrakstīju savu spraudni, ar kuru dalos šajā rakstā.

Uzreiz gribu atzīmēt, ka šis spraudnis nav piemērots visiem iespējamiem selektīvu izmantošanas gadījumiem (lasiet trūkumus).

Varat redzēt atlasītāja stila piemēru, izmantojot manu spraudni. Es tos izstrādāju, neizmantojot attēlus.

• Ja JavaScript ir atspējots, tiek parādīti standarta atlasītāji.
• Skripts ir maza izmēra, aptuveni 4 kilobaiti.
• Darbojas IE6+ un visās modernajās darbvirsmas pārlūkprogrammās.
• Parādīts iekļauts.
• Viegli veidots, izmantojot CSS.
• Ļauj iestatīt maksimālo augstumu nolaižamajam sarakstam (CSS rekvizīts max-height).
• Automātiski pielāgo platumu, ja tas nav norādīts.
• Atbalsta peles ritentiņu ritināšanu.
• Ir “gudrā pozicionēšana”, t.i. atverot sarakstu, nepārsniedz lapas redzamo daļu.
• Var “noķert”, nospiežot tabulēšanas taustiņu un pārslēgties ar bultiņām uz tastatūras.
• Atbalsta atribūtu "disabled".
• Tas darbojas arī ar dinamiski pievienotām/mainītām atlasēm.

• Neatbalsta vairāku atribūtu, t.i. neļauj atlasīt vairākus vienumus (vairāku vienumu atlase).
• Neatbalsta saraksta vienumu grupēšanu (tagu).
• Neatbalsta pārslēgšanos ar tastatūras bulttaustiņiem, kad saraksts tiek atvērts, noklikšķinot ar peli.

Spraudnis nav pieejams, jo tas vairs nav aktuāli.

Versija: 1.0.1 | Lejupielādes: 11103 | Izmērs: 7 KB | Jaunākais atjauninājums: 07.10.2012

Ja vietnē vēl nav iespējots jQuery, pirms taga pievienojiet šādu rindiņu:

Tūlīt pēc jQuery iekļaujiet failu ar skriptu:

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

Ievietojiet šo kodu pirms taga aiz iepriekš minētajiem failiem.

Dinamiski mainot atlases, ir jāaktivizē atsvaidzināšanas aktivizētājs, piemēram:

(function($) ( $(function() ( $("poga").click(function()) ( $("select").find("option:nth-child(5)").attr("atlasīts ", true); $("atlasīt").trigger("atsvaidzināt"); )) )) ))(jQuery)

Tās struktūra izskatās šādi:

-- Izvēlieties --

• -- Izvēlieties --
• 1. punkts
• 2. punkts
• 3. punkts

Lai izdotu atlasi ar izmantojot CSS, izmantojiet šādas klases:

Šāda skripta izveide ir diezgan rūpīgs uzdevums, jo jums ir jāņem vērā daudzi dažādi punkti. Ļoti ceru, ka nekādas nopietnas bugs neparādīsies. Bet, ja kas, lūdzu, dariet man to zināmu komentāros.

Sveiki, Habrausers un vienkārši lasītāji. Salīdzinoši nesen es prātoju, kā atlasītajam tagam piemērot stilus. Ikviens vēlas, lai veidlapas stils atbilstu vietnes dizainam, taču ne visu vēl var aprakstīt ar tīru CSS. Šajā rakstā mēs apskatīsim vienkāršu piemēru, kā izveidot savu atlases sarakstu, izmantojot CSS un JavaScript valodas bibliotēku - jQuery. Es domāju, ka šis materiāls būs īpaši ieinteresēts iesācējiem. Protams, labāk būtu rakstīt dzimtajā JS, bet visi zina, ka koda rindu būtu vairāk, un diez vai tas būtu skaidrāks.

Godīgi sakot, pirms sāku veidot nākamo velosipēdu, mēģināju atrast līdzīgu risinājumu, taču nevarēju atrast neko citu kā vien iespaidīgus div iesaiņojumus atlasītajam tagam. Un es domāju, ka būtu jauki uzrakstīt kaut ko vienkāršu un vajadzīgu. Nu, sāksim!

Mūsu plastilīna modelēšanas lokā ir trīs faili:

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

selectbox.html

Mēnesis

• janvārī
• februāris
• marts
• aprīlis
• maijā
• jūnijā
• jūlijā
• augusts
• septembris
• oktobris
• novembris
• decembris

selectbox.css

div#selectBox ( platums: 250 pikseļi; pozīcija: relatīvs; augstums: 50 pikseļi; apmales rādiuss: 3 pikseļi; apmale: vienkrāsains 1px gaiši pelēks; fona krāsa: #fff; krāsa: #333; kursors: rādītājs; pārplūde: paslēpta; pāreja: 3s : 15 pikseļi; ) /* Safari, Chrome un Opera lietotājiem patīkams bonuss ir stilizēta ritjosla. */ ::-webkit-scrollbar ( fons: caurspīdīgs; platums: 0,5 em; pozīcija: absolūts; ) ::-webkit-scrollbar-track ( fons: caurspīdīgs; pozīcija: absolūts; z-indekss: -2; ) :: -webkit-scrollbar-thumb ( apmales rādiuss: 100 pikseļi; fons: #888; ) ul#selectMenuBox ( fons: #fff; pāreja: .3s; platums: 100%; augstums: 200 pikseļi; pārpildes-y: automātiska; pārpilde- x: paslēpts !svarīgi; #333 fons: #e1e1e1;

Tagad pie labumiem! Apsvērsim pirmkods spraudnis Selectbox() jQuery, selectbox.js fails:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // sākotnējie parametri // iestatiet div"a standarta augstumu. var selectDefaultHeight = $("#selectBox").height(); // attēla pagriešana leņķis in div"e var rotateDefault = "rotate(0deg)"; // pēc pogas nospiešanas tiek aktivizēta funkcija, kurā // tiek aprēķināts mūsu div"a sākotnējais augstums // ļoti ērti salīdzināšanai ar ienākošajiem parametriem (kas ir iestatīts skripta sākumā ) $("#selectBox > p.valueTag").click(function() ( // objekta augstuma aprēķināšana, izmantojot augstuma() metodi var currentHeight = $(). "#selectBox").height(); // saskaņošanas nosacījuma pārbaude/ sākumā neatbilst norādītajam augstumam, // lai saprastu, ko darīt tālāk, ja (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.bultiņa").css((transform: rotateDefault)); ) ));

ārējais fails
skriptu un izsauciet spraudni šādi:

$("selektors").selectbox();

Pirmkārt, dokumenta objekta metodē ready() iekļaujiet izsaukumu, lai spraudnis tiktu ielādēts pēc tam, kad dokuments ir pilnībā ielādēts. Varat uzzināt vairāk par to, kas ir jQuery spraudnis.

Nesen man rakstīja kāds svešinieks un lūdza pārbaudīt viņa ikSelect spraudni, kuru viņš centās uzrakstīt pēc iespējas tuvāk ideālam. Spraudnis man tik ļoti patika, ka pēc plašās testēšanas un kļūdu labošanas es nolēmu uzrakstīt par to atsauksmi un pielikt punktu šai tēmai, kā arī palīdzēt gudram izstrādātājam nokļūt centrmezglā.

Īsumā: tas var paveikt gandrīz visu, ko spēj standarta atlase, vienlaikus lieliski stilizējot un pielāgojot atlases ieviešanas specifikai. dažādas pārlūkprogrammas. Spraudnis tiek pilnībā kopēts izskats native Mac OS X selektors, taču to var bez problēmām noformēt, izmantojot CSS.

Lūk, kā tas izskatās, kad tas ir aizvērts:

Atvērtā veidā šādi:

Priekšrocības:

• darbojas visās pārlūkprogrammās (IE6+, FF, Opera, Chrome, Safari), arī mobilajās
• automātiski pielāgo platumu
• vienmēr tiek atvērts lapas redzamajai daļai (tā sauktā "viedā pozicionēšana") gan horizontāli, gan vertikāli
• ļauj iestatīt nolaižamā saraksta maksimālo augstumu
• ļauj grupēt opcijas (optgroup)
• pilnībā kontrolēta no tastatūras (tostarp reaģēšana uz pārejām ar Tab, PgUp, PgDown, Home, End)
• ir atlase, kuras pamatā ir pirmie burti (ne tikai viens, bet arī nākamie)
• atbalsta ritināšanu ar peles ritenīti
• ievietots iekļauts (iekļauts bloks)
• lieliski darbojas ar milzīgiem sarakstiem (1000+ vienumi)
• atstāj standarta atlasi, kad javascript ir atspējots
• ir lieliska API

• neļauj atlasīt vairākus vienumus vienlaikus (vairāku vienumu atlase)
• neveido nolaižamā saraksta ritjoslu stilu (jo tas pārāk daudz ietekmē ātrumu)
• neskrien pēc alus

Operētājsistēmā Opera mini paliek standarta atlasītāji, lai izvairītos no lapas atkārtotas ielādes, atverot sarakstu. Opera mobilajā versijā tas darbojas tāpat kā darbvirsmas versijā.

Ikviens, kurš nopietni nodarbojas ar lapas izkārtojumu, zina, ka CSS atlases stila iespējas ir ļoti ierobežotas. Bet ļoti bieži standarta atlase vispār neiederas dizainā, tāpēc atlase ir jāveido, izmantojot JavaScript. Faktiski šajā rakstā mēs izveidosim paši savu atlasi, izmantojot JavaScript.

Ir daudz gatavu spraudņu, tostarp jQuery, kas ļauj to visu izdarīt. Bet, ja jums nav nepieciešams kaut kas īpaši sarežģīts, tad ir vieglāk visu izdarīt pats no nulles, izmantojot tīru JavaScript.

Vispirms izveidosim mūsu nākotnes atlases HTML struktūru:

1. elements
2. elements
3. elements

1. elements

2. elements

3. elements

Kā redzat, šeit nav atlases taga. Tagad mēs varam veidot savu pielāgoto atlasi tā, kā mēs vēlamies, izmantojot CSS:

Izvēlieties (
fona krāsa: #0ee;
apmales rādiuss: 10 pikseļi;
polsterējums: 10 pikseļi 0;
platums: 200 pikseļi;
}
.select p(
kursors: rādītājs;
piemale: 0;
polsterējums: 5 pikseļi 20 pikseļi;
}
.select p.active (
fona krāsa: #ee0;
}

Protams, šeit jūs varat darīt visu, ko vēlaties. Un visbeidzot, mums ir jāpārvērš izskats par atlases funkcionalitāti, tas ir, jāizvēlas un jāizceļ tikai viens elements no vairākiem un pēc tam jāiesniedz kopā ar veidlapu. Lai to izdarītu, mēs izmantosim JavaScript:

Funkcijas atlase(elements) (
var vērtība = elements.getAttribute("datu vērtība"); // Nolasa atlasītā elementa vērtību
var nodes = elements.parentNode.childNodes; // Iegūstiet visus pārējos elementus
for (var i = 0; i< nodes.length; i++) {
/* Izfiltrēt svešu tekstu un ievades elementus */
if (HTMLParagraphElement mezgli[i] instance) (
/* Pievienot aktīvo atlasītajam elementam, dzēšot šo klasi no visiem pārējiem */
if (vērtība == mezgli[i].getAttribute("datu vērtība")) nodes[i].className = "aktīvs";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = vērtība; // Iestatiet slēpto lauku uz atlasīto vērtību
}

Atlases funkcionalitātes ieviešanas atslēga ir slēptais lauks, kurā tiek saglabāta vērtība no mūsu atlases . Un šī ir vērtība, kas tiks nosūtīta, kad veidlapa tiks iesniegta.

Tas ir vienkāršs veids, kā veikt absolūti jebkuru izvēlēto stilu JavaScript. Ja izmantojat jQuery, kods būs vēl vienkāršāks.

Protams, standarta izvēlei ir vairāk funkcionalitātes. Piemēram, tas reaģē uz cilni , un jūs varat arī izmantot tastatūras bulttaustiņus, lai pārvietotos pa elementiem. Bet to visu var ieviest arī JavaScript, ja nepieciešams.

Un pēdējais ieteikums. Kods izmantoja noscript tagu, un tas nebija nejaušība. Tā kā ne visiem ir iespējots JavaScript un lai veidlapa vispār darbotos šādiem lietotājiem, jums ir jāparāda vismaz standarta atlase . Un ikviens, kam ir iespējots JavaScript, redzēs mūsu skaisto atlasi.

Veidojot vietni, katrs tīmekļa meistars cenšas panākt, lai viņa radītā informācija būtu vienādi lasāma visās pārlūkprogrammās, un tas dažkārt rada nepatikšanas. Tāpēc šajā nodarbībā mēs runāsim par vietnes elementa, piemēram, atlases vai, vienkāršāk sakot, atlases pogas, izveidi un stilu. Mēs apskatīsim vairākus skriptus, kas pārveidos parasto elementu atlasiet stilīgākā un funkcionālākā vietnes vadīklā, kas tiek pareizi parādīta dažādas pārlūkprogrammas. Tātad, paskatīsimies, kas mums ir...

AVOTI

Šajā apmācībā mēs izmantosim HTML5, tāpēc vispirms izveidojam HTML marķējumu, kas izskatās šādi:

Izveidojiet vietnes atlases elementu | Demonstrācija no mājas lapas




Izdari savu izvēli Izvēlieties produktu Informācijas lapa par web dizainu CMS+veidnes, spraudņi Interesantas nodarbības par vietņu izveidi RSS ziņas no mūsu emuāra vienmēr ir tuvumā

Tālāk apskatīsim dažus atribūtus, piemēram, atribūtu datus tiek izmantoti, lai apvienotu informāciju opciju elementos. Tajos ir produkta ikona un teksta apraksts ar formatējumu. Abi šie vienumi tiks parādīti mūsu atlasītā elementa versijā.

Tagad mēs savienojam efektus, jQuery pārbauda elementu atlasiet, un, izmantojot datu atribūtus, izveido marķējumu, kas tiek pievienots uzreiz aiz elementa atlasiet:

Izvēlieties produktu

• JavaScript + jQuery iesācējiem video formātā skatīties video prezentāciju
• PHP + MySQL iesācējiem pirkt
• WordPress - profesionāls emuārs vienā dienā lejupielādēt
• Joomla - profesionāla vietne vienā dienā pirkt

Mūsu ēdienkarte veidos nesakārtotu preču sarakstu li, kas apzīmē katru vienumu opciju no elementa atlasiet.

Tagad apskatīsim mūsu JavaScript, kas vienmērīgi animēs mūsu elementu:

$(document).ready(function())( // Atlasītais elements, kas tiks aizstāts: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",( platums: select.outerWidth() , className : "tzSelect", html: "" )); var dropDown = $("

",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Apmeklējiet sākotnējo atlases elementu select.find("option").each(function(i)( var option = $(this); if(i==select.attr("selectedIndex"))( selectBox.html(option.text());) // Tā kā tiek izmantots jQuery 1.4.3, mēs varam piekļūt // HTML5 datiem. atribūti, izmantojot metodi data() if(option.data("skip"))(return true; ) // Izveidojiet nolaižamo vienumu atbilstoši datu ikonai un HTML5 datu atribūtiem: var li = $("
• ",(html: " "+ option.data("html-text")+"" )); li.click(function())( selectBox.html(option.text()); dropDown.trigger("hide"); // Kad tas notiek klikšķa notikums, mēs arī atspoguļojam sākotnējā atlases elementa izmaiņas: select.val(option.val()) select.hide(). / Saistīt pielāgoti pasākumi parādīt un paslēpt nolaižamajā elementā: dropDown.bind("show",function())( if(dropDown.is(":animated"))( return false; ) selectBox.addClass("expanded"); dropDown.slideDown () ; )).bind("slēpt",funkcija())(if(dropDown.is(":animated"))(atgriež false; ) selectBox.removeClass("paplašināts"); dropDown.slideUp(); ) ).bind ("pārslēgt",funkcija())(if(selectBox.hasClass("expanded"))( dropDown.trigger("hide"); ) else dropDown.trigger("show"); ));

  selectBox.click(function())( dropDown.trigger("toggle"); return false; )); // Ja noklikšķināsiet ar peles pogu jebkurā lapas vietā, kamēr nolaižamais elements ir atvērts, // tas tiks paslēpts: $(document).click(function())( dropDown.trigger("hide"); )); )); atlasiet Tagad neliela nianse, veidojot mūsu elementu, oriģinālo elementu

  saglabāts, tas tiks paslēpts, izmantojot hide() metodi. Tas ir ne mazāk svarīgi, jo tajā ir atspoguļotas visas izmaiņas. Tad mēs skatāmies uz mūsu CSS stili

  #lapa(platums:490px; margin:50px auto; ) #page h1(fonta svars:normāls; teksta atkāpe:-99999px; overflow:hidden; background:url("../img/your_product.png") nē -atkārtot platums: 490 pikseļi; augstums: 36 pikseļi ) #lapas forma( margin: 20px - platums: 460 pikseļi; /* Iepriekš ielādēts nolaižamā saraksta vienumu fona attēls. :100%; platums: 100%; fonta iestatīšana ; /* Vairāku CSS3 fonu izmantošana */ 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");fona pozīcija: 0 -136 pikseļi, pa labi - 204 pikseļi, 50% -68 pikseļi, 0 0; fona atkārtojums: no-repeat, no-repeat, no-repeat, atkārtot-x; kursors:rādītājs;

  -moz-border-radius:3px; -webkit-border-radius:3px; apmales rādiuss: 3 pikseļi; ). ;) Šajā piemērā ir izmantoti daudzi caurspīdīgi attēli, kas ir uzlikti viens pret vienu. Vairāki fona attēli

  TzSelect .dropDown (pozīcija: absolūts; augšā: 40 pikseļi; pa kreisi: 0; platums: 100%; apmale: 1 pikseļi ciets #32333b; apmales platums: 0 1 pikseļi 1 px; saraksta stils: nav; -moz-box-sizing:border -box-box-sizing:border-box -moz-box-shadow:0 0 4px #111 ). relatīvs; /* Vairāku CSS3 fonu izmantošana */ background:url(../img/dropdown_slice.png") atkārtojums- x #222./img/dropdown_slice.png"),url (../img/dropdown_slice.png"), url("../img/dropdown_slice.png"); , bez atkārtošanas, atkārtošana-x ) .tzAtlasīt li:hover(fona pozīcija: 50% -256px, 0-85px, 0 0; ) .tzAtlasīt li span(kreisais:88px; pozīcija:absolūts; augšā:27px; ) .tzSelect li i(color:#999999; display:block; font-size:12px; ) .tzSelect li img(kreisais:9px; position:absolute;top:13px)

  Izmantojot kastes izmēra noteikšana, mums tam jāpiešķir vērtība apmale-box, tas neļaus palielināt kopējo platumu, jo mūsu fragmenti ir ievietoti elementa iekšpusē. Tas arī viss, mūsu uzlabotie atlases elementi ir izveidoti, veiksmi eksperimentos.