Interaktiivinen muotoilu

Kuinka tyylikäs "Valitse" DropKickin avulla

Kun on kyse styling verkkosivuja, mikään ei ole niin hankala kuin lomakkeita. Ja kun on kyse styling muodoista - melkein - mikään ei ole niin hankalaa kuin CSS: llä, mutta on olemassa suuria rajoituksia siitä, kuinka paljon voimme saavuttaa CSS: llä yksin. Usein ainoa toteuttamiskelpoinen vaihtoehto on muotoilu JavaScriptin kautta, ja progressiivisen parannuksen muoto ei ole sellainen, jota meidän on vältettävä.

Tässä artikkelissa käytämme Dropkick luoda pudotusvalikosta. Mikä dropkick tekee, on

Ensinnäkin meidän on tehtävä a

Calling DropKick

Kun olemme asettaneet meidän osaksi jotain, jolla voimme luottaa muotoiluun CSS: llä. Lisäksi arvojamme on lisätty uuteen HTML5-datamääritteeseen (nimitieto-dk-dropdown-arvo).

Voimme nyt muotoilla pudotuspistettä CSS: llä tai käyttää yhtä DropKickin teemoja, jos me haluamme. kirjoitushetkellä on käytettävissä kolme teemaa, oletus, tumma kiilto ja vaalea kiilto. Mutta useimmat ihmiset haluavat käyttää omia tyylejä, jotka vastaavat heidän hankkeen tarpeita.

DropKickin laajentaminen

DropKickin laajentaminen on yksinkertainen prosessi. Jos esimerkiksi halusimme havaita, milloin muutos tehdään pudotusvalikossa, voimme lisätä muutoksen tapahtumakäsittelijän, kuten: 

$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});

Lopulliset ajatukset

Olen varma, että on olemassa tuhat tapaa suunnitella valikoita ilman jQueryä, mutta ne, jotka käyttävät vain CSS: tä, taistelevat taistelussa selaimen oletusasetuksia vastaan. Tämän plugin yksinkertaisuus ja sen tarjoama valtava joustavuus sekä progressiivinen parannusmenetelmä, jonka ansiosta se vie, tarkoittaa DropKickin erinomaista ratkaisua.

Oletko käyttänyt DropKickiä projektissa? Onko sinulla mieluummin tyylikäs muotoilu