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.
Pour de nombreux développeurs Web, qui ne connaissent peut-être que HTML, CSS et JavaScript, le développement d'une application mobile native pourrait être un territoire inconnu . Techniquement parlant, les applications mobiles sous Android, iOS et Windows Phone sont construites en utilisant des langages de programmation complètement différents; une application Android utilise Java, une application iOS utilise Objective-C, tandis qu'une application Windows Phone utilise .NET.M
Pour continuer nos remerciements à nos lecteurs et à la communauté en général, nous sommes heureux de sortir un autre pack d'icônes de qualité gratuit: 28 icônes de la barre d'outils . Ces icônes sont au format PNG dans 2 tailles différentes 32 × 32 et 16 × 16 pixels avec le fichier Photoshop PSD en couches des icônes.Ces icônes s