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

YDUI Touch Docs 返回首页

ScrollTab

1、说明

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

1.2、滚动选项卡插件;借鉴 Bootstrap 先进思想,支持Data API 和 Javascript API方式调用;

2、调用

调用方式一(Javascript API)

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

<div class="m-scrolltab" id="J_ScrollTab">
<div class="scrolltab-nav">
<a href="javascript:;" class="scrolltab-item">
<div class="scrolltab-icon"><!-- 你的图标 --></div>
<div class="scrolltab-title">空调</div>
</a>
<a href="javascript:;" class="scrolltab-item">
<div class="scrolltab-icon"><!-- 你的图标 --></div>
<div class="scrolltab-title">冰箱</div>
</a>
<a href="javascript:;" class="scrolltab-item">
<div class="scrolltab-icon"><!-- 你的图标 --></div>
<div class="scrolltab-title">洗衣机</div>
</a>
</div>
<div class="scrolltab-content">
<div class="scrolltab-content-item">
<strong class="scrolltab-content-title">空调</strong>
<!-- 对应分类内容 -->
</div>
<div class="scrolltab-content-item">
<strong class="scrolltab-content-title">冰箱</strong>
<!-- 对应分类内容 -->
</div>
<div class="scrolltab-content-item">
<strong class="scrolltab-content-title">洗衣机</strong>
<!-- 对应分类内容 -->
</div>
</div>
</div>

<script>
$('#J_ScrollTab').scrollTab({
initIndex: 2 // 初始化即高亮洗衣机选项卡
});
</script>
调用方式二(Data API)

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

<div class="m-scrolltab" data-ydui-scrolltab><!-- 添加data-ydui-scrolltab就可以啦 -->
<div class="scrolltab-nav">
<a href="javascript:;" class="scrolltab-item">
<div class="scrolltab-icon"><!-- 你的图标 --></div>
<div class="scrolltab-title">空调</div>
</a>
<a href="javascript:;" class="scrolltab-item">
<div class="scrolltab-icon"><!-- 你的图标 --></div>
<div class="scrolltab-title">冰箱</div>
</a>
<a href="javascript:;" class="scrolltab-item">
<div class="scrolltab-icon"><!-- 你的图标 --></div>
<div class="scrolltab-title">洗衣机</div>
</a>
</div>
<div class="scrolltab-content">
<div class="scrolltab-content-item">
<strong class="scrolltab-content-title">空调</strong>
<!-- 对应分类内容 -->
</div>
<div class="scrolltab-content-item">
<strong class="scrolltab-content-title">冰箱</strong>
<!-- 对应分类内容 -->
</div>
<div class="scrolltab-content-item">
<strong class="scrolltab-content-title">洗衣机</strong>
<!-- 对应分类内容 -->
</div>
</div>
</div>

3、参数

参数说明类型可选值默认值
initIndex 初始高亮选项卡索引值 Number - 0