13 JQUERY SELECTBOX / PLANDS DUP-DOWN

13 Les plug-ins drop-down jQuery vous aident à améliorer votre expérience interactive Web! Cet article a été mis à jour le 12 octobre 2016 pour refléter l'état actuel du plug-in de menu déroulant.

Le style de menu déroulant par défaut n'est pas satisfaisant pour tout le monde. Parfois, vous devrez peut-être contrôler son apparence (pour maintenir la cohérence entre les navigateurs et les appareils), ou vous pouvez avoir besoin d'autres fonctionnalités qui ne sont pas prises en charge nativement.

Heureusement, il existe de nombreux excellents plugins JQuery qui peuvent simplifier ce processus.

Nous couvrirons certains plugins que vous pouvez intégrer dans votre prochain projet. Certains de ces plugins ont des options, des méthodes et des événements hautement configurables, tandis que d'autres sont des remplacements de style de menu déroulant simples faciles à utiliser.

Points clés

• Cet article décrit 13 jQuery SelectBox / Drop-down Menu Plugins qui peuvent être utilisés pour personnaliser l'apparence et les fonctionnalités des menus déroulants de pages Web.
• Les plugins tels que choisis, SELECT2 et Sélection offrent un large éventail d'options de personnalisation et de fonctionnalités supplémentaires telles que la recherche dans le décrochage, les éléments multi-sélection, la surbrillance et la liaison des données distantes.
• Certains plugins, tels que jQuery Nice Select et JQuery SelectBox, se concentrent davantage sur la refonte du menu déroulant et offrent moins de fonctionnalités avancées pour les rendre adaptées à des projets simples.
• Image Combo Box et Ddslick jQuery Les menus déroulants permettent d'ajouter des images et des descriptions à chaque option dans le menu déroulant, offrant une représentation visuelle de chaque choix.
• Cet article souligne l'importance de considérer les exigences du projet lors de la sélection des plugins, car certains plugins offrent une large gamme de fonctionnalités et d'options de personnalisation qui peuvent ne pas être nécessaires pour des projets simples. Il souligne également l'importance de vérifier la compatibilité du navigateur et l'état de maintenance du plugin.

choisi

Chosen est un plugin puissant qui non seulement repense votre menu déroulant, mais fournit également d'autres fonctionnalités telles que dans la recherche de menu déroulant, des éléments multi-sélectionnés et la surbrillance.

Si vous souhaitez mettre à jour le style par défaut du menu déroulant, vous pouvez utiliser ce plugin, mais sa fonctionnalité vraiment puissante est les fonctionnalités supplémentaires:

• Capacité à gérer les options multi-sélections. Chaque sélection sera enregistrée et facilement supprimée si nécessaire.
• la possibilité de filtrer les éléments en recherchant. Très utile lorsque vous avez une longue liste d'options (comme les noms de pays).

Toutes les fonctionnalités de ce plugin fonctionnent correctement, la prise en charge de bureau revient à la compatibilité IE8. Un facteur positif (ou négatif) est que sur les appareils mobiles, le menu déroulant revient à sa forme native, donnant au navigateur mobile des contrôles comment vous interagissez avec eux.

Le document d'options

décrit tous les paramètres, méthodes et événements que vous pouvez personnaliser les éléments. Le plugin lui-même est maintenu par les développeurs impliqués dans le développement d'outils de gestion de projet Harvest. Leur référentiel GitHub est constamment mis à jour avec des fonctionnalités supplémentaires, des corrections de bogues et des optimisations.

site Web / github

select2

SELECT2 est un plugin de remplacement / amélioration du menu déroulant entièrement fonctionnel. Il ne repense pas seulement votre menu déroulant, mais il peut également être élargi avec des fonctionnalités supplémentaires.

Comme d'autres plugins de menu déroulants avancés, il contient de nombreuses fonctionnalités personnalisables telles que:

• élément / élément à choix unique avec OptGroups
• Éléments sélectionnés multiples
• Champ de recherche de menu déroulant Trimed / Filtable
• Capacité à charger des données à partir de sources de données distantes (par exemple, modifier dynamiquement les options de l'API)
• Prise en charge des balises (Sélectionnez / Tags dynamiques dans la liste prédéfinie)

SELECT2 est en cours de développement depuis 2012. Les développeurs ont migré de la version 3 vers la version 4 et ont réécrit le plugin dans le processus pour le rendre plus rapide, plus réactif et adapté aux mobiles. La page GitHub de Select2 est impressionnante et l'équipe a travaillé ensemble pour améliorer le plugin à chaque fois qu'il est sorti.

Le plugin est plus axé sur les développeurs, et sa page d'options montre un exemple complet de la façon d'utiliser chacune des différentes fonctionnalités.

Ce plugin offre une personnalisation de haut niveau, et c'est une excellente option si vous recherchez un plugin qui peut être personnalisé pour correspondre à votre projet.

site Web / démo / github

jQuery Nice Select

Ce plugin est une bibliothèque de remplacement de menu déroulant légère. jQuery Nice Sélectionnez Remplacer le menu déroulant natif par défaut par un menu déroulant redessiné.

Ce plugin n'a pas beaucoup de fonctionnalités car il est conçu comme un moyen de repenser rapidement le menu déroulant pour fournir un contenu visuellement attrayant sans trop d'effort. Le plugin se développe et s'améliore activement dans son référentiel GitHub et fonctionne bien sur les navigateurs mobiles et de bureau.

Si vous cherchez un plugin rapide et facile qui repense simplement le menu déroulant sans trop d'effort, alors c'est votre choix.

site Web et démos / github

Sélectionnez

Sélection est un plugin complet et axé sur les développeurs qui vous fournit non seulement une liste déroulante plus belle, mais ajoute également de nouvelles fonctionnalités utiles telles que des balises, la liaison des données distantes et les menus déroulants dynamiques.

comme select2 et choisi, sélectionnez est assez orienté vers le développeur, vous donnant le contrôle du fonctionnement des menus déroulants. Leur documentation est assez complète, décrivant une gamme d'options et plusieurs rappels que vous pouvez accrocher pour personnaliser davantage le plugin.

Le plugin est constamment mis à jour et les développeurs ont publié plusieurs versions au cours de la dernière année. Parfois, vous ne savez pas si un bon plugin que vous venez de trouver est activement entretenu ou s'il est simplement fourni "tel quel", mais pour la sélection, le projet semble toujours actif, presque tous les rapports de problème / bogue sont résolus et Cela se fait une discussion assez transparente.

En termes de fonctionnalités, la sélection fonctionne très bien. Ce plugin repense non seulement les contrôles par défaut, mais l'étend également avec des fonctionnalités puissantes telles que le filtrage de recherche, les fonctionnalités multi-sélections et la liaison de données distantes. Tout cela fonctionne bien sur les navigateurs de bureau et mobiles.

Ce plugin est un très bon choix global et devrait être l'une de vos options "préférées" si vous souhaitez repenser et étendre les fonctionnalités du menu déroulant.

site Web et démos / github

(Le plug-in suivant présente le contenu. Veuillez remplacer l'image et https://www.php.cn/link/39cec6d4d21b5dade7544dab6881423e en fonction du format ci-dessus, et ajustez le texte pour le rendre plus lisse et plus naturel)

Boîte combinée d'image

site Web / démo / github

jQuery Plugin Dropdown Recherche

Site Web / Demo

Boîte combinée multi-sélection

site Web / démo / github

jQuery selectBox

site Web et démos / github

Multiselect.js

site Web / github

jQuery Sumoselect

site Web / démo / github

jQuery ui selectMenu

site Web et démo

jQuery Filtable Bootstrap select

démo / github

ddslick jQuery Dropdown

Site Web

Résumé

Il existe une large gamme d'options pour sélectionner le menu déroulant pour remplacer le plug-in. Au cours des dernières années, certaines des bibliothèques les plus populaires ont été améliorées, introduisant de nouvelles fonctionnalités tout en améliorant leurs capacités.

Vous devez rechercher les différentes bibliothèques que j'ai mentionnées aujourd'hui pour voir laquelle répondra le mieux à vos besoins. Par exemple, si vous souhaitez simplement repenser le menu déroulant, avez-vous vraiment besoin d'une bibliothèque qui fournit également un filtrage et une liaison de données distantes?

Pour la plupart de ces bibliothèques, vous devriez être en mesure de vous opérer relativement rapidement. La plupart des bibliothèques ne nécessitent que jQuery et fichiers de plugin associés, et vous êtes prêt à partir.

Si vous aimez les options personnalisées ou les rappels de crochet, vous pouvez choisir une bibliothèque qui se concentre davantage sur les développeurs, tels que la sélection, le choix ou la sélection2. Trouver une bibliothèque qui fonctionne pour vous dépendra de votre opinion.

Si vous utilisez d'autres grandes bibliothèques en utilisant le remplacement du menu déroulant, veuillez nous en informer. Nous serions ravis de vous entendre!

FAQ sur JQuery SelectBox / Drop-down Menu Plug-In (FAQ)

(veuillez ajuster le texte en fonction du format ci-dessus pour le rendre plus lisse et plus naturel)

Veuillez noter que je n'ai pas la possibilité d'accéder à des sites Web externes ou à des fichiers spécifiques, donc je ne peux pas fournir un https://www.php.cn/link/39cec6d4d21b5dade7544dab6881423e. Vous devez compléter https://www.php.cn/link/39cec6d4d21b5dade7544dab6881423e par vous-même. Veuillez également fournir le chemin /uploads/... vers toutes les images afin que je puisse ajouter correctement les informations d'image à la sortie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!