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

YDUI Touch Docs 返回首页

ScrollTab

1、说明

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

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

2、参数

2.1、主要包含1个参数:

initIndex:初始高亮选项卡索引值,默认为0

3、调用方式一(Javascript API)

3.1、每个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 src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>
<script>
$('#J_ScrollTab').scrollTab({
initIndex: 2 // 初始化即高亮洗衣机选项卡
});
</script>

4、调用方式二(Data API)

4.1、在选项卡容器.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>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>

5、参与讨论

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