页签容器

简介

1.支持通过标签静态设置表格.

2.支持动态增删页签.

3.支持页签选中等事件.

4.支持页签显示样式设定.

使用方法

2.1 静态框架使用方法仅EAS7.5版本

<wafctrl:tabPanel  id="id" name="name" >
    <wafctrl:tab id="tab1" title="标签1" closable="true" tagClass="tabClass">
        <iframe id='frameB' name='frameB' width='100%' height='100px' frameborder=0 scrolling='no'>
        </iframe>
    </wafctrl:tab>
</wafctrl:tabPanel>

2.2 JS动态创建 EAS8.0+

var options = {id:"tabPanel1",style:"height:50px"};
var dom = waf.createDOM("tabPanel", options);
waf.appendDOM(waf("body"), dom);
waf.initComponent("tabPanel", options, dom);

2.3 通用DOM创建 EAS8.0+

<div id="tmpTabPanelID" ctrlrole="tabPanel" class="ui-waftabs ui-widget ui-widget-content ui-corner-all" data-domcreated="true">
    <ul id="tmpTabPanelID_ul" class="ui-waftabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li id="li_tmpTabID" customerid="tmpTabID" class="ui-state-default ui-corner-top ui-waftabs-selected ui-state-active">
        <a href="#tmpTabID">
            <span class="tabs-title">tmpTabTitle1</span>
        </a>
        </li>
    </ul>
    <div id="tmpTabID" ctrlrole="tab" class="ui-waftabs-panel ui-widget-content ui-corner-bottom" data-domcreated="true">
    </div>
</div>
<!--DOM创建好之后，使用js初始化控件-->
waf("#tabPanel1").wafTabs(options);

2.4 方法&事件使用 EAS7.5+

//调用方法
waf("#id").wafTabs('method', parameter...);
//eg:获取和设置值
waf("#id").wafTabs("getValue");
waf("#id").wafTabs("setValue");
//eg:更改事件
waf("#id").wafTabs("option","onchange",fn);

属性说明

ajaxOptions String 缺省值: null EAS7.5+

当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.

cache Boolean 缺省值: false EAS7.5+

这个选项用于ajax调用,简单的说无缓存,就是每次发送请求都刷新；有缓存就是第一次请求刷新,以后就不刷新了,关闭页面是另外一回事.如：waf(‘#mytabs’).wafTabs(option’,’cache’,true);

hidden Boolean 缺省值: false EAS7.5+

设置整个页签面板是否不可见.如：waf(‘#mytabs’).wafTabs(option’,’hidden’,true);

id String 缺省值: null 不可以在运行期改变 EAS7.5+

定义页签面板的id

selected Integer 缺省值: 0 EAS7.5+

指定默认打开的页签.

style String 缺省值: null EAS7.5+

定义页签区的样式

tagClass String 缺省值: null EAS7.5+

定义页签区样式类，可以添加一个或多个

tabTemplate String 缺省值: null EAS7.5+

设置新增页签的选项卡html结构.

方法说明

option 参数: (property[,value]) 返回值类型: (Object) EAS7.5+

获得或设置页签区某属性的值，当value参数存在时，设置页签区的property属性值，且无返回值，否则返回页签区的property属性.[参考样例]

参数说明:
- property：必要参数，页签区的属性
- value：可选参数，页签区的属性值
返回值说明：
- 当value参数不存在时，有返回值，该返回值为与property对应的属性值，可以是任意类型的javascript对象。

add 参数: (option,[index]) 返回值类型: (页签控件本身) EAS7.5+

添加(插入)新页签选项卡.[参考样例]

参数说明：
    - option为对象,表示tab的配置值,例如:{“id”:”tabs1”,”title”:”页签1”,”url”:”/tab1.do”,”closable”:true}.
    - index为可选参数,表示在那个页签索引对应的位置插入新页签,不设置则新页签出现在页签栏的最后位置.
    如：varsel=waf(“#id”).wafTabs(“add”,{“id”:”newtab”,”title”:”新页签”,”url”:”/tab1.do”,”closable”:true},0);
    如：var sel = waf(“#id”).wafTabs(“add”, {“id”: “newtab”, “title”: “新页签”, “iconClass”:”icon-reload”});

remove 参数: (index) 返回值类型: (none) EAS7.5+

删除指定的页签.[参考样例]

参数说明：
    - index为指定的页签的索引.
    如：waf(“#mytabs”).wafTabs(“option” ,”remove”,2);或 //设置第3个页签
    如：var sel = waf(“#id”).wafTabs(“option” ,”remove”,”#tab_3”); //#tab_3为选项卡中a标签中的href值

enable 参数: (index) 返回值类型: (none) EAS7.5+

启用指定的页签.[参考样例]

参数说明：
- index-启用页签的索引

disable 参数: (index) 返回值类型: (none) EAS7.5+

禁用指定的页签.[参考样例]

参数说明：
- index-禁用页签的索引

select 参数: (index) 返回值类型: (none) EAS7.5+

选择指定的页签.[参考样例]

参数说明：
- index-选择页签的索引

load 参数: (index,[url]) 返回值类型: (none) EAS7.5+

重新按url加载指定的页签内容.[参考样例]

参数说明：
    - index为指定的页签的索引；
    - url可以作为此方法的可选参数指定,也可以在此方法调用前通过url方法（wafTab和wafTabs均有此方法）指定,还可以通过wafTabs插件的ajaxOptions属性指定（参考标签3的源码示例）.如果不打算通过url加载页签内容,load无意义.如：waf(“#mytabs”).wafTabs(“load”,2,”../myurl.do?param=abc”)
    如：waf(“#mytabs”).wafTabs(“load” ,2,”../myurl.do?param=abc”); //重新加载第3个页签中的内容

url 参数: (index,url) 返回值类型: (none) EAS7.5+

设置指定页签的url路径. [参考样例]

参数说明：
-index为指定的页签的索引；只是将url存放到指定的页签中而不会立刻加载url的内容,详见：概述中“特殊功能说明”.如：waf(“#mytabs”).wafTabs(“url”,2,”../../myurl.do”)

changeTitle 参数: (index,title) 返回值类型: (none) EAS7.5+

替换页签选项卡中的名称或html结构.[参考样例]

参数说明：
- index为指定的页签的索引；title为选项卡名称或选项卡中的html片段.如：waf(“#mytabs”).wafTabs(“changeTitle”,1,”新标签名称”)

length 参数: (none) 返回值类型: (Number) EAS7.5+

取得页签的数量.如：waf(“#mytabs”).wafTabs(“length”). [参考样例]

事件说明

beforeOnLoad 参数:(event, ui) 返回值类型: (none) EAS7.5+

页签加载前触发.
参数说明：
    - event - 事件对象.
    - ui - 控件对象. 其中
        - ui.tab : 被选中（点击后）的选项卡元素
        - ui.panel : 这个元素包含被选中（点击后）的选项卡的内容
        - ui.index : 返回一个被选中（或点击后）选项卡的索引值（从0开始)
返回值说明：无

onSelect 参数:(event, ui) 返回值类型: (Boolean) EAS7.5+

页签选中时触发.[参考样例]
参数说明：
    - event - 事件对象.
    - ui - 控件对象. 其中
        - ui.tab : 被选中（点击后）的选项卡元素
        - ui.panel : 这个元素包含被选中（点击后）的选项卡的内容
        - ui.index : 返回一个被选中（或点击后）选项卡的索引值（从0开始)
返回值说明:当返回值为false时,则不允许改变.

onLoad 参数:(event, ui) 返回值类型: (none) EAS7.5+

页签加载完成后时触发, 只对通过url加载的页签生效.[参考样例]
参数说明：
    - event - 事件对象.
    - ui - 控件对象. 其中
        - ui.tab : 被选中（点击后）的选项卡元素
        - ui.panel : 这个元素包含被选中（点击后）的选项卡的内容
        - ui.index : 返回一个被选中（或点击后）选项卡的索引值（从0开始)
返回值说明：无

onShow 参数:(event, ui) 返回值类型: (none) EAS7.5+

页签显示时触发.[参考样例]
参数说明：
    - event - 事件对象.
    - ui - 控件对象. 其中
        - ui.tab : 被选中（点击后）的选项卡元素
        - ui.panel : 这个元素包含被选中（点击后）的选项卡的内容
        - ui.index : 返回一个被选中（或点击后）选项卡的索引值（从0开始)
返回值说明：无

onAdd 参数:(event, ui) 返回值类型: (none) EAS7.5+

页签新增时触发.[参考样例]
参数说明：
    - event - 事件对象.
    - ui - 控件对象. 其中
        - ui.tab : 被选中（点击后）的选项卡元素
        - ui.panel : 这个元素包含被选中（点击后）的选项卡的内容
        - ui.index : 返回一个被选中（或点击后）选项卡的索引值（从0开始)
返回值说明：无

onRemove 参数:(event, ui) 返回值类型: (none) EAS7.5+

页签删除时触发.[参考样例]
参数说明：
    - event - 事件对象.
    - ui - 控件对象. 其中
        - ui.tab : 被选中（点击后）的选项卡元素
        - ui.panel : 这个元素包含被选中（点击后）的选项卡的内容
        - ui.index : 返回一个被选中（或点击后）选项卡的索引值（从0开始)
返回值说明：无

onEnable 参数:(event, ui) 返回值类型: (none) EAS7.5+

某些页签设置为“可用”后触发.[参考样例]
参数说明：
    - event - 事件对象.
    - ui - 控件对象. 其中
        - ui.tab : 被选中（点击后）的选项卡元素
        - ui.panel : 这个元素包含被选中（点击后）的选项卡的内容
        - ui.index : 返回一个被选中（或点击后）选项卡的索引值（从0开始)
返回值说明：无

onDisable 参数:(event, ui) 返回值类型: () EAS7.5+

某些页签设置为“不可用”后触发[参考样例]
参数说明：
    - event - 事件对象.
    - ui - 控件对象. 其中
        - ui.tab : 被选中（点击后）的选项卡元素
        - ui.panel : 这个元素包含被选中（点击后）的选项卡的内容
        - ui.index : 返回一个被选中（或点击后）选项卡的索引值（从0开始)
返回值说明：无