Sun	Mon	Tue	Wed	Thu	Fri	Sat
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Updated JQuery Nested Tab Set with Demo

Posted At : June 15, 2007 2:00 PM | Posted By : Cutter
Related Categories: ColdFusion,Development,JQuery

Ok, there have been some changes, but I'll try to keep it easy, with an example, and there will be an included .zip file. First, you'll need the latest JQuery build, as well as the latest version of the Tabs Plugin. Pay attention to the pathing I have created in my code snippets here.

Include the necessary JavaScript libraries and CSS files:

Next, layout your content. You'll notice that container elements have changed slightly from before.

<div id="container">
   <ul>
<li><a href="#half-frag"><span>Form 1</span></a></li>
      <li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Tabs are flexible again</span></a></li>
</ul>
<div id="half-frag">
   <form name="section-1" id="section-1" action="process.cfm" method="post" enctype="multipart/form-data">
      <ul class="anchors">
    <li><a href="#form1_step1"><span>Step 1</span></a></li>
    <li><a href="#form1_step2"><span>Step 2</span></a></li>
    <li><a href="#form1_step3"><span>Step 3</span></a></li>
    </ul>
    <div id="form1_step1" class="frmStep">
    Field 1: <input type="text" name="field1" id="field1" />
    </div>
    <div id="form1_step2" class="frmStep">
    Field 2: <input type="text" name="field2" id="field2" />
    </div>
    <div id="form1_step3" class="frmStep">
    Field 3: <input type="text" name="field3" id="field3" /><br />
    <input type="submit" name="submit" id="submit" value="Post Form" />
    </div>
   </form>
   </div>
   <div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>

Your end result should look a little like this:

Form 1
One
Two
Tabs are flexible again

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

The files (minus the js libraries) should be included in the Download below. Next time out I'll do the same with JQuery and the ExtJS UI Library.

Comments (11) |

Print |

Send |

Download |

del.icio.us |

Digg It! |

Linking Blogs | 25861 Views

Related Blog Entries

ExtJS Nested Tab Set with Demo (June 15, 2007)
Nested Tab Sets with JQuery and the Tabs Plugin (March 16, 2007)

Comments

[Add Comment]

Fantastic! Great work

I haven't fully tested, but the nesting looks perfect, assuming this isn't a single instance of nest that is too ID dependent. Will I be able to create a 2nd nest on the same page?

Konqueror/Ubuntu fails completely. For a browser that is supposed to be so standards compliant, it only fails 90% of the time. Still, the problem is probably not great. The failure seems total, so it's probably just some detect issue?

# Posted By wheezer | 6/18/07 9:49 PM

@wheezer, been a real long time since I was on a *nix box, so I couldn't tell you about the Konqueror issues. This example uses an ID selector, but it may be feasible to use a class selector. I've never tried it that way so I really can't say, but the tabs() method appears to work off the object returned by JQuery $('[myselector]'), then the method parses the list elements (which do appear to require IDs). Try it out, let me know what happens.

BTW, Klaus is a great help, and is quick to answer questions regarding the plugin.

# Posted By Cutter | 6/18/07 11:35 PM

@Wheezer - I just did a real quick, down-and-dirty test by applying a classname of 'tabset' to both of my tab container objects (the div#container and the form#section-1) and adjusting to call to the tabs() method to $('.tabset').tabs(), and it worked flawlessly. Then I removed the ID attribute from both containers and it still worked. Pretty cool stuff.

# Posted By Cutter | 6/18/07 11:54 PM

exelente, gran trabajo gracias !! por el plug

# Posted By ctraos | 12/5/07 9:03 AM

Is it possible to have the top row of tabs function on-click, but the second set of tabs function on-mouseover?

# Posted By paul Prusha | 1/12/08 7:21 PM

see http://www.smartmenus.org/forum/viewtopic.php?id=1...

Tabs Plugin conflicts with IE and smartmenus, but not FF. sure would be nice to have a workarund.

BTW, i visit nashville to visit family from time to time.

.

# Posted By Gene | 1/30/08 4:54 PM

@Gene - Honestly, I haven't looked at this Tabs implementation in quite a while. I'm pretty sure that Klaus now has it integrated into the Jquery UI library, which I am almost positive is cross browser.

We had very similar issues with using swfobject and JQuery. Basically, swfobject would programatically break IEs DOM when it rendered a Flash movie. This took quite a bit to discover, and even more to replace swfobject within our code. Chance are that you are running into a very similar issue.

# Posted By Steve 'Cutter' Blades | 2/4/08 9:42 PM

@Paul - I'm not certain if you are able to define which event handles tab activation. Fairly sure that it's strictly the 'click' event, but your best bet is to review the JQuery UI documentation on their site.

# Posted By Steve 'Cutter' Blades | 2/4/08 9:44 PM

thumbs up
thanks

# Posted By sumit | 4/10/08 1:05 PM

thumbs up

# Posted By okoy | 6/27/08 11:46 AM

Pretty cool stuff.

# Posted By Helena | 6/29/08 5:08 AM

[Add Comment]