Valitse avattavan luettelon tyyli. JQuery-laajennus valintojen muotoiluun
Hyvin usein suunnittelijat piirtävät asetteluja epätyypillisillä muotoelementeillä, ts. Valintaruutujen, valintanappien, syötteiden ja valitsimien muotoilu eroaa selaimen oletusarvoista. Siten taittosuunnittelija joutuu räätälöimään suunnittelua, mukaan lukien valitut elementit.
Tässä artikkelissa tarkastellaan, kuinka muuttaa ulkomuoto valitse Noudatamme kuitenkin seuraavaa ideologiaa. On järkevää mukauttaa vain valitsimen oletusarvoista kutistettua tilaa, ja pudotusvalikon suunnittelun tulee pysyä vakiona. Siksi alla kuvattu ratkaisu ei toimi, jos tarvitset monimutkaisen avattavan luettelon, jossa on esimerkiksi kuvakkeet tai valintaruudut jokaiselle vaihtoehdolle.
Toisaalta tämä lähestymistapa mahdollistaa:
1. Älä kirjoita javascript-koodi, joka jäljittelee valitsimien toimintaa. Kaikki logiikka on selaimessa. Nykyään on olemassa monia laajennuksia, mutta et usein löydä sellaista, joka käsittelee kaikkia reunatapauksia, joita käyttäjä kohtaa ollessaan vuorovaikutuksessa tämän ohjauksen kanssa. Esimerkki tällaisesta ääritapauksesta olisi automaattinen valinta avattavan luettelon sijainti (avautuu alas tai ylös).
2. Koska selain on vastuussa avattavan luettelon toiminnasta ja suunnittelusta, ei tarvitse kirjoittaa mitään erillinen ratkaisu varten mobiililaitteet, jonka avulla voit kätevästi työskennellä valitsimien kanssa kosketuslaitteissa, joissa on pieni näyttö. Sisäänrakennetut alkuperäiset valitsimet hyväksyvät itse oikea tyyppi, koska päällä mobiilialustoille kaikki on jo mietitty. Esimerkiksi, iOS-käyttäjät kun napsautat valitsinta, he eivät näe mukautettua luetteloasi, vaan tavallisen tutun luettelon. Käyttäjien ei tarvitse mukauttaa käyttäytymistään tietyn sivustosi mukaan. Ja se on hänelle kätevää, ja tästä syystä loit sivuston.
Joten, kuten jo sanottu, varten valitse muotoilu CSS3-ominaisuudet riittävät.
Pääominaisuus, jonka avulla voit muuttaa valitsimen ulkoasua, on ulkonäkö. Se pakottaa elementin muuttumaan sellaiseksi, kuin haluat sen olevan, esimerkiksi voit pakottaa div:n muuttumaan painikkeeksi. Meidän kannaltamme kiinnostava arvo on kuitenkin none , mikä tarkoittaa, että elementtiä ei tarvitse muotoilla ollenkaan. Tällä tavalla voimme poistaa valintakohtaisen attribuutin - oikealla olevan alanuolen.
Valitse ( -webkit-appearance: ei mitään; -moz-appearance: ei mitään; -ms-appearance: ei mitään; ulkonäkö: ei mitään !tärkeää; )
Kuten näette, nuolen poistaminen ei ollut vaikeaa, nyt on vain lisättävä muutama triviaal CSS-ominaisuus, kuten kehys, fontti ja niin edelleen. Täällä voit tietysti lisätä pyöristettyjä kulmia, varjoja jne., kaikki kuten suunnittelija on piirtänyt asettelussa. Pääpudotusvalikko pysyy alkuperäisenä.
Valitse ( tausta: läpinäkyvä; näyttö: lohko; leveys: 100 %; reunus: 1px kiinteä #a7a7a7; väri: #32353a; fonttiperhe: 16/Arial, sans-serif; fontin koko: 16px; rivin korkeus: 1,4 ; font-weight: tavallinen;
Nyt ei jää muuta kuin lisätä nuoli tai jokin muu kuvake taustaksi. Käytämme taustaa, koska pseudoelementit kuten ennen ja jälkeen eivät toimi valituille. Parempaan sivustojen näyttöön erilaisia laitteita eri pikselitiheydillä, klo erilaisia asteikkoja ja niin edelleen. On yleistä käyttää SVG-kuvakkeita. Siksi muunnamme kuvakkeen data-URI:ksi käyttämällä online-URL-kooderia SVG:lle. Samalla on tärkeää muistaa se SVG-tunniste on oltava attribuutti xmlns="http://www.w3.org/2000/svg" .
Saat seuraavan tuloksen.
%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" fill-rule ="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A
Koska käytetty nuoli ei ole vakio, voit siirtää sen vasemmalle tai käyttää mitä tahansa muuta kuvaa nuolen sijaan tai voit olla kokonaan ilman kuvakkeita.
Huomio! Edelleen kehittäminen 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 joitain näistä elementeistä ei voi mukauttaa käyttämällä kaskadipöydät tyylejä.
Ei voi olla täysin tyylitelty seuraavat elementit html-lomakkeet:
- pudotusvalikosta ;
- valintaruutu ;
- vaihtaa .
- 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 pudotusluetteloiden 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 siitä tämä laajennus ei sovellu kaikkiin mahdollisiin valintatapauksiin (lue haitat).
Laajennuksen esittelyVoit nähdä esimerkin valitsimen tyylistä käyttämällä laajennusta. Suunnittelin ne ilman kuvia.
Edut- 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ä.
- Helppo muotoilla 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 mene pois näkyvä osa sivuja listaa 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 nuolilla, kun luetteloa laajennetaan napsauttamalla hiirtä.
Laajennus ei ole saatavilla, koska se ei ole enää relevanttia.
jQuery-laajennus "SelectBox Styler"Versio: 1.0.1 | Lataukset: 11103 | Koko: 7 KB | Viimeisin päivitys: 07.10.2012
Päivitykset 22.9.2012 Skripti muunnettiin laajennukseksi (mukaan lukien minimoitu versio) ja lisätty tuki valintojen dynaamiselle lisäämiselle/vaihtamiselle. 7.10.2012 Korjattu komentosarjan käyttäytyminen tunnisteen onchange-menetelmää käytettäessä. LiitännätJos jQuery ei ole vielä käytössä sivustolla, lisää seuraava rivi ennen tagia:
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 vaihdat valintoja dynaamisesti, sinun on käynnistettävä päivitysliipaisin, esimerkiksi:
(function($) ( $(function() ( $("painike").click(function() ( $("select").find("optio:nth-child(5)").attr("valittu ", tosi); $("valitse").trigger("päivitä"); )) )) ))(jQuery)
HTML-koodi laajennuksen suorittamisen jälkeenSen rakenne näyttää tältä:
-- Valitse --
- -- Valitse --
- Kohta 1
- Kohta 2
- Kohta 3
Voit antaa valitsee kanssa CSS:n avulla, käytä seuraavat luokat:
| .selectbox | ylätason säilö koko valinnalle |
| .selectbox .select | valitse tiivistetyssä tilassa |
| .selectbox.focused .select | keskity valintaan, kun sarkainnäppäintä painetaan |
| .selectbox .select .text | sisäkkäinen tagi tiivistetylle valinnalle lisäyksen tapauksessa taustakuva liukuovitekniikkaa käyttäen |
| .selectbox .trigger | tiivistetyn valinnan oikea puoli (ehdollinen kytkin) |
| .selectbox .trigger .arrow | alatunniste radiopainikkeelle (nuoli) |
| .selectbox .pudotusvalikosta | kääre avattavalle luettelolle |
| .selectbox .dropdown ul | pudotusvalikosta |
| .selectbox li | valitse kohde (valinnainen) |
| .selectbox li.selected | valittu valitse kohde |
| .selectbox li.disabled | pois käytöstä (ei valittavissa) valitse kohde |
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.
Kytkeä CSS-tiedosto pääosassa:
.. ..
Jos haluat käyttää toista teemaa, älä unohda kopioida CSS-tiedosto projektikansioosi.
Tyylin käyttäminen SelectiinEasyDropDown.js:ää käytettäessä merkintäsi pysyy selkeänä ja intuitiivisena. Sinun tarvitsee vain lisätä normaali elementti valitse . Voit myös sammuttaa tämä elementti, määritä nimiö ja määritä elementti, joka tulee valita oletuksena.
Voit määrittää elementin tyylin määrittämällä sille avattavan luokan. Tässä on esimerkki:
Asetusvaihtoehto 1 vaihtoehto 2 vaihtoehto 3 vaihtoehto 4 vaihtoehto 5
Siinä kaikki, et tarvitse mitään muuta. Nyt SELECT-elementistäsi tulee kauniimpi.
Jos sinun on ensin valittava elementti, käytä valittua attribuuttia. SISÄÄN tässä tapauksessa Emme suosittele etiketin käyttöä, koska... Näyttö saattaa olla hieman vääristynyt.
... Vaihtoehto 2...
Voit myös poistaa elementin käytöstä lisäämällä disable-attribuutin:
...
Teeman valintaEasyDropDown.js-laajennuksen mukana tulee kaksi tyyliteemaa: Metro ja Flat. Yhdistä ne käyttämällä HTML5-dataattribuuttiattribuuttia.
Jos haluat käyttää eri teemaa, kirjoita SELECT-elementin sisään data-settings="("wrapperClass":"theme-name")" . Theme-name-parametrilla voi olla seuraavat arvot: metro tai flat . Esimerkkejä:
...
CSS3:n myötä se tuli mahdolliseksi kaunis tyyli mille tahansa sivuston elementille. Koska CSS3 tarjoaa laajan valikoiman ominaisuuksia, jotka nopeuttavat verkkosivuston suunnittelun kehittämistä. Tänään muokkaamme CSS:n select-elementin tyyliä. Niille, jotka eivät tiedä, tämä elementti vastaa sivuston avattavasta luettelosta. Monet ihmiset käyttävät vakionäkymä, mutta sitä voidaan muuttaa sivustosi suunnitteluun sopivaksi.
Mikään ei ole parempaa kuin nähdä, miltä lista näyttää omin silmin:
ladataTältä tämä Select näyttää CSS:ssä:
Samanlaisia artikkeleita tästä aiheesta:
Nyt kuvailen asennusprosessia vaihe vaiheelta käyttämällä tätä avattavaa luetteloa tai yksinkertaisesti Valitse.
1 askel. Yhdistämme tarvittavat tiedostotSe on yksinkertaista. Kun olet ladannut arkiston lähteineen sieltä, tarvitsemme 2 tiedostoa (style.css ja select.js - jos olet yhdistämässä luettelon ensimmäistä vaihtoehtoa tai select_demo2.js - jos yhdistät toista vaihtoehtoa). Yhdistämme nämä kaksi tiedostoa tunnisteiden väliin:
| 1 2 |
Rakenteessa ei ole mitään supermonimutkaista (ja miksi sen pitäisi olla, se on vain HTML :)). Yksinkertainen muoto, jonka sisällä on pudotusvalikko Valitse kohteineen:
| 1 2 3 4 5 6 7 8 9 10 11 12 | Yhdistyneen kuningaskunnan maat: Valitse maa: Englanti Pohjois-Irlanti Skotlanti Wales |
Niitä ei ole montaa. Annan alla luettelon ensimmäisen vaihtoehdon tyylit. Haluaisin kiinnittää huomionne kuviin johtaviin polkuihin. Niitä on vain kaksi: ensimmäinen on luettelon avaamista ja toinen sulkemista varten. Ne näyttävät kahdelta nuolelta "ylös" ja "alas". Ne voidaan ladata artikkelin alussa olevista lähteistä:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | .dropcontainer ( sijainti : suhteellinen ; fontin koko : 16px ; väri : #777 ; ) .trigger ( väri : #777 ; täyte : 10px ; kirjasinkoko : 16px ; leveys : 50 % ; tausta : #fff url () 98 % center no-repeat : 1px solid #ccc : border-box - moz-transition: kaikki 0.5s helppous; kaikki 0,5 s helppo; siirtyminen: kaikki 0,5 s helppo) .trigger: hover ( väri: #777; tausta: #f5f5f5 url (../images/select-arrow-open.png ) 98 % ei toistoa ; ) . Activetrigger ( väri : #777 ; täyte : 10px ; kirjasinkoko : 16px ; leveys : 50 % ; tausta : #f5f5f5 url () 98 % keskellä ei toistoa ; näyttö : lohko ; reunus : 1px kiinteä #ccc ; -webkit- box-sizing : border-box ) .activetrigger :hover ( tausta : #f5f5f5 url (../images/select-arrow-close.png ) 98 % center no-repeat ; väri : #777 ; ) .activetrigger :active ( tausta : #f5f5f5 url (../images/select-arrow-close.png ) 98 % keskus ei toistoa ; väri : #777 ; ) .dropcontainer ul ( font-size : 16px ; border : 1px tausta : #fff leveys : 50% -box-sizing : border-box; dropcontainer ul li ( täyte : 5px ; -webkit-siirtymä : kaikki 0,5 s helppo; -moz-siirtymä : kaikki 0,5 s helppo; -o-siirtymä : kaikki 0,5 s helppo; siirtyminen : kaikki 0,5 s helppo ) .dropcontainer ul li : hover ( tausta : #f5f5f5 ; ääriviivat : ei mitään ; ) .dropcontainer ul li :first-child ( näyttö : ei mitään ; ) .dropcontainer ul li :last-child ( border-bottom : ei mitään ; ) .dropdownhidden ( ; näyttö : ei mitään .dropdownvisible ( korkeus : auto ; ) |
Demoesimerkissä tyylit sijaitsevat css-kansioon. Siksi, kun asetamme polun kansioon, jossa on kuvia, kirjoitamme ensin ".." (kaksi pistettä) mennäksesi yhden tason ylöspäin. Ja siirry sitten kuvakansioon.
Nyt haluan sanoa, mitä voidaan tehdä, jotta tyylejä ei kopioida kokonaan luettelon toiseen versioon (jossa kiinteä korkeus), muuta yhtä ominaisuutta ja hanki kiinteä luettelo.
Sinun on korvattava viimeinen pudotusvalikosta näkyvä ominaisuus:
| 1 2 3 | .dropdownvisible ( korkeus : auto ; ) |
| 1 2 3 4 | .dropdownvisible ( korkeus : 200px ; overflow-y : scroll ; ) |
Ja jos et unohda korvata komentosarjoja (katso yllä mitä muuttaa mihin), saat seuraavan:
Missä selaimissa tämä Select CSS (pudotusvalikko) toimii hyvin?- ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
- ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
- ✓ Ooppera 12.14, Ooppera 12.15, Ooppera 12.16
- ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
- ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
- ✓ Apple iOS– iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
- ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus
Oppitunnin lisäksi haluan kertoa sinulle, kuinka saada toinen tehoste sivustolle erittäin epätavallinen: hover-tehoste. Katso tämä lyhyt video ja näet kaiken itse.
JohtopäätösToinen sivuston elementti - Select voidaan muuttaa suunnitteluasi sopivaksi CSS:n ja Javascriptin avulla. Asennusprosessissa ei ole mitään monimutkaista, joten onnistut. Lisäksi artikkelin täydennyksenä saat luovan menetelmän ja asennusvideon.
