自己实践写一个基于jquery的tab插件,面向对象的写法
这里我就不写index.html,和index.css了，主要就是分析插件代码tab.js
代码我上传到github上了，如果你们想看DOM结构及CSS样式的话，可以去把源码下来看看
github地址：github地址
目录结构：index.html,index.css以及tab.js
基本结构搭建
首先搭建一个jquery插件的框架
tab.js
;(function ($) {
var Tab = function (target) {
}
Tab.prototype = {
}
window.Tab = Tab
}(jQuery))index.html 里调用Tab构造函数
<script>
$(function () {
var tab1= new Tab('#box')
})
</script>配置默认参数及参数获取
-
然后我们先配置一些默认参数
tab.js
``` var Tab = function (target) { //保存Tab类自身 var _this_ = this //保存当前Tab组件的对象 this.target = target //默认配置参数 this.config={ "tiggerType": "mouseover", //鼠标交互方式 "effect":null, //切换效果,默认为无 "default":1, //默认展示第几个标签 "auto":false, //自动切换时长,若指定了时长则表示开启自动切换 } } ``` -
用户(使用者)配置参数的方法
默认参数配置好以后，我们需要获取用户的配置参数，
函数传参的方式大家应该都很熟悉了，在这里我们不用传参的方式获取，我们采用设置DOM属性的方式设置参数。这种配置方法很常见，比如Element-uiindex.html
<div class="box" id="box1" config='{"tiggerType":"click","auto":5000}'> <div class="title"> <ul class="tab-list"> li*4 </ul> </div> <div class="content"> img*4 </div> </div>在最外层的div即我们选中的DOM节点上设置了一个名为config的属性，config的值为一串JSON
这样子我们就设置了参数，那么怎么获取呢？我们写一个函数来获取 -
获取用户的配置参数
tab.jsTab.prototype = { //获取用户的配置参数 getConfig: function () { var config = $(this.target).attr("config") if(config&&config!==""){ //将用户json格式的config转为对象格式 return $.parseJSON(config) }else{ return null } }, }函数我们写在Tab.prototype{}里，这里的逻辑是：
1、attr()获取我们在DOM节点里的配置参数
2、如果有的话就将我们获取到的值转换为js对象，没有的话就返回null
这里要注意的是我们的宿主DOM，即我们在调用 new Tab('#box1')传入的对象要用jquery包裹一下，这样才能正常获取到该节点，因为我传入的仅仅是宿主DOM的ID，当然也可以在调用时直接将这个ID包装一下，在这里就可以省去这一步而直接使用传过来的对象。
index.html<script> $(function () { //var tab1= new Tab('#box') //var tab1= new Tab($('#box')) //调用时将ID包裹 }) </script> -
参数处理
在解决了用户参数配置的问题后，我们就要处理参数了tab.js
var Tab = function (target) { //如果存在用户的参数 if(this.getConfig()){ $.extend(this.config,this.getConfig()) } }这里用到$.exten的()方法,如果有用户的配置参数则会追加修改this.config，如果用户没有配置参数，那么程序就会使用我们的默认参数
绑定事件
-
获取具体节点
tab.js / var Tab = function (){}this.tabItems = $(this.target).find(".title ul.tab-list li") this.contentItems = $(this.target).find(".content img") -
为每个Tab标签页绑定节点
tab.js / var Tab = function (){}var config = this.config //绑定鼠标交互事件 if(config.tiggerType==="click"){ this.tabItems.bind("click",function () { //这里的this指向每个每个具体的节点 _this_.changeStyle($(this)) }) } else if(config.tiggerType==="click"||config.tiggerType!=="click"){ this.tabItems.bind("mouseover",function () { _this_.changeStyle($(this)) }) } /* this.tabItems.bind(config.tiggerType,function () { _this_.changeStyle($(this)) })*/1、在config配置里获取到鼠标交互的方式，我在这里写了'click'和'mouseover'两种，并且考虑到用户配置参数时可能会写错所以在else if 判定了一下，如果用户写错了那么默认的交互方式是mouseover
2、当然也可以向我下面注释的那样直接绑定参数里的方法,然后你们可以自己加一些错误提示什么的
3、在绑定了交互方式后调用改变Tab 样式的函数changeStyle()
改变tab标签页样式
我们给每个Tab节点绑定了交互事件，在事件触发后就调用changeStyle()函数来该变Tab标签的样式
-
该变tab选中的样式
tab.js / Tab.prototype={}
changeStyle:function (currentTab) { var index = currentTab.index() currentTab.addClass('select').siblings().removeClass('select') //切换效果 if(this.config.effect === "fade"){ this.contentItems.eq(index).fadeIn().siblings().fadeOut() }else{ this.contentItems.eq(index).addClass('current').siblings().removeClass('current') } }1、我们在调用的时候将目标节点传参传进来了
2、index()方法获取当前索引，用与匹配下面的content内容区
3、去配置参数里找有没有配置切换效果，这里我只配置看一种淡入淡出效果，如果有的话则淡入淡出的切换，如果没有配置切换方式，那么就是默认参数null则直接切换无效果
4、在给标签页addClss()添加选中状态的同时，要将其它非选中状态标签页的样式清除
默认显示的标签页
-
配置组件初始化时默认显示的标签页
tab.js / var Tab = function (){}//默认显示的Tab if(config.default<=this.tabItems.length){ this.changeStyle(this.tabItems.eq(config.default-1)) } else { console.log("default 参数配置错误") }拿到参数里的default之后走一遍changeStyle()流程这样就完成了默认标签页的设置
这里要注意的就是因为数组是从0开始的，但我们的习惯是从1开始，配置的时候想要第几个标签页默认显示就用第几个，所以实际上这里选中标签页时要将default-1
自动切换功能
我在配置参数里有写，auto这个参数，本来是想写自动切换这个功能的，但因为我在之前写面向对象Tab标签页时已经写过了，这里写的有点烦就不写了，无非就是加个定时器
注册为jquery方法
终于走到了最后一步，将我们写的构造函数注册为jquery方法
之前我们使用方法是new 一个新对象
tab.js / var Tab = function (){}
$.fn.extend({
tab:function () {
return new Tab(this)
}
})这样子注册一下，我们就可以按照jquery的方法去操作这个组件了
index.html
<script>
$(function () {
$('#box1').tab()
$('#box2').tab()
})
</script>
