A découvrir, un petit plugin jQuery qui va vous permettre de rendre visuellement plus agréable vos listes sélectives « select« .
En effet, ce n’est pas toujours évident d’obtenir se que l’on souhaite esthétiquement pour nos listes sélectives HTML sur nos sites web. Il existe diverses solutions, dont un petit plugin jQuery pratique, HeapBox, qui va vous permettre d’améliorer le visuel de vos listes sélectives et d’y ajouter des évènements.
L’installation et l’utilisation de ce plugin jQuery est très simple :
1- Insertion des librairies
[pastacode lang= »markup » manual= »%3Cscript%20src%3D%22js%2Fjquery.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22js%2Fheapbox.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript » message= » » highlight= » » provider= »manual »/]
2- Insertion du style choisi pour les « select »
[pastacode lang= »markup » manual= »%3Clink%20rel%3D%22stylesheet%22%20href%3D%22themes%2Fdark%2Fcss%2Fdark.css%22%20type%3D%22text%2Fcss%22%20media%3D%22screen%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]
3- Créer votre liste html
[pastacode lang= »markup » manual= »%3Cselect%20id%3D%22mySelect%22%3E%0A%3Coption%20value%3D%22value1%22%3EValue%201%3C%2Foption%3E%0A%3Coption%20value%3D%22value2%22%3EValue%202%3C%2Foption%3E%0A%3C%2Fselect%3E » message= » » highlight= » » provider= »manual »/]
4- L’appel du plugin
[pastacode lang= »javascript » manual= »%24(%22%23mySelect%22).heapbox()%3B » message= » » highlight= » » provider= »manual »/]
Voici pour la mise en place basique, mais il y a de nombreuses options visibles sur la page d’exemples : http://www.bartos.me/heapbox/#examples
Pour télécharger et visualiser le plugin jQuery HeapBox : http://www.bartos.me/heapbox
Articles qui peuvent vous intéresser :
9 novembre 2014
merci pour le partage de ce plug-in léger et utile