Ndryshoni stilin Select duke përdorur jQuery. IkSelect - shtojca perfekte për stilim zgjedh jquery të zgjedhura të bukura

Kujdes! Zhvillimi i mëtejshëm dhe mbështetja për shtojcën është ndalur për shkak të faktit se tani është pjesë e .

Një nga gjërat më të pakëndshme (dhe madje do të thosha të tmerrshme) në zhvillimin e uebit është paraqitja e formave html. Fatkeqësisht, nuk ka asnjë standard uniform për shfaqjen e elementeve të formës, pavarësisht nga shfletuesi dhe sistemi operativ, ashtu siç nuk ka asnjë mënyrë për të personalizuar disa prej këtyre elementeve duke përdorur fletë stilesh kaskadë.

Elementët e mëposhtëm të formës HTML nuk mund të stilohen plotësisht:

• listë rënëse;
• kutia e kontrollit;
• kaloni .
• fushë për dërgimin e një skedari.

Siç është e qartë tashmë nga titulli i postimit, këtu do të flasim vetëm për të zgjedhurit.

Ka shumë zgjidhje të gatshme në formën e shtojcave jQuery për stilimin e listave rënëse. Por unë (për shkak të faktit se asnjë prej shtojcave nuk më përshtatej për një arsye ose një tjetër) vendosa të shkoj duke rishpikur timonin tim dhe shkrova shtojcën time, të cilën e ndaj në këtë artikull.

Do të doja të vëreja menjëherë se kjo shtojcë nuk është e përshtatshme për të gjitha rastet e mundshme të përdorimit të përzgjedhjeve (lexoni disavantazhet).

Ju mund të shihni një shembull të stilimit të përzgjedhësit duke përdorur shtojcën time. I projektova ato pa përdorur imazhe.

• Kur JavaScript është i çaktivizuar, shfaqen përzgjedhësit standardë.
• Skenari është i vogël në përmasa, afërsisht 4 kilobajt.
• Punon në IE6+ dhe të gjithë shfletuesit modern të desktopit.
• Shfaqet në linjë.
• Stilohet lehtësisht duke përdorur CSS.
• Ju lejon të vendosni lartësinë maksimale për listën rënëse (vetia CSS max-height).
• Rregullon automatikisht gjerësinë nëse nuk është e specifikuar.
• Mbështet lëvizjen e rrotës së miut.
• Ka "pozicionim të zgjuar", d.m.th. nuk shkon përtej pjesës së dukshme të faqes kur hapet lista.
• Mund të "kap" shtypjen e tastit Tab dhe të kalojë me shigjeta në tastierë.
• Mbështet atributin "disabled".
• Ai gjithashtu funksionon me zgjedhje të shtuara/ndryshuara në mënyrë dinamike.

• Nuk mbështet atributin e shumëfishtë, d.m.th. nuk lejon zgjedhjen e disa artikujve (multi-select).
• Nuk mbështet grupimin e artikujve të listës (etiketën).
• Nuk mbështet ndërrimin me tastet me shigjeta në tastierë kur lista hapet duke klikuar miun.

Shtojca nuk është e disponueshme sepse nuk është më relevante.

Versioni: 1.0.1 | Shkarkime: 11103 | Madhësia: 7 KB | Përditësimi më i fundit: 07.10.2012

Nëse faqja nuk e ka ende të aktivizuar jQuery, atëherë shtoni rreshtin e mëposhtëm përpara etiketës:

Menjëherë pas jQuery, përfshini skedarin me skriptin:

(funksion($) ( $(funksion() ( $("zgjedh").selectbox(); )) ))(jQuery)

Vendoseni këtë kod përpara etiketës pas skedarëve të mësipërm.

Kur ndryshoni zgjedhjet në mënyrë dinamike, duhet të aktivizoni këmbëzën e rifreskimit, për shembull:

(funksion($) ( $(funksion() ( $("button"). kliko(funksion() ( $("zgjedh").find("opsion:nth-child(5)").attr("zgjedhur ", e vërtetë); $("zgjidh").trigger ("rifresko"); )) )) ))(jQuery)

Struktura e saj duket si kjo:

-- Zgjidh --

• -- Zgjidh --
• Pika 1
• Pika 2
• Pika 3

Për të nxjerrë zgjedh me duke përdorur CSS, përdorni klasat e mëposhtme:

Krijimi i një skenari të tillë është një detyrë mjaft e mundimshme, pasi duhet të merrni parasysh shumë pika të ndryshme. Unë me të vërtetë shpresoj që nuk do të shfaqen defekte serioze. Por, nëse ka ndonjë gjë, ju lutem më tregoni në komente.

Përshëndetje, Habrausers dhe thjesht lexues. Relativisht kohët e fundit kam pyetur veten se si të aplikoj stile në etiketën e zgjedhur. Të gjithë duan që stili i formës të përputhet me dizajnin e faqes, por jo gjithçka mund të përshkruhet ende me CSS të pastër. Në këtë artikull do të shikojmë një shembull të thjeshtë të shkrimit të listës suaj të përzgjedhur duke përdorur CSS dhe bibliotekën e gjuhës JavaScript - jQuery. Unë mendoj se veçanërisht fillestarët do të jenë të interesuar për këtë material. Sigurisht, do të ishte më mirë ta shkruante në JS amtare, por të gjithë e dinë se do të kishte më shumë rreshta kodi dhe vështirë se do të ishte më e qartë.

Për të qenë i sinqertë, përpara se të filloja të krijoja biçikletën tjetër, u përpoqa të gjeja një zgjidhje të ngjashme, por nuk gjeta asgjë tjetër përveç mbështjellësve spektakolar të div për etiketën e zgjedhur. Dhe mendova se do të ishte mirë të shkruaja diçka të thjeshtë dhe të nevojshme. Epo, le të fillojmë!

Rrethi ynë i modelimit të plastelinës përfshin tre skedarë:

• kutia e përzgjedhjes.html
• zgjedh kuti.css
• kutia e përzgjedhjes.js

kutia e përzgjedhjes.html

muaj

• janar
• shkurt
• mars
• prill
• maj
• qershor
• korrik
• gusht
• shtator
• tetor
• Nëntor
• dhjetor

zgjedh kuti.css

div#selectBox ( gjerësia: 250 px; pozicioni: relative; lartësia: 50 px; rreze-kufi: 3 px; kufiri: solid 1px gri e hapur; ngjyra e sfondit: #fff; ngjyra: #333; kursori: treguesi; tejmbushja: e fshehur; tranzicioni: .3s; ) div#selectBox p.valueTag (mbushje: 15px; kursori: treguesi; tranzicioni: .2s; lartësia: 40px; ) div#selectBox > img.shigjeta (pozicioni: absolute; djathtas: 0; gjerësia: 50px; mbushje: . : 15px ) /* për përdoruesit e Safari, Chrome dhe Opera, një bonus i këndshëm është një shirit i stilizuar i lëvizjes. */ ::-webkit-scrollbar ( sfondi: transparent; gjerësia: 0,5em; pozicioni: absolute; ) ::-webkit-scrollbar-track ( sfondi: transparent; pozicioni: absolut; indeksi z: -2; ) :: -webkit-scrollbar-thumb ( border-radius: 100px; background: #888; ) ul#selectMenuBox (sfondi: #fff; tranzicioni: .3s; gjerësia: 100%; lartësia: 200px; tejmbushje-y: automatik; tejmbushje- x: i fshehur !i rëndësishëm: absolutisht në krye: 00px) ul#selectMenuBox (ngjyra: gri; mbushje: 10px; ) ul#selectMenuBox; #333 sfond: #e1e1e1;

Tani te të mirat! Le të shqyrtojmë kodi burimor shtojcë kutia e përzgjedhjes () për jQuery, skedari selectbox.js:

kutia e përzgjedhjes.js

(funksioni($) ( $.fn.selectbox = funksion() ( // parametrat fillestarë // vendos lartësinë standarde të div"a. var selectDefaultHeight = $("#selectBox").height(); // rrotullimi i imazhit këndi në div"e var rotateDefault = "rotate(0deg)"; // pas shtypjes së butonit, aktivizohet një funksion në të cilin // lartësia fillestare e div"a tonë llogaritet // shumë i përshtatshëm për krahasim me parametrat në hyrje (çfarë është vendosur në fillim të skriptit ) $("#selectBox > p.valueTag"). kliko(funksioni() ( // duke llogaritur lartësinë e objektit duke përdorur metodën lartësi() var aktualHeight = $(). "#selectBox").height(// duke kontrolluar kushtin për përputhje/ nuk përputhet me lartësinë e dhënë në fillim, // për të kuptuar se çfarë duhet bërë më pas nëse (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.shigjeta").css((transformoj: rotateDefault)); ) ));

skedar i jashtëm
skript dhe thirrni shtojcën si kjo:

$("përzgjedhës").selectbox();

Së pari, përfshini një thirrje në metodën gati() të objektit të dokumentit në mënyrë që shtojca të ngarkohet pasi dokumenti të jetë ngarkuar plotësisht. Mund të mësoni më shumë se çfarë është një shtojcë jQuery.

Kohët e fundit, një i panjohur më shkroi dhe më kërkoi të testoja shtojcën e tij ikSelect, të cilën ai u përpoq ta shkruante sa më afër idealit. Më pëlqeu aq shumë shtojca saqë pas testimit të gjerë dhe rregullimit të gabimeve, vendosa të shkruaj një përmbledhje të saj dhe t'i jap fund kësaj teme, si dhe të ndihmoj një zhvillues të zgjuar të hyjë në qendër.

Me pak fjalë: mund të bëjë pothuajse gjithçka që mund të bëjë një i përzgjedhur standard, ndërkohë që është i stilizuar dhe i përshtatur në mënyrë të përsosur me specifikat e zbatimit të zgjedhur shfletues të ndryshëm. Shtojca kopjohet plotësisht pamjen përzgjedhës i Mac OS X, por mund të stilohet me CSS pa asnjë problem.

Ja si duket kur mbyllet:

Si kjo në të hapur:

Përparësitë:

• funksionon në të gjithë shfletuesit (IE6+, FF, Opera, Chrome, Safari), duke përfshirë ata celularë
• rregullon automatikisht gjerësinë
• hapet gjithmonë në pjesën e dukshme të faqes (i ashtuquajturi "pozicionim i zgjuar"), si horizontalisht ashtu edhe vertikalisht
• ju lejon të vendosni lartësinë maksimale të listës rënëse
• ju lejon të gruponi opsionet (optgroup)
• plotësisht i kontrolluar nga tastiera (duke përfshirë përgjigjen ndaj tranzicioneve me Tab, PgUp, PgDown, Home, End)
• ka një përzgjedhje të bazuar në shkronjat e para (jo vetëm një, por edhe ato pasuese)
• mbështet lëvizjen me rrotën e miut
• futur në linjë (inline-block)
• funksionon shkëlqyeshëm me lista të mëdha (1000+ artikuj)
• lë zgjedhjen standarde kur javascript është i çaktivizuar
• ka një API të shkëlqyer

• nuk lejon zgjedhjen e disa artikujve në të njëjtën kohë (shumëzgjedhje)
• nuk stilon shiritin lëvizës të listës rënëse (sepse ndikon shumë në shpejtësinë)
• nuk vrapon për birrë

Në Opera mini, përzgjedhësit standardë mbeten për të shmangur ringarkimin e faqeve kur hapni një listë. Në Opera mobile funksionon njësoj si në versionin desktop.

Kushdo që merret seriozisht me paraqitjen e faqeve e di se opsionet e stilimit për të zgjedhur në CSS janë jashtëzakonisht të kufizuara. Por shumë shpesh zgjedhja standarde nuk përshtatet fare në dizajn, kështu që ju duhet të stiloni përzgjedhjen duke përdorur JavaScript. Në fakt, në këtë artikull ne do të krijojmë përzgjedhjen tonë duke përdorur JavaScript.

Ka shumë shtojca të gatshme, përfshirë ato jQuery, që ju lejojnë të bëni të gjitha këto. Por nëse nuk keni nevojë për diçka super komplekse, atëherë është më e lehtë të bëni gjithçka vetë nga e para duke përdorur JavaScript të pastër.

Para së gjithash, le të krijojmë strukturën HTML të zgjedhjes sonë të ardhshme:

Elementi 1
Elementi 2
Elementi 3

Elementi 1

Elementi 2

Elementi 3

Siç mund ta shihni, nuk ka asnjë etiketë të përzgjedhur këtu. Tani ne mund të stilojmë zgjedhjen tonë të personalizuar sipas dëshirës duke përdorur CSS:

Zgjidh (
ngjyra e sfondit: #0ee;
kufiri-radius: 10px;
mbushje: 10px 0;
gjerësia: 200 px;
}
.zgjidh p(
kursori: treguesi;
diferenca: 0;
mbushje: 5px 20px;
}
.zgjidh p.aktive (
ngjyra e sfondit: #ee0;
}

Sigurisht, këtu mund të bësh çfarë të duash. Dhe së fundi, duhet ta kthejmë pamjen në funksionalitet të përzgjedhur, domethënë të zgjedhim dhe theksojmë vetëm një element nga disa, dhe më pas ta dorëzojmë atë së bashku me formularin. Për ta bërë këtë ne do të përdorim JavaScript:

Zgjedhja e funksionit(elementi) (
var vlera = element.getAttribute("vlera e te dhenave"); // Lexoni vlerën e elementit të zgjedhur
var nyjet = element.parentNode.childNodes; // Merrni të gjithë elementët e tjerë
për (var i = 0; i< nodes.length; i++) {
/* Filtro tekstin e jashtëm dhe elementët e hyrjes */
nëse (nyjet[i] shembulli i HTMLParagraphElement) (
/* Shtoni aktiv në elementin e zgjedhur, duke fshirë këtë klasë nga të gjithë të tjerët */
if (vlera == nyjet[i].getAttribute("vlera e te dhenave")) nyjet[i].className = "aktive";
other nodes[i].className = "";
}
}
dokument.getElementById("zgjedhja_my").vlera = vlera; // Vendosni fushën e fshehur në vlerën e zgjedhur
}

Çelësi për zbatimin e funksionalitetit të përzgjedhjes është fusha e fshehur, e cila ruan vlerën nga përzgjedhja jonë. Dhe kjo është vlera që do të dërgohet kur të dorëzohet formulari.

Kjo është një mënyrë e thjeshtë për të bërë absolutisht çdo stil të zgjedhur në JavaScript. Nëse përdorni jQuery, kodi do të jetë edhe më i thjeshtë.

Sigurisht, përzgjedhja standarde ka më shumë funksionalitet. Për shembull, ai i përgjigjet tab , dhe gjithashtu mund të përdorni tastet e shigjetave në tastierë për të lundruar nëpër elementë. Por ju gjithashtu mund t'i zbatoni të gjitha këto në JavaScript nëse është e nevojshme.

Dhe rekomandimi i fundit. Kodi përdorte etiketën noscript, dhe kjo nuk ishte rastësi. Meqenëse jo të gjithë kanë JavaScript të aktivizuar dhe që formulari të funksionojë fare për këta përdorues, duhet të shfaqni të paktën një përzgjedhje standarde. Dhe kushdo që ka JavaScript të aktivizuar do të shohë përzgjedhjen tonë të bukur.

Kur krijon një faqe interneti, çdo mjeshtër ueb përpiqet ta bëjë krijimin e tij të lexohet në mënyrë të barabartë në të gjithë shfletuesit, dhe kjo ndonjëherë shkakton telashe. Prandaj, në këtë mësim do të flasim për krijimin dhe stilimin e një elementi të faqes, siç është zgjedhja ose, më thjesht, një buton përzgjedhjeje. Ne do të shikojmë disa skripta që do të transformojnë një element të rregullt zgjidhni në një kontroll më elegant dhe funksional të faqes që shfaqet në mënyrë korrekte shfletues të ndryshëm. Pra, le të shohim se çfarë kemi ...

BURIMET

Në këtë tutorial ne do të përdorim HTML5, kështu që para së gjithash krijojmë shënimin HTML, i cili duket kështu:

Krijo një element të zgjedhur për sitin | Demonstrimi nga faqja e internetit




Bëni zgjedhjen tuaj Zgjidhni një produkt Fletë informacioni mbi dizajnin e uebit CMS+shabllone, shtojca Mësime interesante për krijimin e faqeve të internetit Lajmet RSS nga blogu ynë janë gjithmonë afër

Më pas, le të shohim disa atribute, për shembull atributin të dhëna përdoren për të kombinuar informacionin në elementet e opsionit. Ato përmbajnë një ikonë produkti dhe një përshkrim teksti me formatim. Të dy këta artikuj do të shfaqen në versionin tonë të elementit të zgjedhur.

Tani lidhim efektet, jQuery kontrollon elementin zgjidhni, dhe, duke përdorur atributet e të dhënave, ndërton shënjimin që shtohet menjëherë pas elementit zgjidhni:

Zgjidhni produktin

• JavaScript + jQuery për fillestarët në format video shikoni video prezantimin
• PHP + MySQL për fillestarët blej
• WordPress - blog profesional në një ditë shkarkojnë
• Joomla - faqe interneti profesionale në një ditë blej

Menuja jonë do të krijojë një listë të pa renditur artikujsh li, të cilat përfaqësojnë çdo artikull opsion nga elementi zgjidhni.

Tani le të shohim JavaScript-in tonë, i cili do të animojë pa probleme elementin tonë:

$(document).ready(function())( // Elementi i përzgjedhur që do të zëvendësohet: var zgjidhni = $("select.makeMeFancy"); var selectBoxContainer = $("",( gjerësia: select.outerWidth() , emri i klasës : "tzSelect", html: "" ));

",(ClassName:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Kaloni përmes elementit të përzgjedhjes origjinale select.find("option").each(function(i)(var option = $(this if(i==select.attr("selectedIndex"))(selectBox.html(option.text());) // Meqenëse përdoret jQuery 1.4.3, ne mund të aksesojmë // të dhënat HTML5); atributet duke përdorur metodën e të dhënave() if(option.data("kapërce"))(kthimi i vërtetë;) // Krijo një artikull në rënie sipas // ikonës së të dhënave dhe atributeve të të dhënave HTML5: var li = $("
• ",(html:" "+ option.data ("html-tekst")+"" )); li.click(function())(selectBox.html(option.text()); dropDown.trigger("fsheh"); // Kur ndodh ngjarja e klikimit, ne reflektojmë gjithashtu // në elementin e zgjedhur origjinal: select.val(option.val() dropDown.append(li) ); / Lidh ngjarje me porosi shfaq dhe fshih te elementi dropdown: dropDown.bind("show",function())( if(dropDown.is(":animated"))( return false; ) selectBox.addClass("expanded"); dropDown.slideDown () ; )).bind("fsheh",funksion())(if(dropDown.is(":animated"))( return false; ) selectBox.removeClass("expanded"); dropDown.slideUp(); ).bind ("toggle",function())( if(selectBox.hasClass("expanded"))( dropDown.trigger ("fshih"); ) else dropDown.trigger("shfaq"); ));

  selectBox.click(function())( dropDown.trigger("toggle"); return false;)); // Nëse klikoni butonin e miut kudo në faqe ndërsa elementi dropDown është i hapur, // ai do të fshihet: $(document).click(function())( dropDown.trigger("hide"); )); )); zgjidhni Tani një nuancë e vogël, kur krijojmë elementin tonë, elementin origjinal

  ruhet, do të fshihet duke përdorur metodën hide(). Kjo nuk është më pak e rëndësishme, sepse të gjitha ndryshimet reflektohen në të. Pastaj ne shikojmë tonën Stilet CSS

  #page( gjerësia:490px; margjina:50px automatik; ) #page h1( font-weight:normal; text-indent:-99999px; overflow:hidden; background:url("../img/your_product.png") nr -përsëritni gjerësinë:490px;lartësia:36px) #faqe:20px; gjerësia:460px;) - gjerësi:460px:relativ; :100% gjerësi:100% /* Vendosja e fontit:13px/34px "Lucida Sans Unicode", sans-serif:1px 0 # EEEEEE; ; /* Duke përdorur sfonde të shumta 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");pozicioni i sfondit: 0 -136px, djathtas - 204px, 50% -68px, 0 0; sfond-përsëritje: pa përsëritje, pa përsëritje, pa përsëritje, përsëritje-x; kursori:pointer;

  -moz-border-radius:3px; -webkit-border-radius:3px; kufiri-rreze: 3px; ) .tzSelect .selectBox:hover, .tzSelect .selectBox.expanded( background-position:0 -170px, djathtas -238px, 50% -102px, 0 -34px; color:#2c5667; text-hija:1xcd ​​#1px ;) Ky shembull përdor shumë imazhe transparente që janë të mbivendosura një mbi një. Të shumëfishta imazhet e sfondit

  TzSelect .dropDown( pozicioni:absolute; sipër:40px; majtas:0; gjerësia:100%; kufiri:1px solid #32333b; gjerësia e kufirit:0 1px; stili i listës: asnjë; -moz-kutia-sizing:border -box-webkit-sizing:border-box:0 0 4px #111 ) .tzZgjidh li (lartësia:85px;) relative; ("../img/dropdown_slice.png"),url("../img/dropdown_slice.png"); , pa-përsëritje, përsërit-x ) .tzZgjidh li:hover( pozicioni i sfondit: 50% -256px, 0 - 85px, 0 0; ) .tzZgjidh li span(majtas:88px; pozicioni:absolute; lart:27px; ) .tzZgjidh li i(ngjyra:#999999; shfaqja:blloku; madhësia e shkronjave:12px; ) .tzZgjidh li img(majtas:9px; pozicioni:absolute;lart:13px)

  Duke përdorur madhësia e kutisë, duhet t'i caktojmë një vlerë kuti-kufi, kjo do të parandalojë që gjerësia e përgjithshme të rritet pasi fragmentet tona vendosen brenda elementit. Kjo është e gjitha, elementët tanë të përmirësuar të përzgjedhjes janë krijuar, fat të mirë me eksperimentet tuaja.