This week we are going to look at one of the capabilities offered by the jQueryUI website, that accordion. I am going to walk through how I added it to my demo website (because the menu was getting too large). jQueryUI is a jQuery plugin – it extends jQuery using the $selector.doSomething() notation.
We are going to turn a long inflexible menu
To see the new menu in action go to demo.xomino.com
You can download the sample database for all the jQuery in XPages article from here or the demo website.
What that means for you and I is “a set of really cool visual effects to add to your website really easily” 🙂
The jQueryUI website is very easy to use and a lot of fun to look over. There are multiple demonstrations of everything from accordions, to popup boxes, to date pickers, to sliders, to tabs and many other of the capabilities similarly found within the dojo toolkit.
In an analogous way to dojo, each of the different capabilities jQueryUI provides can be individually added to the webpage or you can select the ones you need and combine them into one single js file. Adding the capability is just a different process from dojo.
jQueryUI comes with many pre-built styles
Using the Themeroller you can modify these styles to match your own websites style (in my case oneui2.1_onyx). I happen to like the darkness ui (I am sure it is nothing psychological) and they go nicely together but we are going to adapt the theme to match onyx.
The accordion is created by adding a number of jQuery effects together. If you break it down, what is happening when you click on the header is that the open panel is being reduced in size to zero at the same time as the panel the user clicked on is being opened. There are many jQuery accordion knockoffs from the original – some are really sweet like RhinoSlider and may appear in later articles..
How does it work?
Check out the how does it work article to see how I put all this together