Interaktiv design

Sådan stiler «Vælg stemmer ved hjælp af DropKick

Når det kommer til styling af websider, er intet så vanskeligt som former. Og når det kommer til stylingformer - næsten - intet er lige så vanskeligt som med CSS, men der er store begrænsninger på, hvor meget vi kan opnå med CSS alene. Ofte er den eneste levedygtige mulighed styling via JavaScript, og som en form for progressiv forbedring er det ikke noget, vi skal vige væk fra.

I denne artikel bruger vi Dropkick at oprette dropdown. Hvad dropkick gør er at omdanne

Det første vi skal gøre er at oprette en

Ringer DropKick

Når vi har oprettet vores ind i noget, vi kan være sikre på styling med CSS. Desuden er vores værdier blevet indsat i de nye HTML5 data attributter (med navnet data-dk-dropdown-værdi).

Vi kan nu style vores dropdown med CSS, eller bruge en DropKicks temaer, hvis vi foretrækker det; På tidspunktet for skrivningen er der tre temaer tilgængelige, standard, mørk glans og lysglans. Men de fleste vil gerne bruge deres egne stilarter, der matcher deres projekts behov.

Udvidelse af DropKick

Udvidelse af DropKick er en simpel proces. Hvis vi f.eks. Ville opdage, hvornår der er foretaget en ændring i rullemenuen, kan vi tilføje ændringsbegivenhedshåndtereren som sådan: 

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

Endelige tanker

Jeg er sikker på, at der er tusind måder at style en vælg menu uden brug af jQuery, men dem, der bruger kun CSS, kæmper for en tabt kamp mod browserens standardindstillinger. Enkeltheden af ​​dette plugin og den enorme fleksibilitet, den giver, og den progressive enhancement-tilgang, det tager, betyder, at DropKick er en glimrende løsning.

Har du brugt DropKick i et projekt? Har du en foretrukket metode til styling