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

代码如下:

/**
* 简单的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. linux_shell_数组

    shell数组类似与C语言,数组下标由0开始编号.想要获取数组中的元素要利用下标. 1.首先定义数组 在shell中,用括号来表示数组,数组元素用“空格”符号分割开.列: name=("d& ...

  2. Three.js开发指南---创建,加载高级网格和几何体(第八章)

    本章的主要内容: 一, 通过Three.js自带的功能来组合和合并已有的几何体,创建出新的几何体 二, 从外部资源中加载网格和几何体 1 前面的章节中,我们学习到,一个几何体创建的网格,想使用多个材质 ...

  3. POJ1149(最大流)

    PIGS Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 21678   Accepted: 9911 Description ...

  4. CSS 水平居中和垂直居中

    1.水平居中——行内元素 text-align: center; 2.水平居中——定宽块状元素 margin: auto,满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto” ...

  5. element-ui Pagination组件源码分析整理笔记(七)

    element-ui源码的版本是2.4.9 pagination.js import Pager from './pager.vue'; import ElSelect from 'element-u ...

  6. 【代码笔记】iOS-JQIndicatorViewDemo

    一,效果图. 二,工程图. 三,代码. #import "ViewController.h" #import "JQIndicatorView.h" @inte ...

  7. 结束autocad异常进程

    近日在做CAD自动化数据处理,程序在服务器上运行,运行时间长了会发生异常“autocad application 已停止工作”,这个时候需要通过守护程序去重启CAD, 通过CMD命令“@taskkil ...

  8. SQLServer 学习笔记之超详细基础SQL语句 Part 9

    Sqlserver 学习笔记 by:授客 QQ:1033553122 -----------------------接Part 8------------------- 3 范式的概念 第一范式的目标 ...

  9. Android工程中javax annotation Nullable找不到的替代方案

    我们在某些Android开源库中会遇到下面的引用找不到的问题:import javax.annotation.Nonnull;import javax.annotation.Nullable; 其实A ...

  10. 关于DAL层使用静态方法,并在WEB层直接调用的问题

    同样的疑惑,记录一下吧: http://bbs.csdn.net/topics/360204198 DAL静不静态看connection等关键资源是否静态 比如下面的代码,就算静态也没事 public ...