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

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

首先，来看看最终效果：

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

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

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

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

下面先看一看如何使用：

1、$('.js-tab ').etab()；2、$('.js-tab ').etab({ triggerType: 'click '，effect: 'fade '，invoke: 2，auto : 3000 })；3、Tab.init($(').js-tab’)；

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

index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title选项卡选项卡/title link href='tab.css' rel='样式表样式* {页边距：0划水：0;}正文{底色： # 323232；font-size :12 px字体系列：微软雅黑；padding:100px } ul，Li { list-style-type : none；}/样式脚本src='http:/lib/jquery-1。11 .3 .js/脚本脚本类型=' text/JavaScript ' src=' http : '选项卡。js/script/head body div class=' js-tab tab ' ul class=' tab-nav ' Li class=' active ' a href=' # '新闻/a /li lia href='# '电影/a /li lia href='# '娱乐/a /li lia href='# '科技/a /li /ul div class='内容-包装' div class='内容-当前项目h3新闻/H3/div='内容项' H3电影/H3/div='内容项' H3娱乐/H3/div='内容项' H3科技/H3/div/div/脚本$(function() {//Tab.init($(').js-tab’)；$('.js-tab ').etab({ triggerType: 'click '，effect: 'fade '，invoke: 2，auto : 3000 })；$('.js-tab ').etab()；});/脚本/正文/html。tab {宽度： 300 px}.选项卡tab-nav { height : 30px；}.选项卡选项卡-导航左侧浮动：右边距：5 px背景色： # 767676;边界半径：3 px 3px 0 0}.选项卡。选项卡导航阿利{显示：街区；高度：30 pxpadding:0 20pxcolor:白色；线高：30 px文本装饰：无；}.选项卡。标签导航。活动{底色： # fff}.选项卡。标签导航。活动a { color: # 777}。选项卡。内容包装{背景色：白色；padding:5px高度：200px} .选项卡。内容包装。内容项{ position:absolute绝对值高度： 200像素；显示器：无；}.选项卡。内容包装。当前{ height: 200pxdisplay:块；}最后将插件代码列出来，在代码里面已经写了很详细的注释：

/** *吴林2017/11/12创作。*/(函数($){ var Tab=function(tab，_ params){ var _ this=this；//保存单个标签组件this . tab=tab this . params=_ params//默认配置参数this.config={ //用来定义鼠标的出发类型单击/鼠标悬停在“Triggertype”:“鼠标悬停在”上，//用来定义内容切换效果，直接切换/淡入淡出效果' : '默认',//默认展示第几个选项卡“调用”:“1”，//用来定义标签是否自动切换，当指定了事件间隔，就表示自动切换，并指定了切换间隔auto ' : false }；//如果配置参数存在，就扩展默认的配置参数if(this.params){ $ .extend(this.config，this。参数)；} //保存标签标签列表，以及对应的内容列表这个。tabitem=这个。选项卡。find(' ul。tab-nav Li’)；这个。内容项=这个。选项卡。find(' div。内容包装.内容项');//保存配置参数var config=this.configif(config。triggertype===' click '){ this。塔比特姆。绑定(配置。triggertype，function(){ _ this。invoke($(this))；});} else { this。塔比特姆。将鼠标悬停在(function(){ _ this)上。invoke($(this))；});} //自动切换功能if(配置。自动){这个。timmer=null//计数器这个。loop=0；这个。autoplay()；这个。选项卡。悬停(function(){ window。clearinterval(_ this。timmer)；}，function(){ _ this。autoplay()；});} //设置默认显示第几个选项卡if(配置。调用1){ this。调用(这个。塔比特姆。eq(配置。invoke-1))；} };Tab.prototype={ //事件驱动函数invoke:函数(CurrentTab){/* * * 1，执行标签选中状态，当前选中标签加上活动，* 2,切换对应标签内容，根据配置参数影响参数默认|渐变*/var索引=当前选项卡。index()；var conItem=this.contentItem//选项卡切换currentTab.addClass('活动').兄弟姐妹()。移除CLaSS(' active ')；//内容区域切换var效应=这个。配置。效果；if(effect===' fade '){ conitem。情商(指数).fadeIn().兄弟姐妹()。淡出()；} else { conItem.eq(索引)。addClass('current ').兄弟姐妹()。removeClass(“”当前');} //注意，如果配置了自动切换，记得把当前的环值设置为当前的标签的索引if(这个。配置。自动){这个。循环=索引；} }, //自动间隔切换自动播放：函数(){ var _this_=this，tabItems=this.tabItem，//临时保存标签列表tabLength=tabItems.size()，config=this.configthis。timmer=窗口。setinterval(function(){ _ this _).循环；if(_this_ .loop=tabLength) { _this_ .loop=0；} tabItems.eq(_this_).循环)。触发器(配置。trigger type)；}，配置。自动)；} };选项卡。init=function(tab){ var _ this _=this；选项卡。每个(函数(){ new _ this _($(this))；});//var选项卡=新的制表符($(').js-tab ').等式(0));};//注册成JQuery方法$ .fn。扩展({ etab :函数(_ param){ this。每个(函数(){ new Tab($(this)，_ param)；});归还这个；} });窗户。制表符=制表符；})(jQuery)；如此看来，是不是很简单，一起来动手试试吧！

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