js学习总结_选项卡封装(实例讲解)

 
 
 
页卡一
页卡二
页卡三
 
1
2
3
4
内容二
内容三

 //实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样 ~function(){ /* tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现 param：container当前要实现选项卡的这个容器 defaultIndex:默认选中项的索引 */ function tabChange(container,defaultIndex){ var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst); var divList = utils.children(container,"div"); //让defaultIndex对应的页卡有选中的样式 defaultIndex = defaultIndex || 0; utils.addClass(oLis[defaultIndex],"select"); utils.addClass(divList[defaultIndex],"select"); //具体的切换功能 for(var i = 0;i

 //实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样 ~function(){ /* tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现 param：container当前要实现选项卡的这个容器 defaultIndex:默认选中项的索引 */ function tabChange(container,defaultIndex){ var tabFirst = utils.firstChild(container),oLis = utils.children(tabFirst); var divList = utils.children(container,"div"); //让defaultIndex对应的页卡有选中的样式 defaultIndex = defaultIndex || 0; utils.addClass(oLis[defaultIndex],"select"); utils.addClass(divList[defaultIndex],"select"); //具体的切换功能 //使用事件委托优化 tabFirst.onclick = function(e){ e = e || window.event; e.target = e.target || e.srcElement; if(e.target.tagName.toLowercase()==="li"){//说明当前点击的是li标签 detailFn.call(e.target,oLis,divList); } } } function detailFn(oLis,divList){ var index = utils.index(this); utils.addClass(this,"select"); for(var i = 0;i

 //实现一个选项卡封装：我们可以分析出，只要多个选项卡的主体结构一样，那么每个实现的思想都是一样的，唯一不一样的就是最外层的盒子不一样 ~function(){ /* tabChange:封装一个选项卡的插件，只要大结构保持统一，以后实现选项卡的功能，只需要调取这个方法执行即可实现 param：container当前要实现选项卡的这个容器 defaultIndex:默认选中项的索引 */ function TabChange(container,defaultIndex){ this.init(container,defaultIndex); } TabChange.prototype = { constructor:TabChange,//注意重写原型方法，需要重新指定构造器 //初始化 ，也是当前插件的唯一入口 init:function(container,defaultIndex){ this.container = container || null; this.defaultIndex = defaultIndex || 0; this.tabFirst = utils.firstChild(this.container); this.oLis = utils.children(this.tabFirst); this.divList = utils.children(this.container,"div"); this.defaultIndexEven(); this.liveClick(); return this; }, //事件委托实现绑定切换 liveClick:function(){ var _this = this; this.tabFirst.onclick = function(e){ e = e || window.event; e.target = e.target || e.srcElement; if(e.target.tagName.toLowercase()==="li"){//说明当前点击的是li标签 _this.detailFn(e.target); } } }, detailFn:function(curEle){ var index = utils.index(curEle); utils.addClass(curEle,"select"); for(var i = 0;i