由于代码都有注释,所以不多加解释,大家都知道的。直接贴代码:

代码如下:

/**
* 简单的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);
}
});
});

简单的Tab切换组件的更多相关文章

  1. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

  2. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  3. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  4. Flutter——TabBar组件(顶部Tab切换组件)

    TabBar组件的常用属性: 属性 描述 tabs 显示的标签内容,一般使用 Tab 对象,也可以是其他的Widget  controller TabController 对象 isScrollabl ...

  5. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. jQuery实现简单的tab切换

    html: <section>   <nav id="nav">     <a class="on">tab1</a& ...

  7. vue3 封装简单的 tabs 切换组件

    背景:公司项目要求全部换成 vue3 ,而且也没有应用像 element-ui 一类的UI组件,用到的公共组件都是根据项目需求封装的,下面是使用vue3实现简单的tabs组件,我只是把代码分享出来,实 ...

  8. 基于Vue开发的tab切换组件

    github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...

  9. 【angular】angular实现简单的tab切换

    html: <div class="list-group" ng-repeat="tab in menuList"> <a href=&quo ...

随机推荐

  1. Hadoop在启动时的坑——start-all.sh报错

    1.若你用的Linux系统是CentOS的话,这是一个坑: 它会提示你JAVA_HOME找不到,现在去修改文件: .修改hadoop配置文件,手动指定JAVA_HOME环境变量 [${hadoop_h ...

  2. php根据命令行参数生成配置文件

    像npm, composer等工具,在开始使用的使用,都需要初始化项目,生成一个项目的配置文件.这种功能的原理是怎么实现的呢? 比如: D:\>npm init --yes Wrote to D ...

  3. intellij idea 2016.3.5 控制台取消行数限制

    有时候我们要输出大量的信息放到控制台显示,但是多了之后就出现最上面的信息被覆盖删除, 因此就需要设置控制台的显示行数,但在idea7之后的版本中,取消了对控制台行数设置选项, 只能通过更改配置文件进行 ...

  4. Javascript 回调函数理解---二娃子买肾机6

    在Javascript中什么是回调函数,我认为简单来说就是把一个函数B作为参数传递给另一个函数A,在A函数中的一定时机调用函数B. 这里可以看出回调函数形成了一个闭包,它可以访问函数A中的活动对象. ...

  5. SPOJ4580 ABCDEF(meet in the middle)

    题意 题目链接 Sol 发现abcdef是互不相关的 那么meet in the middle一下.先算出abc的,再算def的 注意d = 0的时候不合法(害我wa了两发..) #include&l ...

  6. js-语言精粹-函数记忆

    函数可以将先前操作的结果记录在某个对象里,从而避免无谓的重复运算.这种优化方式被称为记忆(memoization).JavaScript的对象和数组要实现这种优化是非常方便的. 比如说,我们想要一个递 ...

  7. css-文字和图片在容器内垂直居中的简单方法

    方法一.使用line-heigh使多行文字居中或图片居中 把文字包裹在一个inline-block元素中vertical-align middle,外部元素line-heigh等于高度 <div ...

  8. HTML5 简单归纳 -- 前端知识 (二)

    HTML5 全屏事件 全屏事件:requestFullScreen 关闭全屏:cancelFullScreen 判断是否全屏:fullScreenElement 注意:现各大主流浏览器中由于内核不同的 ...

  9. JS代理模式实现图片预加载

    ---恢复内容开始--- 刚刚说了懒加载,现在我们来搞搞预加载吧 预加载的核心: 图片等静态资源在使用前提前请求. 资源后续使用可以直接从缓存中加载,提升用户体验. 几个误区: 预加载不是为了减少页面 ...

  10. iTerm通过堡垒机自动登录服务器

    为了保障网络和数据安全,越来越多公司使用堡垒机.iTerm作为一个好用的终端利器,要实现自动通过堡垒机登录服务器的方式有多种.下面我就来介绍一种通过expect脚本的方式完成配置. 第一步,进入/us ...