页签切换

jquery.toggleTab.js

通过在html标签上添加属性，快速实现页签切换功能。可配置使用clip 隐藏面板，放置flash 和使某些插件能正常获取宽高。

用法

• 需要将下面样式加入css中给插件使用

.tab-item-hide {
  display: none;
}

.tab-item-clip {
  position: absolute!important;
  top: 0;
  left: 0;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

在JS中

<ul id="nav" class="nav nav-tabs">
    <li>页签一</li>
    <li class="active">页签二</li>
</ul>
<div id="wrap" class="tab-content">
    <div>内容一</div>
    <div>内容二</div>
</div>

$('#nav').toggleTab({
    target:"#wrap",
    event:"click",
    hideType:"display"
})

在HTML中

使用[data-role="toggleTab"]标记需要触发页签切换的元素，data-target指向面板容器。将配置参数用data-的形式定义在元素的属性上。如hideType => data-hide-display

<ul data-role="toggleTab" data-target="#wrap" data-event="click" data-hide-type="display" class="nav nav-tabs">
    <li>页签一</li>
    <li class="active">页签二</li>
</ul>
<div id="wrap" class="tab-content">
    <div>内容一</div>
    <div>内容二</div>
</div>

配置

方法

.toggleTab([index:Int])

切换页签，传入整型，第一个页签的下标为0。

$('#nav').toggleTab(2);

事件

$('#nav').on('yw.tt.change',function(e,index){
    console.log('tab' + index +'被触发');
})