Créer un menu déroulant “accordéon” avec jQuery. Le code JavaScript Intégrer jQuery La première chose à faire pour pouvoir utiliser jQuery est bien évidemment d'appeller la librairie dans la page. Téléchargez jQuery sur le site officiel, et placez-le dans le répertoire (ou dans un sous-répertoire) où vous avez enregistré le fichier HTML, ou bien faites appel à l'URL hébergée par Google API's comme dans les exemples ci-dessous. N'oubliez pas de jeter un coup d'oeil à l'article Inclure jQuery de manière optimisée.
Nous allons insérer l'appel au fichier jQuery : Dorénavant, on peut accéder aux méthodes de la bibliothèque jQuery dans tout le reste de la page. Note : les exemples ci-dessous se complètent progressivement, ils reprennent à chaque fois l'intégralité du code nécessaire. Cacher les sous-menus On veut que les sous-menus soient cachés au chargement de la page, lorsque le visiteur n'a encore actionné aucun élément du menu. Transformer les span en liens Evidemment, on pourrait utiliser directement un lien, avec un attribut href vide. Créer un menu déroulant “accordéon” avec jQuery. [Joomla] Menu Accordéon avec jQuery. Il existe plusieurs bibliothèques JavaScript si l'on désire créer quelques effets visuels rapidement sur un site. La première avec laquelle j'ai travaillé est Scriptaculous, basée sur Prototype, Joomla travaille quant à lui avec Mootools, et j'ai récemment découvert jQuery qui me parait plus puissant, plus maléable et moins lourd que scriptaculous.
Avec autant de scripts, les pages de ce site ce sont trouvées chargées, beaucoup trop chargées, et il a fallu faire un choix, quitte à travailler un peu. Mon choix s'est porté sur JQuery. Si la modification des effets visuels créés avec Scriptaculous était simple, c'était une autre paire de manches avec l'intégration pour Joomla et l'excellent plugin fboxbot. Je vais décrire ici comment créer un menu accordéon avec une petite fonction JavaScript. Me voilà donc en train d'apprendre jQuery pour réaliser mon petit script de menu accordéon. Premièrement, ce script fonctionne pour un menu créé avec Joomla, avec des éléments de sous-menus. How to use ExtJS 4 + JQuery together. 0inShare This is an example of how to use Ext JS 4 and JQuery in an application together. To use Ext JS 4 with any JS frameowork is very simple: you need to import the js framework file (in this case JQuery ) and import Ext JS.
ANd you are ready to develop with both frameworks! It is very basic and simple, but I get some emails asking about it once in a while, so I thought it would be nice to share, in case you did not use both in a project together before. Following is how the sample project structure looks like: And this is the HTML page: 02. 03. 04. 06. 08. 09. 10. 11. 12. 13. 14. 17. 18. 19. 20. And the output will be: Download the source code: Github: Google Code (zip file): Happy Coding!