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

for ict 99 said...

The effectiveness of IEEE Project Domains depends very much on the situation in which they are applied. In order to further improve IEEE Final Year Project Domains practices we need to explicitly describe and utilise our knowledge about software domains of software engineering Final Year Project Domains for CSE technologies. This paper suggests a modelling formalism for supporting systematic reuse of software engineering technologies during planning of software projects and improvement programmes in Final Year Project Centers in Chennai.

Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

madin said...

Now designed by Mr McQueen’s long-time collaborator, replica boots Ms Sarah Burton, Alexander McQueen collections are characterised by replica alexander mcqueen immaculate tailoring and a dark, dramatic edge. Look out for sharp suiting and the label's signature skulls.