Design Interativo

Como estilo ≪Selecione usando DropKick

Quando se trata de estilizar páginas da Web, nada é tão complicado quanto formulários. E quando se trata de estilizar formas - quase - nada é tão complicado quanto o com CSS, mas há grandes limitações em quanto podemos alcançar apenas com CSS. Muitas vezes, a única opção viável é o estilo via JavaScript, e como uma forma de aprimoramento progressivo não é algo que precisamos evitar.

Neste artigo estaremos usando DropKick para criar o menu suspenso. O que dropkick faz é transformar o

A primeira coisa que precisamos fazer é configurar um

Chamando o DropKick

Depois de configurar nossos em algo que podemos ter certeza de estilo com CSS. Além disso, nossos valores foram inseridos nos novos atributos de dados HTML5 (com o nome data-dk-dropdown-value).

Agora podemos estilizar nosso menu suspenso com CSS ou usar um dos temas do DropKick, se preferirmos; No momento da escrita, há três temas disponíveis, o padrão, brilho escuro e brilho leve. Mas a maioria das pessoas vai querer usar seus próprios estilos que correspondam às necessidades de seus projetos.

Estendendo o DropKick

Estender o DropKick é um processo simples. Por exemplo, se quiséssemos detectar quando uma alteração é feita na lista suspensa, podemos adicionar o manipulador de eventos de alteração, da seguinte forma: 

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

Pensamentos finais

Tenho certeza de que existem mil maneiras de estilizar um menu de seleção sem o uso de jQuery, mas as que usam apenas CSS estão lutando uma batalha perdida contra os padrões do navegador. A simplicidade deste plugin e a tremenda flexibilidade que ele oferece e a abordagem de aprimoramento progressivo que ele faz significa que o DropKick é uma excelente solução.

Você já usou o DropKick em um projeto? Você tem um método preferido de estilo?