Interaktiv design

Hvordan stil «Velg utvalg Bruk DropKick

Når det gjelder styling av nettsider, er ingenting så vanskelig som former. Og når det gjelder styling skjemaer - nesten - ingenting er like vanskelig som med CSS, men det er store begrensninger på hvor mye vi kan oppnå med CSS alene. Ofte er det eneste levedyktige alternativet styling via JavaScript, og som en form for progressiv forbedring er det ikke noe vi trenger å vike bort fra.

I denne artikkelen skal vi bruke Dropkick å opprette dropdown. Hva dropkick gjør er å transformere

Det første vi må gjøre er å sette opp en

Ringer DropKick

Når vi har satt opp vår inn i noe vi kan være sikre på styling med CSS. Videre er våre verdier satt inn i de nye HTML5-dataattributtene (med navnet data-dk-dropdown-verdien).

Vi kan nå stillegge vår dropdown med CSS, eller bruk en DropKicks temaer hvis vi foretrekker det; På tidspunktet for skrivingen er det tre temaer tilgjengelig, standard, mørk glans og lysglans. Men de fleste vil ønske å bruke sine egne stiler som samsvarer med prosjektets behov.

Utvider DropKick

Utvidelse av DropKick er en enkel prosess. For eksempel, hvis vi ønsket å oppdage når en endring er gjort i rullegardinmenyen, kan vi legge til endringshendelsesbehandleren, slik som: 

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

Siste tanker

Jeg er sikker på at det finnes tusen måter å stillegge en seleksjonsmeny uten bruk av jQuery, men de som bruker bare CSS, kjemper for en taper kamp mot nettleserens standardinnstillinger. Enkelheten ved dette pluginet og den enorme fleksibiliteten den gir, og den progressive forbedringsmetoden som det tar, betyr DropKick er en utmerket løsning.

Har du brukt DropKick i et prosjekt? Har du en foretrukket metode for styling