Thursday, May 15, 2008

Nested Menus in JavaScript: A new theme for jQuery UI Tabs

I accidentally discovered the jQuery UI Tabs widget for JavaScript rendering of tabs. I found this via the new uPortal 3 quickstart where the new skin uses the jQuery UI library extensively.

Originally, the tabs code was produced by Klaus Hartl and it is now an official part of the jQuery UI project. Something that I found particularly interesting is the nested tabs demo example. Although from one perspective this demonstrates nesting of tab menus, in the current example it doesn't look like a single nested tab menu navigation system. I thought I would attempt to theme this example to look more like the nested tab example from the navigation tabs section of the Yahoo! Design Pattern Library.

Click this link for a working example of jQuery UI nested tabs - Yahoo! style

To give the example a little more sophistication, I created another example using my new theme which makes use of the Google AJAX Feed API

Click this link for a working example of jQuery UI nested tabs - Yahoo! style accessing Google feeds

You are very welcome to download my example code

A little fly in the ointment - Best use is DHTML/AJAX applications

The jQuery documentation says that Tabs supports loading tab content via Ajax in an unobtrusive manner and goes on to say that this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled. You could argue that since the menu navigation will disappear if you clicked on a link when JavaScript is disabled then this is not a particularly graceful outcome!

Therefore, I think that using this widget for creating navigational menu systems should be confined to AJAX/DHTML JavaScript enabled applications. If you want a web application that still provides menus when JavaScript is disabled you should use a different approach (e.g. see my previous blog entry on Simple Nested Tab Menus for Java web applications).


ismjml said...

Neat stuff. Although having an unordered list in the content area breaks things...
Note: Comment imported. Original by Heliologue website: at 2008-05-19 22:14

ismjml said...

Hi Mark, thanks for the script its neat and clean I am using this example.

But my requirement is to make first subtab as the default tab when i slecet the parent tab.
Note: Comment imported. Original by Sridhar at 2008-08-28 17:07

ismjml said...

Hi Sridhar,

Is this the kind of thing you are after?


Note: Comment imported. Original by markmc website: at 2008-08-28 21:32

ismjml said...

I came across teh same problem with the use of unordered list in the content.

My solution was to use ordered lists in stead.

if you still like to have the unordererd look you can use a style. for example:

Hope it helps.
Note: Comment imported. Original by Sciilan website: at 2008-12-04 11:24

ismjml said...

Could you pls help me.

I have introduced in the nested tabs a ajax trriger.

But as soon as the actual href="#aaa" dissapierd and was replaced with href="#" the class for active and disabled ui-tabs do not work could you help me pls


Note: Comment imported. Original by john at 2010-03-21 21:38

ismjml said...

Hi, I don't quite understand your question. Do you have some example code I could look at?
Note: Comment imported. Original by markmc website: at 2010-03-22 15:18

ismjml said...

the problem was resolved thx very much
Note: Comment imported. Original by john at 2010-03-22 18:42