闲来无事,研究了一下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
<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;
}
电影
娱乐
科技