Interaktiv design

Så här stilar du «Välj sökord med DropKick

När det gäller att utforma webbsidor är ingenting lika knepigt som former. Och när det gäller styling former - nästan - ingenting är lika knepigt som med CSS, men det finns stora begränsningar för hur mycket vi kan uppnå med CSS ensamma. Ofta är det enda livsdugliga alternativet styling via JavaScript, och som en form av progressiv förbättring är det inte något vi behöver ta bort från.

I den här artikeln ska vi använda Dropkick att skapa dropdown. Vad dropkick gör är att omvandla

Det första vi behöver göra är att ställa in en

Ringer DropKick

När vi har ställt in vår in i något vi kan vara övertygade om att utforma med CSS. Dessutom har våra värden infogats i de nya HTML5-dataattributen (med namnet data-dk-dropdown-värde).

Vi kan nu ställa in rullgardinsmenyn med CSS, eller använd en DropKicks teman om vi föredrar; Vid skrivningstillfället finns tre teman tillgängliga, standard, mörkglans och ljusglans. Men de flesta vill vilja använda sina egna stilar som matchar projektets behov.

Utöka DropKick

Att förlänga DropKick är en enkel process. Om vi ​​till exempel vill upptäcka när en ändring görs i rullgardinsmenyn kan vi lägga till händelsehanteraren för förändring, som så: 

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

Slutgiltiga tankar

Jag är säker på att det finns tusen sätt att ställa in en välj-meny utan att använda jQuery, men de som använder bara CSS bekämpar en förlorad kamp mot webbläsarens standardinställningar. Enkelheten i denna plugin och den enorma flexibilitet den erbjuder och det progressiva förbättringsmetod som det innebär betyder DropKick är en utmärkt lösning.

Har du använt DropKick i ett projekt? Har du en föredragen metod för styling