1. 功能

    以标签页切换形式显示多个区域的内容或多个嵌套的 iframe 内容

  2. 说明

    Tabset 组件由 Tabset、TabsetContent、TabsetFrame 三个组合组件组成
    TabsetContent 组件用来放置当前页内的 HTML 片段.
    TabsetFrame 用来嵌套其它的页面 HTML

  3. 参数

    参数名 参数类型 是否必须 默认值 描述
    id java.lang.String 设置组件名字,也是 js 访问改组件对象的名字,例如:jwcid="id@Tabset"
    switchAction java.lang.String 设置 Tabset 组件标签页切换时触发的动作
    tabStyle java.lang.String c_tab tab标签样式,有一级标签样式“c_tab”和二级标签样式“c_tab c_tab-2”、三级标签样式“c_tab c_tab-3”可选(具体参考ECL-组件-tab 分页标签
  4. 相关组件

    1. TabsetContent 组件

      1. 功能

        用来设置 Tabset 组件 HTML 片段的组件

      2. 参数

        参数名 参数类型 是否必须 默认值 描述
        title java.lang.String 设置当前内容的 tab 标题
    2. TabsetFrame 组件

      1. 功能

        用来设置 Tabset 组件嵌套的 HTML 片段页面的组件

      2. 参数

        参数名 参数类型 是否必须 默认值 描述
        title java.lang.String 设置当前内容的 tab 标题
        page java.lang.String TabsetFrame 组件嵌套的页面的页面名称,必须的参数
        listener java.lang.String TabsetFrame 组件嵌套的页面执行的初始化事件名
        active boolean 设置该 frame 是否为显示状态
        params java.lang.String 将该数据拼装到 frame 的 url 后

    【注】其它常见的 html 元素属性可以加在 TabsetContent 和 TabsetFrame 上,用来控制尺寸和外观。

  5. JavaScript API

    var title=mytab.getCurrentTitle();//获取当前标签页标题
    var ctw=mytab.getCurrentContentWindow();//获取当前Iframe标签页的ContentWindow
    mytab.getContentWindow("列表表格"); //按标题获取Iframe标签页的ContentWindow
    mytab.switchTo("列表表格"); //按标题切换到令一个标签页
    var array = mytab.getAllTabTitle(); //返回title的数组
    
  6. 示例

    HTML 代码

    <div jwcid="mytab@Tabset" switchAction="myTabSwitchAction(ptitle,title)">
    	<iframe jwcid="@TabsetFrame" title="静态树组件" 
    		page="examples.component.StaticTree" scrolling="no" 
    		style="width:100%;height:200px;">
    	</iframe>
    	<div jwcid="@TabsetContent" title="列表表格">
    		<div class="c_table">
    			<table>
    				<thead>
    					<tr>
    						<th>表头</th>
    						<th>表头</th>
    						<th>表头</th>
    						<th>表头</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr>
    						<td><a href="#nogo">文字较多的单元格</a></td>
    						<td>单元格</td>
    						<td>单元格</td>
    						<td>单元格</td>
    					</tr>
    					<tr>
    						<td><a href="#nogo">文字较多的单元格</a></td>
    						<td>单元格</td>
    						<td>单元格</td>
    						<td>单元格</td>
    					</tr>
    				</tbody>
    			</table>
    		</div>
    	</div>
    	<iframe jwcid="@TabsetFrame" title="常用表单" 
    		frameborder="0"
    		page="examples.component.FormElement" listener="init" scrolling="no" 
    		style="width:100%;height:200px;">
    	</iframe>
    </div>
    

    Javascript 代码

    <script language="javascript">
    <!--
    function test(){
    	//获取当前标签页标题
    	var title=mytab.getCurrentTitle();
    
    	//获取当前Iframe标签页的ContentWindow
    	var ctw=mytab.getCurrentContentWindow();
    	
    	//按标题获取Iframe标签页的ContentWindow
    	mytab.getContentWindow("列表表格");
    
    	//按标题切换到令一个标签页
    	mytab.switchTo("列表表格");
    }
    
    function myTabSwitchAction(ptitle,title){
    
    	//ptitle为当前标签页标题,title为要切换到的标签页标题
    	alert('switch:' + ptitle+"|" + title);
    	
    	//返回false,则不会做切换动作
    	return true;
    }
    //-->
    </script>