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