Muuta Valitse tyyli jQuerylla. IkSelect - täydellinen laajennus valintojen muotoiluun Kaunis select jquery

Huomio! Jatkokehitys ja laajennuksen tuki on lopetettu, koska se on nyt osa .

Yksi epämiellyttävimmistä (ja sanoisin jopa kauheimmista) asioista verkkokehityksessä on html-lomakkeiden asettelu. Valitettavasti lomakeelementtien näyttämiselle ei ole yhtenäistä standardia selaimesta ja selaimesta riippumatta käyttöjärjestelmä, aivan kuten ei ole mitään tapaa mukauttaa joitain näistä elementeistä käyttämällä peräkkäisiä tyylisivuja.

Seuraavien HTML-lomakeelementtien tyyliä ei voi muokata kokonaan:

• pudotusvalikosta ;
• valintaruutu ;
• kytkin.
• kenttä tiedoston lähettämistä varten.

Kuten julkaisun otsikosta jo käy ilmi, puhumme tässä vain valituista.

On olemassa monia valmiita ratkaisuja jQuery-laajennusten muodossa avattavien luetteloiden muotoiluun. Mutta minä (johtuen siitä, että mikään laajennuksista ei syystä tai toisesta sopinut minulle) päätin keksiä oman pyöräni uudelleen ja kirjoitin oman laajennukseni, jonka jaan tässä artikkelissa.

Haluaisin heti huomauttaa, että tämä liitännäinen ei sovellu kaikkiin mahdollisiin Selects-käyttötapauksiin (lue haitat).

Voit nähdä esimerkin valitsimen tyylistä käyttämällä laajennusta. Suunnittelin ne ilman kuvia.

• Kun JavaScript on poistettu käytöstä, vakiovalitsimet näytetään.
• Skripti on kooltaan pieni, noin 4 kilotavua.
• Toimii IE6+:ssa ja kaikissa nykyaikaisissa työpöytäselaimissa.
• Näytetään rivissä.
• Helposti muotoiltu CSS:n avulla.
• Voit asettaa pudotusvalikon enimmäiskorkeuden (CSS-ominaisuus max-height).
• Säätää automaattisesti leveyttä, jos sitä ei ole määritetty.
• Tukee hiiren rullaa.
• Siinä on "älykäs paikannus", ts. ei ylitä sivun näkyvää osaa luetteloa avattaessa.
• Pystyy "saappaamaan" sarkainnäppäintä ja vaihtaa näppäimistön nuolilla.
• Tukee "disabled"-attribuuttia.
• Se toimii myös dynaamisesti lisättyjen/muutettujen valintojen kanssa.

• Ei tue multiple-attribuuttia, ts. ei salli useiden kohteiden valitsemista (monivalinta).
• Ei tue luettelokohteiden (tunnisteen) ryhmittelyä.
• Ei tue vaihtoa näppäimistön nuolinäppäimillä, kun luettelo avataan napsauttamalla hiirtä.

Laajennus ei ole saatavilla, koska se ei ole enää relevanttia.

Versio: 1.0.1 | Lataukset: 11103 | Koko: 7 KB | Viimeisin päivitys: 07.10.2012

Jos sivustolla ei ole vielä käytössä jQuerya, lisää seuraava rivi ennen tunnistetta:

Sisällytä heti jQueryn jälkeen tiedosto komentosarjan kanssa:

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

Aseta tämä koodi ennen tunnistetta yllä olevien tiedostojen jälkeen.

Kun muutat dynaamisesti valintoja, sinun on käynnistettävä päivityslaukaisin esimerkiksi:

(function($) ( $(function() ( $("painike").napsauta(funktio()) ( $("select").find("optio:nth-child(5)").attr("valittu ", tosi); $("valitse").trigger("päivitä"); )) )) ))(jQuery)

Sen rakenne näyttää tältä:

-- Valitse --

• -- Valitse --
• Kohta 1
• Kohta 2
• Kohta 3

Voit antaa valitsee kanssa käyttämällä CSS:ää, käytä seuraavia luokkia:

Tällaisen käsikirjoituksen luominen on melko vaivalloinen tehtävä, koska sinun on otettava huomioon monia eri kohtia. Toivon todella, ettei mitään vakavia bugeja esiinny. Mutta jos jotain, kerro minulle kommenteissa.

Hei habrauserit ja vain lukijat. Suhteellisen äskettäin pohdin, kuinka tyylejä käytetään Select tagiin. Kaikki haluavat, että lomakkeen tyyli vastaa sivuston suunnittelua, mutta kaikkea ei voi vielä kuvailla puhtaalla CSS:llä. Tässä artikkelissa tarkastellaan yksinkertaista esimerkkiä oman valintaluettelon kirjoittamisesta CSS:n ja JavaScript-kielikirjaston avulla - jQuery. Uskon, että erityisesti aloittelijat ovat kiinnostuneita tästä materiaalista. Tietysti olisi parempi kirjoittaa se alkuperäisellä JS:llä, mutta kaikki tietävät, että koodirivejä olisi enemmän, ja se tuskin olisi selkeämpi.

Ollakseni rehellinen, ennen kuin aloitin seuraavan pyörän luomisen, yritin löytää samanlaista ratkaisua, mutta en löytänyt muuta kuin näyttäviä div-kääreitä select-tunnisteelle. Ja ajattelin, että olisi mukava kirjoittaa jotain yksinkertaista ja tarpeellista. No, aloitetaan!

Muovailumuovailupiirissämme on kolme tiedostoa:

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

selectbox.html

Kuukausi

• tammikuu
• helmikuu
• maaliskuuta
• huhtikuu
• toukokuuta
• kesäkuuta
• heinäkuu
• elokuu
• syyskuu
• lokakuu
• marraskuu
• joulukuu

selectbox.css

div#selectBox ( leveys: 250px; sijainti: suhteellinen; korkeus: 50px; reunan säde: 3px; reunus: tasainen 1px vaaleanharmaa; taustaväri: #fff; väri: #333; kohdistin: osoitin; ylivuoto: piilotettu; siirtymä: 0.3s : 15px; ) /* Safari-, Chrome- ja Opera-käyttäjille mukava bonus on tyylitelty vierityspalkki. */ ::-webkit-scrollbar ( tausta: läpinäkyvä; leveys: 0,5 em; sijainti: absoluuttinen; ) ::-webkit-scrollbar-track ( tausta: läpinäkyvä; sijainti: absoluuttinen; z-indeksi: -2; ) :: -webkit-scrollbar-thumb (reunuksen säde: 100px; tausta: #888; ) ul#selectMenuBox ( tausta: #ffff; siirtymä: .3s; leveys: 100%; korkeus: 200px; ylivuoto-y: automaattinen; ylivuoto- x: piilotettu !tärkeää #333 tausta: #e1e1e1;

Nyt herkkujen pariin! Harkitsemme lähdekoodi laajennus selectbox() jQuerylle selectbox.js-tiedosto:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // alkuparametrit // määritä div"a. var selectDefaultHeight = $("#selectBox").height(); // kuvan kierto kulma div:ssä (mikä on asetettu skriptin alussa ) $("#selectBox > p.valueTag").click(function() ( // objektin korkeuden laskeminen korkeus()-metodilla var currentHeight = $(). "#selectBox").height(); // täsmäämisehdon tarkistaminen/ ei vastaa annettua korkeutta ensin, // ymmärtääksesi mitä tehdä seuraavaksi, jos (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((muunnos: rotateDefault)); ) ));

ulkoinen tiedosto
komentosarja ja kutsu laajennus seuraavasti:

$("valitsin").selectbox();

Sisällytä ensin kutsu dokumenttiobjektin ready()-menetelmään, jotta liitännäinen ladataan, kun asiakirja on ladattu kokonaan. Saat lisätietoja siitä, mikä jQuery-laajennus on.

Äskettäin muukalainen kirjoitti minulle ja pyysi minua testaamaan hänen ikSelect-liitännäistä, jonka hän yritti kirjoittaa mahdollisimman lähelle ihannetta. Pidin laajennuksesta niin paljon, että laajan testauksen ja virheenkorjauksen jälkeen päätin kirjoittaa siitä arvostelun ja lopettaa tämän aiheen sekä auttaa älykästä kehittäjää pääsemään keskukseen.

Pähkinänkuoressa: se voi tehdä melkein kaiken, mitä tavallinen valinta voi tehdä, samalla kun se on täydellisesti tyylitelty ja mukautettu valitun toteutuksen erityispiirteisiin eri selaimet. Plugin kopioidaan kokonaan ulkonäkö natiivi Mac OS X Select, mutta se voidaan muotoilla CSS:n kautta ilman ongelmia.

Tältä se näyttää suljettuna:

Näin avoimena:

Edut:

• toimii kaikissa selaimissa (IE6+, FF, Opera, Chrome, Safari), myös mobiiliselaimissa
• säätää leveyttä automaattisesti
• avautuu aina sivun näkyvään osaan (ns. "älykäs paikannus"), sekä vaaka- että pystysuunnassa
• voit asettaa avattavan luettelon enimmäiskorkeuden
• voit ryhmitellä vaihtoehtoja (optgroup)
• täysin ohjattavissa näppäimistöltä (mukaan lukien siirtymiin vastaaminen Tab, PgUp, PgDown, Home, End)
• on valinta, joka perustuu ensimmäisiin kirjaimiin (ei vain yhteen, vaan myös seuraaviin)
• tukee vierittämistä hiiren pyörällä
• lisätty riviin (inline-block)
• toimii hyvin suurilla listoilla (1000+ kohdetta)
• jättää tavallisen valinnan, kun javascript on poistettu käytöstä
• on loistava API

• ei salli usean kohteen valitsemista kerralla (monivalinta)
• ei muotoile pudotusvalikon vierityspalkkia (koska se vaikuttaa nopeuteen liikaa)
• ei juokse oluelle

Opera minissä pysyvät vakiovalitsimet, jotta sivut eivät lataudu uudelleen luetteloa avattaessa. Opera Mobilessa se toimii samalla tavalla kuin työpöytäversiossa.

Jokainen, joka suhtautuu vakavasti sivun asetteluun, tietää, että CSS:n tyylivaihtoehdot ovat erittäin rajalliset. Mutta hyvin usein vakiovalinta ei sovi suunnitteluun ollenkaan, joten valinta on muotoiltava JavaScriptin avulla. Itse asiassa tässä artikkelissa luomme oman valintamme JavaScriptin avulla.

On olemassa paljon valmiita laajennuksia, mukaan lukien jQuery-laajennukset, joiden avulla voit tehdä kaiken tämän. Mutta jos et tarvitse jotain erittäin monimutkaista, on helpompi tehdä kaikki itse tyhjästä käyttämällä puhdasta JavaScriptiä.

Ensinnäkin luodaan tulevaisuuden valintamme HTML-rakenne:

Elementti 1
Elementti 2
Elementti 3

Elementti 1

Elementti 2

Elementti 3

Kuten näet, tässä ei ole valintatunnistetta. Nyt voimme tyylillä mukautetun valintamme haluamallamme tavalla käyttämällä CSS:ää:

Valitse (
taustaväri: #0ee;
reunan säde: 10px;
täyte: 10px 0;
leveys: 200px;
}
.select p(
kohdistin: osoitin;
marginaali: 0;
täyte: 5px 20px;
}
.select p.active (
taustaväri: #ee0;
}

Toki täällä saa tehdä mitä haluaa. Ja lopuksi meidän on muutettava ulkoasu Select-toiminnallisuudeksi, eli valitaan ja korostetaan vain yksi elementti useista ja sitten lähetetään se lomakkeen mukana. Tätä varten käytämme JavaScriptiä:

Function select(element) (
var arvo = elementti.getAttribute("data-arvo"); // Lue valitun elementin arvo
var solmut = element.parentNode.childNodes; // Hae kaikki muut elementit
for (var i = 0; i< nodes.length; i++) {
/* Suodata pois ylimääräinen teksti ja syöttöelementit */
if (HTMLParagraphElementin solmut[i] esiintymä) (
/* Lisää aktiivinen valittuun elementtiin, poistaen tämän luokan kaikista muista */
if (arvo == solmut[i].getAttribute("data-arvo")) nodes[i].className = "aktiivinen";
else nodes[i].luokanNimi = "";
}
}
document.getElementById("my_select").arvo = arvo; // Aseta piilotettu kenttä valittuun arvoon
}

Avain Select-toiminnon toteuttamiseen on piilotettu kenttä, joka tallentaa arvon valinnastamme. Ja tämä on arvo, joka lähetetään, kun lomake lähetetään.

Tämä on yksinkertainen tapa tehdä täysin mikä tahansa valittu tyyli JavaScriptissä. Jos käytät jQueryä, koodi on vielä yksinkertaisempi.

Tietysti vakiovalikossa on enemmän toimintoja. Se esimerkiksi reagoi sarkaimeen, ja voit myös käyttää näppäimistön nuolinäppäimiä elementtien selaamiseen. Mutta voit myös toteuttaa tämän kaiken tarvittaessa JavaScriptissä.

Ja viimeinen suositus. Koodi käytti noscript-tunnistetta, eikä tämä ollut sattumaa. Koska kaikilla ei ole JavaScript käytössä ja jotta lomake toimisi ollenkaan tällaisilla käyttäjillä, sinun on näytettävä vähintään vakiovalinta . Ja kaikki, joilla on JavaScript käytössä, näkevät kauniin valintamme.

Verkkosivustoa luodessaan jokainen verkkomestari yrittää saada luomuksensa luettavaksi tasapuolisesti kaikissa selaimissa, mikä aiheuttaa joskus ongelmia. Siksi tällä oppitunnilla puhumme sivustoelementin, kuten valinta tai yksinkertaisemmin sanottuna valintapainikkeen, luomisesta ja muotoilusta. Tarkastelemme useita skriptejä, jotka muuttavat tavallisen elementin valitse tyylikkäämmäksi ja toimivammaksi sivustoohjaimeksi, joka näkyy oikein eri selaimet. Joten katsotaan mitä saamme...

LÄHTEET

Oppitunnilla käytämme HTML5:tä, joten ensin luomme HTML-merkinnän, joka näyttää tältä:

Luo sivustolle valintaelementti | Esittely nettisivuilta




Tee valintasi Valitse tuote Tietolehti web-suunnittelusta CMS+mallit, laajennukset Mielenkiintoisia oppitunteja verkkosivustojen luomisesta RSS-uutiset blogistamme ovat aina lähellä

Seuraavaksi tarkastellaan joitain määritteitä, esimerkiksi attribuuttia tiedot käytetään yhdistämään tietoja optioelementeissä. Ne sisältävät tuotekuvakkeen ja tekstikuvauksen muotoiluineen. Molemmat kohteet näkyvät Select-elementin versiossamme.

Nyt yhdistämme tehosteet, jQuery tarkistaa elementin valitse, ja dataattribuuttien avulla rakentaa merkinnän, joka lisätään välittömästi elementin jälkeen valitse:

Valitse tuote

• JavaScript + jQuery aloittelijoille videomuodossa katso videoesitys
• PHP + MySQL aloittelijoille ostaa
• WordPress - ammattimainen blogi yhdessä päivässä lataa
• Joomla - ammattimainen verkkosivusto yhdessä päivässä ostaa

Ruokalistamme muodostaa järjestämättömän listan tuotteista li, jotka edustavat kutakin tuotetta vaihtoehto elementistä valitse.

Katsotaan nyt JavaScriptiämme, joka animoi elementtimme sujuvasti:

$(document).ready(function())( // Korvattava valintaelementti: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",( leveys: select.outerWidth() , className : "tzSelect", html: "" )); var dropDown = $("

",(className:"dropDown")); var selectBox = selectBoxContainer.find(".selectBox"); // Selaa alkuperäistä valintaelementtiä select.find("option").each(function(i)( var option = $(this); if(i==select.attr("selectedIndex"))( selectBox.html(option.text());) // Koska jQuery 1.4.3 on käytössä, voimme käyttää // HTML5-tietoja attribuutit data()-menetelmällä if(optio.data("skip"))(return true; ) // Luo avattava kohde tietokuvakkeen ja HTML5-tietomääritteiden mukaan: var li = $("
• ",(html: " "+ option.data("html-text")+"" )); li.click(function())( selectBox.html(option.text()); dropDown.trigger("piilota"); // Kun se tapahtuu napsautustapahtumassa, heijastamme myös alkuperäisen select-elementin muutoksia: select.val(option.val()) select.hide(). / Sido mukautettuja tapahtumia näytä ja piilota dropDown-elementtiin: dropDown.bind("show",function())( if(dropDown.is(":animated"))( return false; ) selectBox.addClass("expanded"); dropDown.slideDown () ; )).bind("piilota",funktio())( if(dropDown.is(":animated"))( return false; ) selectBox.removeClass("expanded"); dropDown.slideUp(); ) ).bind ("toggle",function())( if(selectBox.hasClass("expanded"))( dropDown.trigger("piilota"); ) else dropDown.trigger("show"); ));

  selectBox.click(function())( dropDown.trigger("toggle"); return false; )); // Jos napsautat hiiren painiketta missä tahansa sivulla, kun dropDown-elementti on auki, // se piilotetaan: $(document).click(function())( dropDown.trigger("piilota"); )); )); valitse Nyt pieni vivahde, kun luomme elementtiämme, alkuperäistä elementtiä

  tallennettu, se piilotetaan käyttämällä hide()-menetelmää. Tämä ei ole yhtä tärkeää, koska kaikki muutokset näkyvät siinä. Sitten katsomme omaamme CSS-tyylejä

  #sivu( leveys:490px; margin:50px auto; ) #page h1( font-weight:normal; text-indent:-99999px; overflow:hidden; background:url("../img/your_product.png") ei -toisto leveys: 490px; korkeus: 36px; #sivun muoto - leveys: 460px; /* Esilataa avattavan valikon kohteiden taustakuva. :100%; leveys: 100%; /* fontin asettaminen ; /* Useiden CSS3-taustojen käyttö */ 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");tausta-sijainti: 0 -136px, oikea - 204px, 50% -68px, 0 0; background-repeat: ei toistoa, ei toistoa, ei toistoa, toista-x; kursori:osoitin;

  -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; ). ;) Tässä esimerkissä käytetään monia läpinäkyviä kuvia, jotka on asetettu päällekkäin. Useita taustakuvia

  TzSelect .dropDown( position:absolute; top:40px; left:0; width:100%; border:1px solid #32333b; border-width:0 1px 1px; list-style:none; -moz-box-sizing:border -ruutu suhteellinen; /* Useiden CSS3-taustojen käyttäminen */ background:url("../img/dropdown_slice.png") repeat- x #222, url; (../img/dropdown_slice.png"),url(../img/dropdown_slice.png"); tausta-sijainti: 50% -171px, 0 -85px, 0 0; , ei toistoa, toista-x ) .tzValitse li:hover( taustan sijainti: 50% -256px, 0 - 85px, 0 0; ) .tzValitse li span(vasen:88px; sijainti:absoluuttinen; ylhäällä:27px; ) .tzValitse li i( color:#999999; display:block; font-size:12px; ) .tzSelect li img(vasen:9px; position:absolute;top:13px)

  Käyttämällä laatikon mitoitus, meidän on annettava sille arvo raja-laatikko, tämä estää kokonaisleveyden kasvamisen, koska fragmenttimme on sijoitettu elementin sisään. Siinä kaikki, parannetut valintaelementit on luotu, onnea kokeiluihin.