1. 功能介绍

    标签页(tabset)组件是一个纯javascript组件,它提供类似windows界面标签页的效果实现,能够把一个页面或多个页面里的静态或动态内容按功能分组显示。

  2. 主要特性

    1. 对功能界面进行分组显示。
    2. 能对标签页标签进行分组显示。
    3. 能在上下左右四个方向显示标签页的标签
  3. 代码片段

    1. HTML写法(参考quickstart/web/examples/component/Tabset.html)

      <!-- tabset名称-->
      <div id="tabset">
      	<!-- tabset标签名称-->
      	<div id="tabset_tabs"></div>
      	<!-- tabset内容 -->
      	<div id="tabset_content">
      		<!-- tabset标签页 -->
      		<div id="taskPage">
      			<iframe name="task" jwcid="@wade:PageRedirect" type="iframe" class="myframe" height="400" source="ognl:info" frameborder=no/>		
      		</div>
      		<div id="teamPage">
      			<iframe name="team" jwcid="@wade:PageRedirect" type="iframe" source="ognl:info" class="myframe" height="400" frameborder=no/>			
      		</div>
      	</div>
      </div>
      
    2. Javascript写法(参考quickstart/web/examples/component/Tabset.html)

      1. 静态标签

        function addTabset() {
        	var tabset = new TabSet("tabset","top");
        	tabset.addTab("基本信息", getElement("basePage")); 
        	tabset.addTab("明细信息", getElement("detailPage"));
        	tabset.draw();
        	tabset.switchTo("明细信息"); //切换标签,默认显示第一个标签
        }
        
      2. 动态标签

        function addTabset () {
        	var tabset = new TabSet("tabset","top");
        	tabset.addTab("任务信息", getElement("taskPage"), clickTabPane('task', 'task.TaskEdit', 'queryTask'));
        	tabset.addTab("任务团队", getElement("teamPage"));
        	tabset.draw();
        	tabset.onTabSelect(tabEventHandler);//标签点击时执行的事件
        }
        function tabEventHandler(tabset) {
        	var tab = tabset.getActiveTab(); //获取激活的标签体
        	if (tab.caption == "任务信息") clickTabPane('task', 'task.TaskEdit', 'queryTask')
        	if (tab.caption == "任务团队") clickTabPane('team', 'task.TaskTeam', 'queryTaskTeams')
        }
        

        说明:只有点击指定标签页后才会唯一执行一次相应的子页面
        addTab方法:参数一:标签名称,参数二:标签对象,参数三:页面初次载入时执行的方法,如:打开页面时需要先载入任务信息
        onTabSelect方法:参数一:点击标签页执行的方法,如,需要执行tabEventHandler方法,该方法会识别,如果制定的iframe还未被载入过,执行该方法将会执行,以保证整个动态tabset里的每个页面只会执行一次
        clickTabPane方法:
        参数一:iframe名称
        参数二:执行页面名称
        参数三:执行页面方法
        参数四:传递参数,默认为parameters(@wade:PageDirect的source和columns生成的参数),若需要手工加其他参数,可以写成parameters+’&a=1’
        参数五:是否重载,默认不重置,若需要刷新子页面时设置为true
        caption属性:获取指定标签的名称