Design interactif

Comment styliser «Sélectionnez les caractères en utilisant DropKick

En ce qui concerne le style des pages Web, rien n’est aussi compliqué que les formulaires. Et en ce qui concerne les formes de style - presque - rien n'est aussi délicat que le avec CSS, mais il y a de grandes limites sur ce que nous pouvons accomplir avec CSS seul. Souvent, la seule option viable est le style via JavaScript, et en tant que forme d’amélioration progressive, ce n’est pas quelque chose que nous devons éviter.

Dans cet article, nous utiliserons DropKick pour créer une liste déroulante. Ce que dropkick fait est de transformer le

La première chose à faire est de mettre en place un

Appeler DropKick

Une fois que nous avons mis en place notre dans quelque chose nous pouvons être sûrs de styliser avec CSS. De plus, nos valeurs ont été insérées dans les nouveaux attributs de données HTML5 (avec le nom data-dk-dropdown-value).

Nous pouvons maintenant personnaliser notre liste déroulante avec CSS, ou utiliser l'un des thèmes de DropKick si nous le préférons. au moment de la rédaction de cet article, il y a trois thèmes disponibles, le défaut, la brillance et la brillance. Mais la plupart des gens voudront utiliser leurs propres styles qui correspondent aux besoins de leur projet.

Extension de DropKick

L'extension de DropKick est un processus simple. Par exemple, si nous voulions détecter quand une modification est apportée à la liste déroulante, nous pouvons ajouter le gestionnaire d'événement change, comme ceci: 

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

Dernières pensées

Je suis sûr qu'il y a mille façons de mettre en forme un menu de sélection sans utiliser jQuery, mais ceux qui utilisent uniquement CSS se battent contre les paramètres par défaut du navigateur. La simplicité de ce plugin et la grande flexibilité qu'il offre, ainsi que l’approche d’amélioration progressive qu’il requiert, font de DropKick une excellente solution.

Avez-vous utilisé DropKick dans un projet? Avez-vous une méthode préférée de style