Tab切换组件(选项卡功能)实例代码


Posted in Javascript onNovember 21, 2013

直接贴代码里面有注释:

/**
 * 简单的Tab切换
 * 支持可配置项 如下参数 
 */
    function Tab(){
        this.config = {
            type            : 'mouseover',    //类型 默认为鼠标移上去
            autoplay        : true,           // 默认为自动播放
            triggerCls      : '.list',        // 菜单项
            panelCls        : '.tabContent',  // 内容项
            index           : 0,              // 当前的索引0
            switchTo        : 0,              // 切换到哪一项
            interval        : 3000,              // 自动播放间隔时间 默认为3 以s为单位
            pauseOnHover    : true,           // 鼠标放上去是否为暂停 默认为true
            current         : 'current',      // 当前项添加到类名
            hidden          : 'hidden',       // 类名 默认为hidden
            callback        : null            // callback函数
        };
        this.cache = {
            timer : undefined,
            flag  : true
        };
    }
    Tab.prototype = {
        init: function(options){
            this.config = $.extend(this.config,options || {});
            var self = this,
                _config = self.config;
            self._handler();
        },
        _handler: function(){
            var self = this,
                _config = self.config,
                _cache = self.cache,
                len = $(_config.triggerCls).length;
            $(_config.triggerCls).unbind(_config.type);
            $(_config.triggerCls).bind(_config.type,function(){
                _cache.timer && clearInterval(_cache.timer);
                var index = $(_config.triggerCls).index(this);
                !$(this).hasClass(_config.current) && 
                $(this).addClass(_config.current).siblings().removeClass(_config.current);
                $(_config.panelCls).eq(index).removeClass(_config.hidden).siblings().addClass(_config.hidden);
                // 切换完 添加回调函数
                _config.callback && $.isFunction(_config.callback) && _config.callback(index);
            });
            // 默认情况下切换到第几项
            if(_config.switchTo) {
                $(_config.triggerCls).eq(_config.switchTo).addClass(_config.current).siblings().removeClass(_config.current);
                $(_config.panelCls).eq(_config.switchTo).removeClass(_config.hidden).siblings().addClass(_config.hidden);
            }
            // 自动播放
            if(_config.autoplay) {
                start();
                $(_config.triggerCls).hover(function(){
                    if(_config.pauseOnHover) {
                        _cache.timer && clearInterval(_cache.timer);
                        _cache.timer = undefined;
                    }else {
                        return;
                    }
                },function(){
                    start();
                });
            }
            function start(){
                _cache.timer = setInterval(autoRun,_config.interval);
            }
            function autoRun() {
                if(_config.switchTo && (_config.switchTo == len-1)){
                    if(_cache.flag) {
                        _config.index = _config.switchTo;
                        _cache.flag = false;
                    }
                }
                _config.index++;
                if(_config.index == len) {
                    _config.index = 0;
                }
                $(_config.triggerCls).eq(_config.index).addClass(_config.current).siblings().removeClass(_config.current);
                $(_config.panelCls).eq(_config.index).removeClass(_config.hidden).siblings().addClass(_config.hidden);
            }
        }
    };

页面上调用方式如下:

$(function(){
    new Tab().init({
        switchTo: 1,
        callback: function(index){
            console.log(index);
        }
    });
});
Javascript 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
JavaScript 中的 this 工作原理
Jun 20 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 #Javascript
探讨javascript是不是面向对象的语言
Nov 21 #Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 #Javascript
Javascript对象属性方法汇总
Nov 21 #Javascript
获得Javascript对象属性个数的示例代码
Nov 21 #Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 #Javascript
浅析JavaScript中的常用算法与函数
Nov 21 #Javascript
You might like
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python计算回文数的方法
2015/03/11 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Python unittest模块用法实例分析
2018/05/25 Python
基于python实现把图片转换成素描
2019/11/13 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
编写python代码实现简单抽奖器
2020/10/20 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
html5实现滑块功能之type="range"属性
2020/02/18 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
一些网络技术方面的面试题
2014/05/01 面试题
市政施工员自我鉴定
2014/01/15 职场文书
办公设备采购方案
2014/03/16 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
资产移交协议书
2016/03/24 职场文书