Interaktivní design

Jak stylovat "Vybrat pomocí DropKick

Pokud jde o styling webových stránek, nic není tak choulostivé jako formy. A pokud jde o styling formy - téměř - nic není tak složité jako s CSS, ale existují velké omezení, jak moc můžeme dosáhnout pomocí CSS samotného. Často je jedinou životaschopnou možností styling přes JavaScript a jako forma progresivního vylepšení není to něco, od čeho se musíme vyhýbat.

V tomto článku budeme používat DropKick vytvořit rozbalovací nabídku. Co dělá dropkick je transformace

První věc, kterou musíme udělat, je sestavit a

Volání DropKick

Jakmile jsme založili náš do něčeho můžeme být přesvědčeni o stylingu s CSS. Navíc jsou naše hodnoty vloženy do nových datových atributů HTML5 (s názvem data-dk-dropdown-value).

Nyní můžeme stylovat náš dropdown s CSS, nebo použijeme jeden z témat DropKick, pokud dáváme přednost; v době psaní jsou k dispozici tři témata, výchozí, tmavý lesk a lehký lesk. Ale většina lidí bude chtít používat své vlastní styly, které odpovídají jejich potřebám.

Rozšíření DropKick

Rozšíření DropKick je jednoduchý proces. Například, pokud bychom chtěli zjistit, kdy dojde k změně rozbalovacího seznamu, můžeme přidat změnu obsluhy události, například takto: 

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

Konečné myšlenky

Jsem si jistý, že existuje tisíc způsobů, jak stylovat vybrané menu bez použití jQuery, ale ty, které používají pouze CSS, bojují o ztracenou bitvu proti selhání prohlížeče. Jednoduchost tohoto plug-inu a ohromná flexibilita, kterou nabízí, a progresivní vylepšení, které získáte, znamená, že DropKick je vynikající řešení.

Používali jste DropKick v projektu? Máte přednostní metodu stylingu