面壁者语

YUI的标签页基本用法相当简单。

基本设置

YUI TabView可以基于特定的HTML结构实现，也可以完全通过JS插入。li生成每个切换标签，整个TabView区域的根容器为div。

插入TabView的命令为YAHOO.widget.TabView，你可以通过ID轻松的把现有的结构定义成标签页。

1.按照以下的结构书写，就可以获取一个标签页效果，默认选中项为定义了class="select"的li：

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>
<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
        <li><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>
    <div class="yui-content">
        <div><p>Tab One Content</p></div>
        <div><p>Tab Two Content</p></div>
        <div><p>Tab Three Content</p></div>
    </div>
</div>

即，使用到三个class：整个TabView区域使用yui-navset，选项卡部分的ul使用yui-nav，内容区使用yui-content。li中的链接使用#tabN指向对应的内容，定义了class=”selected”的li及对应的内容为初始显示项。

2.使用JS来生成TabView：

<script type="text/javascript">
    var myTabs = new YAHOO.widget.TabView("demo");
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab One Label',
        content: '<p>Tab One Content</p>',
        active: true
    }));
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab Two Label',
        content: '<p>Tab Two Content</p>'
    }));
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab Three Label',
        content: '<p>Tab Three Content</p>'
    }));
    myTabs.appendTo(document.body);
</script> 

可以看出，label对应的为选项卡标签内的文字，content为点击选项卡后显示的内容，active则相当于定义了selected的li，为初始选中项。 这里通过appendTo方法来把这个JS生成的Tabview插入到文档中去。