Interactief ontwerp

Hoe te stylen «Selectieën selecteren met DropKick

Als het aankomt op het vormgeven van webpagina's, is niets zo lastig als formulieren. En als het gaat om het stylen van vormen - bijna - is niets zo lastig als het met CSS, maar er zijn grote beperkingen wat betreft hoeveel we alleen met CSS kunnen bereiken. Vaak is de enige haalbare optie styling via JavaScript en als een vorm van progressieve verbetering is dit niet iets waar we voor terugdeinzen.

In dit artikel zullen we gebruiken Drop-kick om dropdown te creëren. Wat dropkick doet, is het transformeren

Het eerste dat we moeten doen is een instellen

DropKick bellen

Zodra we onze hebben ingesteld in iets dat we kunnen vertrouwen op het stylen met CSS. Verder zijn onze waarden ingevoegd in de nieuwe HTML5-gegevensattributen (met de naam data-dk-dropdown-waarde).

We kunnen nu onze vervolgkeuzelijst met CSS stylen, of een van de DropKick-thema's gebruiken als we daar de voorkeur aan geven; op het moment van schrijven zijn er drie thema's beschikbaar, de standaard, donkere glans en lichte glans. Maar de meeste mensen zullen hun eigen stijlen willen gebruiken die voldoen aan de behoeften van hun project.

DropKick uitbreiden

Het uitbreiden van DropKick is een eenvoudig proces. Als we bijvoorbeeld willen detecteren wanneer er een wijziging wordt aangebracht in de vervolgkeuzelijst, kunnen we de change event-handler toevoegen, zoals: 

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

Laatste gedachten

Ik weet zeker dat er duizenden manieren zijn om een ​​select menu te stijlen zonder het gebruik van jQuery, maar degenen die alleen CSS gebruiken, vechten een verloren strijd tegen de standaardinstellingen van de browser. De eenvoud van deze plug-in en de enorme flexibiliteit die het biedt, en de progressieve verbeteringsaanpak die ervoor nodig is, maakt DropKick tot een uitstekende oplossing.

Heb je DropKick in een project gebruikt? Heb je een gewenste manier van stylen?