TAB切换

TAB标签切换效果，组件切换时候，只会对操作当前的 dom 节点，也不会进行多余的 for 循环，调用方便，可重复调用，支持延迟切换，支持回调函数，支持扩展（添加动画效果）等。

milo版本

在页面中现引入milo库，然后使用milo的need方法引入tabs组件； 关于更详细的milo库使用方法可以查看Milo库使用说明

组件CDN

<!-- PC端milo -->
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>

<!-- 移动端milo -->
<script src="//ossweb-img.qq.com/images/js/mobile_bundle/milo.js"></script>

示例代码

<style>
 .tab .hd .on{...}
 .tab .tab-panel{display: none }
 .tab .dis{display: block }
</style>
<div id="rotate" class="tab">
     <div class="hd">
         <ul>
             <li><a href="javascript:;">综合</a></li>
             <li><a href="javascript:;">公告</a></li>
             <li><a href="javascript:;">活动</a></li>
         </ul>
     </div>
     <div class="bd">
         <div class="tab-panel">
         <p>综合综合综合综合综合综合综合综合综合综合综合综合综合综合综合综合</p>
         </div>
         <div class="tab-panel">
         <p>公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告</p>
         </div>
         <div class="tab-panel">
         <p>活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动活动</p>
         </div>
     </div>
</div>

<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script>
// 利用milo库引入tabs组件
need("biz.tabs",function (tabs){
    //简单调用
    tabs.init("rotate", "tab-panel", {
        timeout: 80,//延迟切换时间。默认参数为60;
        currCls: "on",//设置当前标签（li）class 名。默认参数为"on";
        disCls: "dis",//控制显示class名。默认参数为"dis";
        event: "mouseover",//事件类型。默认为"mouseover";
        animation: "slide",//有动画效果设置此参数。参数可选slide/fade (滚动/渐入)
        change: 380,//当有动画slide效果，设置此参数（每次移动的PX值）。
        auto: true,//是否自动切换。默认为false
        Pause: 300, //每次自动停顿时间(auto为true时有效)
        onFinish: callback //回调函数。需要定义callback函数;
    });

});

function callback(n, index, panel) { //切换完成回调函。数参数为：上一个索引值,当前索引值,当前显示块
    // dosomething
}
</script>

示例地址：【点击查看】

API

init

初始化tab组件 tabs.init("轮播外层容器ID", "轮播内容层样式名", {参数：参数值}

参数说明

• timeout : number 延迟切换时间。默认参数为60;
• currCls : string 设置当前标签（li）class 名。默认值为"on";
• disCls : string 控制显示的 class 名。默认值为 "dis";
• event : string 事件类型。默认为 "mouseover";
• animation : string 有动画效果设置此参数。参数值可选 slide/fade (滚动/渐入)
• change : number 当有动画 slide 效果，设置此参数（每次移动的像素值）。
• auto : boolean 是否自动切换。默认为 false
• pause : number 每次自动停顿时间 (auto 为 true 时有效)
• onFinish : function 切换效果结束后执行的函数

独立tabs组件

参数和milo版本一样，初始化调用方式不一样。

组件CDN

<script src="//ossweb-img.qq.com/images/js/comm/tabs.min.js"></script>

示例代码

// 直接引入 JS
<script src="//ossweb-img.qq.com/images/js/comm/tabs.min.js"></script>
<script>
// 直接调用
 var tabs01 = new tabs("tab", "tab-panel", {
     timeout: 80, // 延迟切换时间。默认参数为 60;
     currCls: "on", // 设置当前标签（li）class 名。默认参数为 "on";
     disCls: "dis", // 控制显示 class 名。默认参数为 "dis";
     event: "mouseover", // 事件类型。默认为 "mouseover";
     onFinish: callback, // 回调函数。需要定义 callback 函数;
     animation: "slide", // 需要动画效果设置此参数.可选 slide/fade (滚动/渐入)
     auto: true, // 是否自动切换。默认为 false
     Pause: 300, // 每次自动停顿时间 (auto为true时有效)
 });
</script>