jQuery in XPages #5 – jQueryUI (Accordion)

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

Old demo.xomino.com menu
Old demo.xomino.com menu

into this

jQueryUI Accordion Menu
jQueryUI Accordion Menu

Demonstration

To see the new menu in action go to demo.xomino.com

Download

You can download the sample database for all the jQuery in XPages article from here or the demo website.

jQueryUI

jQueryUI is a website which “provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

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.

Individual Packages

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.

Building your jQueryUI download bundle
Building your jQueryUI download bundle

Themeroller

jQueryUI comes with many pre-built styles

jQueryUI styles
jQueryUI 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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s