嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

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 动画执行完成);

4、参与讨论

4.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。