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.
Je suis un grand défenseur de l'automatisation, car cela simplifie énormément la vie. Pourquoi passer du temps sur des tâches subtiles et monotones qui aspirent votre force vitale dès que vous avez un ordinateur pour faire les choses pour vous? Ceci est particulièrement vrai pour le développement web.De nom
La table des matières peut grandement améliorer l'expérience utilisateur de nombreux sites Web, par exemple des sites de documentation ou des encyclopédies en ligne comme Wikipedia. Une table des matières bien conçue donne un aperçu de la page et aide les utilisateurs à accéder rapidement à la section qui les intéresse.Traditionn