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.
Traiter des formulaires sur le Web peut être très intéressant. Vous pouvez faire beaucoup de personnalisation dans la conception, sur l'étiquette et même sur l'authentification. Avec beaucoup de nouvelles fonctionnalités disponibles en HTML5, Jay Morrow a créé Validatr qui s'appuie sur les nouveaux attributs d'entrée HTML5 pour effectuer une validation de formulaire simple et automatique.Validatr
Si vous êtes comme moi, vous aimerez probablement Wikipédia, l'encyclopédie web préférée de tout le monde. Il contient une énorme base de données de contenu sur presque tous les sujets sous le soleil, et dans une variété de langues. Si vous vous préparez pour un voyage, vous feriez probablement économiser certaines de ces lectures pour les lire plus tard, hors ligne, mais que se passerait-il si vous pouviez les transformer en ebook?Il y a en f