当前位置: 首页 > Web前端 > HTML

一个简单的tabjs插件

时间:2023-04-02 13:14:14 HTML

估计两三个月左右就没有前端这类文章了。一来是觉得自己太优秀了,二来也是因为自己的懒惰。结果。今天因为和一些同学聊天,突然觉得很郁闷,有种看不到前途的感觉,所以逼着自己学习,看看怎么写js插件。今天写了一个简单的tab插件。我也是看了别人的博文来学习和实现这个,再补充一些自己的理解。1、虽然实现效果有点粗糙,但是可以看到在html文件中,引入我们写的tab.js插件后,只需要一行代码就可以实现tab的切换。2.Tab.js的结构我们先来看一下整体的结构//当然一开始有一个构造函数tabfunctionTab(){//里面只有一行代码,就是调用自己的初始化方法this.init.apply(this,arguments);}//需要的属性和方法都写在原型中Tab.prototype={//Properties//somecode//Methods//somecode}3.这里有些方法的实现没有使用闭包然后立即执行,所以需要一个初始化函数来初始化所有的属性,在init:init:function(ela,elb,paramObj){//一般会有一个配置对象在插件,它有一个默认值this.defaultOptions={curClass:'current',type:'mouseover',delay:150}//然后我们会检查用户是否传入了配置参数,如果是,使用用户的配置。这里我们使用了一个extend方法this.options=this.extend(this.defaultOptions,paramObj||{})}extend其实是一个对象扩展方法,将对象b的属性覆盖到对象a。这个方法是在JQ里直接写的,js里没有,需要自己模拟,我们把这个方法写在init外面extend:function(a,b){for(variinb){//这个是检测是否for循环到达的属性是b本身if(b.hasOwnProperty(i)){a[i]=b[i]}}returna;}navigationbar,contentblock的DOM,以及它们的子元素子元素的个数后面会在遍历中用到,具体可以看文中附源码。最后,我们需要给init中的每一个导航绑定事件,一个是触发,一个是取消。取消自然是在鼠标移出时。如果触发了,可以传入参数来制作。使用方括号可以解决这个问题for(vari=0;i