Copyright © 2008, Levyco Development, LLC. All rights are reserved.
Using Code To Change/Show Tabs...

Intro


The demo is intended to help users understand some details of the TabView control. Specifically, the two most common questions are:

  1. How do I detect a tab being changed?

  2. How do I change a tab via code (or a link, etc)?

This demo shows how to do both of these.


You may want to start by clicking the show demo button above so you can see what we're accomplishing, then you can follow along with the commentary as we show the code.


Setting up a tab, via markup, is simple, as is documented in the YUI documentation (http://developer.yahoo.com/yui/tabview/). The tab view on this page is constructed as follows:


<div id="tabDemo" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>1</em></a></li>
        <li><a href="#tab2"><em>2</em></a></li>
        <li><a href="#tab3"><em>3</em></a></li>
    </ul>
    <div class="yui-content">
        <div><p><table width="100%" cellpadding="4" cellspacing="0"><tr><td align="left"><span color="#CCCCCC">&lt;&lt; Prev</span></td><td align="right"><a href="javascript:gotoTab(1)">Next &gt;&gt;</a></td></tr><td colspan="2" align="center">This is the first tab.</td></tr></table></p></div>
        <div><p><table width="100%" cellpadding="4" cellspacing="0"><tr><td align="left"><a href="javascript:gotoTab(0)">&lt;&lt; Prev</a></td><td align="right"><a href="javascript:gotoTab(2)">Next &gt;&gt;</a></td></tr><td colspan="2" align="center">This is the second tab.</td></tr></table></p></div>
        <div><p><table width="100%" cellpadding="4" cellspacing="0"><tr><td align="left"><a href="javascript:gotoTab(1)">&lt;&lt; Prev</a></td><td align="right"><span color="#CCCCCC">Next &gt;&gt;</span></td></tr><td colspan="2" align="center">This is the third tab.</td></tr></table></p></div>
    </div>
</div>                            

We tell YUI to "build" the tab view with a simple setup call:


tabDemo = new YAHOO.widget.TabView("tabDemo");                            

We hook the tab change event with another simple call:


tabDemo.addListener ('activeTabChange', function(e){YInfo("Tab selected is index:"+tabDemo.getTabIndex(e.newValue));});                            

In this case, we're telling the tab view to call a function every time the tab changes. YInfo() is just a helper routine that creates a nicer alert() function. This function is in the global helper function script module included by the page (yuihelp.js).


The tabs' previous and next buttons, and the top-level 1,2,3 buttons perform their "navigation" by calling gotoTab():


function gotoTab (ndx) {
    tabDemo.set('activeIndex', ndx);
}
                            

That's it!


Changing Tabs Via Code...
Go To Tab:    

<< PrevNext >>
This is the first tab.

<< PrevNext >>
This is the second tab.

<< PrevNext >>
This is the third tab.