微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

JavaScript插件Tab选项卡效果

分类：JavaScript作者：编程之家

闲来无事，研究了一下JavaScript插件的写法，今天就将自己写的一个小插件记录下来。

本文介绍了此款插件的基本用法，实现的功能以及代码。

首先，来看看最终效果：

这是一款普通的Tab选项卡插件，下面来讲讲它实现了哪些功能：

1、支持不同鼠标事件触发选项卡切换效果； 2、支持不同切换效果的配置，例如淡入淡出/直接切换； 3、支持默认展示第几个选项卡的配置； 4、支持选项卡的自动切换效果。

例子很简单，需要用到的知识包括： 1、html、css的基础知识； 2、对this，prototype，new等关键词的理解。

简而言之，就是通过参数配置的形式来完成不同效果的展示。

下面先看一看如何使用：

1、$(".js-tab").etab(); 2、$(".js-tab").etab({ triggerType: "click", effect: "fade", invoke: 2, auto: 3000 }); 3、Tab.init($(".js-tab"));

本插件支持几种不同的初始化方式，代码很简单，类似于BootStrap插件的使用方法。下面奉上完整的代码：

index.html

rush:xhtml;"> <Meta charset="UTF-8"> Tab选项卡 * { margin:0; padding:0; } body { background-color: #323232; font-size:12px; font-family:微软雅黑; padding:100px; } ul,li { list-style-type: none; }

    • <div class="content-wrap">
    <div class="content-item current">

    新闻

    电影
    娱乐
    科技
    rush:css;"> .tab { width: 300px; }

    .tab .tab-nav {
    height: 30px;
    }

    .tab .tab-nav li {
    float: left;
    margin-right:5px;
    background-color:#767676;
    border-radius:3px 3px 0 0;
    }

    .tab .tab-nav li a{
    display:block;
    height:30px;
    padding:0 20px;
    color: white;
    line-height:30px;
    text-decoration: none;
    }

    .tab .tab-nav .active {
    background-color: #fff;

    }

    .tab .tab-nav .active a{
    color: #777;
    }

    .tab .content-wrap{
    background-color: white;
    padding:5px;
    height:200px
    }

    .tab .content-wrap .content-item {
    position:absolute;
    height: 200px;
    display: none;
    }

    .tab .content-wrap .current {
    height: 200px;
    display: block;
    }

    最后将插件代码列出来，在代码里面已经写了很详细的注释：

    var Tab = function(tab,_params) {
    var _this = this;

    //保存单个Tab组件
    this.tab = tab;

    this.params = _params;

    //默认配置参数
    this.config = {
    //用来定义鼠标的出发类型 "click"/mouseover
    "triggerType": "mouseover",//用来定义内容切换效果，直接切换/淡入淡出
    "effect": "default",//默认展示第几个Tab
    "invoke": "1",//用来定义Tab是否自动切换，当指定了事件间隔，就表示自动切换，并指定了切换间隔
    "auto": false
    };

    //如果配置参数存在，就扩展默认的配置参数
    if(this.params){
    $.extend(this.config,this.params);
    }

    //保存Tab标签列表，以及对应的内容列表
    this.tabItem = this.tab.find("ul.tab-nav li");
    this.contentItem = this.tab.find("div.content-wrap .content-item");

    //保存配置参数
    var config = this.config;

    if(config.triggerType === "click") {
    this.tabItem.bind(config.triggerType,function() {
    _this.invoke($(this));
    });

    } else {
    this.tabItem.mouseover(function(){
    _this.invoke($(this));
    });
    }

    //自动切换功能
    if(config.auto) {
    this.timmer = null;

    //计数器
    this.loop = 0;

    this.autoPlay();

    this.tab.hover(function() {
    window.clearInterval(_this.timmer);
    },function() {
    _this.autoPlay();
    });
    }

    //设置默认显示第几个Tab
    if(config.invoke > 1) {
    this.invoke(this.tabItem.eq(config.invoke - 1));
    }

    };

    Tab.prototype = {

    //事件驱动函数
    invoke: function(currentTab) {

    /**

    • 1、执行Tab选中状态，当前选中Tab加上Active, 2、切换对应Tab内容，根据配置参数effect参数default|fade
      /

    var index = currentTab.index();
    var conItem = this.contentItem;

    //Tab切换
    currentTab.addClass("active").siblings().removeClass("active");

    //内容区域切换
    var effect = this.config.effect;

    if(effect === "fade") {
    conItem.eq(index).fadeIn().siblings().fadeOut();
    } else {
    conItem.eq(index).addClass("current").siblings().removeClass("current");
    }

    //注意，如果配置了自动切换，记得把当前的loop值设置为当前的Tab的index
    if(this.config.auto) {
    this.loop = index;
    }
    },//自动间隔切换
    autoplay: function() {

    var this = this,tabItems = this.tabItem,//临时保存Tab列表
    tabLength = tabItems.size(),config = this.config;

    this.timmer = window.setInterval(function() {
    this.loop++;
    if(this.loop >= tabLength) {
    this.loop = 0;
    }

    tabItems.eq(_this_.loop).trigger(con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>.triggerType);

    },config.auto);

    }
    };

    Tab.init = function(tabs) {
    var this = this;
    tabs.each(function() {
    new this($(this));
    });
    // var tab = new Tab($(".js-tab").eq(0));
    };

    //注册成JQuery方法
    $.fn.extend({
    etab: function(_param) {
    this.each(function () {
    new Tab($(this),_param);
    });
    return this;
    }
    });

    window.Tab = Tab;

    })(jQuery);

    如此看来，是不是很简单，一起来动手试试吧！

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

    js选项卡

    相关推荐

    自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
    前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
    nice-validator表单验证插件的简单使用
    前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
    基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
    前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
    踹掉后端，前端导出Excel！
    前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
    Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
    前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
    select标签 禁止选择但又能通过序列化form表单传值到后台
    前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo
    还在问跨域？本文记录js跨域的多种实现实例
    前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
    formData批量上传的多种实现
    前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
    laypage 物理分页与逻辑分页实例
    前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
    乐观锁机制解决多层嵌套异步ajax问题
    前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
    苹果市值2025年有望达4万亿美元
    pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot