3.1.5 tabChange

说明: 需要展示多个栏目以及节省空间的时候

使用及参数说明:

<div class="xui_tab" id="hardTest">
    <ul class="xui_tab_head">
        <li>tab1</li>
        <li>tab2</li>
    </ul>
    <div class="xui_tab_body">
        <div>内容1</div>
        <div>内容2</div>
    </div>
</div>

xui.tab({
    id: string,
    activeIndex: number,
    animateType: string,
    fn: callback
});

• 复制好相应的html,取一个独特的id,然后初始化init就可以使用了,非常方便
• 记得给你的tab来一个宽度和高度哦!
• id表示下拉框的id 必传
• activeIndex表示当前显示哪一个tab的数据
• animateType表示tab切换的动画效果, 默认为none,可以配置toLeft,toRight
• fn表示tab切换之后的回调
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.先来看看最普通的tab切换效果,无需过多配置

<div class="xui_tab" id="simpleTest">
    <ul class="xui_tab_head">
        <li>tab1</li>
        <li>tab2</li>
    </ul>
    <div class="xui_tab_body">
        <div>内容1</div>
        <div>内容2</div>
    </div>
</div>

xui.tab({
    id: 'simpleTest'
});

2.你说:我想指定某一个被选中呢? 嗯,这也是在我的考虑范围内的,只需指定对应的activeIndex

<div class="xui_tab" id="normalTest">
    <ul class="xui_tab_head">
        <li>tab1</li>
        <li>tab2</li>
        <li>tab3</li>
    </ul>
    <div class="xui_tab_body">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>
</div>

xui.tab({
    id: 'normalTest',
    activeIndex: 1,
    animateType: 'toLeft',
});

3.最后我知道你肯定会问: 切换了有回调嘛? 当然有的!对应的回调函数是fn

<div class="xui_tab" id="hardTest">
    <ul class="xui_tab_head">
        <li>tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li>tab4</li>
    </ul>
    <div class="xui_tab_body">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </div>
</div>

xui.tab({
    id: 'hardTest',
    activeIndex: 2,
    animateType: 'toRight',
    fn: function(){
        xui.message('看,这就是回调哦!');
    }
});