Pour styliser l'élément, CSS devrait suffire. Mais bon, ce n'est pas assez en termes d'accessibilité. Présentation EasyDropDown.js, un plugin jQuery gratuit pour couvrir tous ces défauts.
EasyDropDown.js peut facilement styliser l'élément de select ancienne dans votre page Web avec beaucoup de fonctionnalités. Après le élément a été appliqué avec ce plugin, il va obtenir un contrôle complet du clavier avec la recherche textuelle. Cet outil fournit également un défilement interne pour les éléments de longues listes afin de limiter la taille de la boîte déroulante. La forme et la validation sont également disponibles, ce qui aide à la compatibilité.
Installation
Pour installer EasyDropDown, commencez par inclure la bibliothèque jQuery dans votre page Web. Assurez-vous d'inclure également le javascript (obtenez-le ici) comme ceci:
Et son fichier CSS dans la balise head :
.. ..
Si vous utilisez un autre thème, assurez-vous de copier les fichiers dans votre dossier Web. Ne vous inquiétez pas car vous n'avez pas besoin de les inclure dans le code HTML pour les appeler.
Styling Le Select
Lorsque vous utilisez EasyDropDown.js, vous pouvez créer un menu déroulant personnalisable avec un balisage sémantique propre. Les éléments select peuvent être stylés en HTML seulement. Vous pouvez désactiver l'élément, définir une option sélectionnée ou ajouter facilement une étiquette .
Pour le styler, vous devez d'abord inclure une classe dropdown dans les balises. Une étiquette peut être ajoutée en donnant une classe d' label à l'intérieur de l'option. Voici le balisage de base:
Voilà, vous n'avez pas besoin de javascript personnalisé pour ajouter. Maintenant, le moche, démodé s'est transformé en une magnifique entrée déroulante.
Si vous voulez ajouter une option présélectionnée, donnez simplement votre liste déroulante avec l'attribut selected . Nous vous recommandons de ne pas utiliser d'étiquette avec ce paramètre car la valeur sélectionnée remplacera l'étiquette .
... ...
Vous pouvez également désactiver la liste déroulante en utilisant l'attribut disabled comme ceci:
...
Prêt à utiliser des thèmes
EasyDropDown.js est livré avec 2 autres thèmes prêts à l'emploi: Metro et Flat . Pour utiliser les thèmes, vous pouvez utiliser data-attribute HTML5.
À l'intérieur de tag, appelez data-settings='{"wrapperClass":"theme-name"}' pour appliquer un autre thème. N'hésitez pas à changer le theme-name du theme-name avec les noms de thèmes disponibles: metro ou flat . Voici l'exemple:
...
À côté de wrapperClass, vous pouvez ajouter d'autres paramètres, consultez la page de documentation pour plus de détails. Si vous êtes cool avec le code javascript, vous pouvez voir le tutoriel ici.
jQuery est l'une des bibliothèques JavaScript les plus populaires aujourd'hui. Son API est très facile à utiliser, conduisant à une courbe d'apprentissage pas trop abrupte. Beaucoup de projets utilisent le code jQuery au lieu d'utiliser directement le JavaScript de vanilla pour apporter des fonctionnalités dynamiques.Mais
Nous avons déjà couvert quelques conseils et astuces sur Tumblr qui peuvent vous aider avec votre expérience de blogging. En plus de cela, nous avons présenté quelques outils et extensions pour tirer le meilleur parti de Tumblr. Mais nous parions que vous ne saviez pas qu'il y a des limites à ce que vous pouvez faire sur Tumblr, par exemple, vous ne pouvez publier qu'un certain nombre de messages par jour . Une