YDUI Touch Docs 返回首页

Tab

1、说明

1.1、示例：http://m.ydui.org/html/tab.html

1.2、选项卡插件，基于 CSS3 transition 实现水平平滑滚动；借鉴 Bootstrap 先进思想，支持Data API 和 Javascript API方式调用；

2、调用

调用方式一（Javascript API）
111111
222222
333333

每个js组件都是独立的jQuery插件，调用方式跟普通插件一样。

<div id="J_Tab" class="m-tab">
    <ul class="tab-nav">
        <li class="tab-nav-item tab-active"><a href="javascript:;">选项一</a></li>
        <li class="tab-nav-item"><a href="javascript:;">选项二</a></li>
        <li class="tab-nav-item"><a href="javascript:;">选项三</a></li>
    </ul>
    <div class="tab-panel">
        <div class="tab-panel-item tab-active">111111</div>
        <div class="tab-panel-item">222222</div>
        <div class="tab-panel-item">333333</div>
    </div>
</div>

<script>
    var $tab = $('#J_Tab');

    $tab.tab({
        nav: '.tab-nav-item',
        panel: '.tab-panel-item',
        activeClass: 'tab-active'
    });

    $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
        console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
    });

    $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
        console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
    });
</script>
调用方式二（Data API）
111111
222222
333333
444444

在选项卡容器 .m-tab 上添加 data-ydui-tab 属性即可。

<div class="m-tab" data-ydui-tab><!-- 这里添加data-ydui-tab就可以啦 -->
    <ul class="tab-nav">
        <li class="tab-nav-item tab-active"><a href="javascript:;">选项一</a></li>
        <li class="tab-nav-item"><a href="javascript:;">选项二</a></li>
        <li class="tab-nav-item"><a href="javascript:;">选项三</a></li>
        <li class="tab-nav-item"><a href="javascript:;">选项四</a></li>
    </ul>
    <div class="tab-panel">
        <div class="tab-panel-item tab-active">111111</div>
        <div class="tab-panel-item">222222</div>
        <div class="tab-panel-item">333333</div>
        <div class="tab-panel-item">444444</div>
    </div>
</div>

3、自定义事件（Data API 和 Javascript API都支持）

3.1、[open.ydui.tab]：打开一个选项卡时立即触发；

3.2、[opened.ydui.tab]：选项卡打开完成后触发（CSS 动画执行完成）；