大熊君javaScript插件化开发------（实战篇之DXJ UI ------ Tab功能扩展完结版）

一，开篇分析

Hi，大家好！大熊君又和大家见面了，还记得上一篇文章吗。主要讲述了一个“Tab”插件是如何组织代码以及实现的”，以及过程化设计与面向对象思想设计相结合的方式是

如何设计一个插件的，两种方式各有利弊取长补短，本系列文章是以学习为导向的，具体场景大家自己定夺使用方式。在从这篇文章中，我们还是以那个“Tab”实例为主，

继续扩展相关功能。嘿嘿嘿，废话少说，进入正题。直接上实际效果图：

大家看到了吧，增加了一个新的功能，如果我们在初始化时，我们的模块配置信息项目的条目数大于我们指定的，那么就会显示在“更多模块”

操作项的隐藏列表中，我们的初始化参数配置也从新做了调整比如多了一个“displayMax”指定初始化时的条目数，还有一个项目属性，“status”

在初始化时也去掉了不需要配置了，在程序中动态生成配置，增加了程序的灵活性，下面就具体分析一下吧。

（二），实例分析

（1），首先确定这个插件做什么事。下面看一下插件的调用方式，以及配置参数说明。如下代码：

 1 { 2     buttonText : "添加模块" , 3     result : [  4         { 5             text : "向导提示" , 6             url : "help.html" , 7             showClose : "0" 8         } , 9         {10             text : "学生信息" ,11             url : "info.html" ,12             showClose : "1"13         } ,14         {15             text : "学生分类" ,16             url : "category.html" ,17             showClose : "1"18         } ,19         {20             text : "大熊君{{bb}}" ,21             url : "bb.html" ,22             showClose : "1"23         } ,24         {25             text : "Beta测试模块" ,26             url : "test.html" ,27             showClose : "1"28         } ,29         {30             text : "三胖子" ,31             url : "help.html" ,32             showClose : "1"33         } ,34         {35             text : "四秃子" ,36             url : "help.html" ,37             showClose : "1"38         }39     ] ,40     displayMax : 5 // 最多显示项目41 }    

“bigbear.ui.createTab”里面包含两个参数，第一个是dom节点对象，第二个是插件参数选项，"buttonText "代表“Tab“插件中，操作按钮的文字描述。

”result“是一个数组，里面包含的是选项卡项目的属性，包括文字描述，点击选项卡项目时做请求使用的url，”showClose“代表选项卡的选项是否显示关闭按钮。

“status”在初始化时也去掉了不需要配置了，在程序中动态生成配置。可能会有关闭状态，分别表示为：1-默认显示，0-关闭状态，2-超过默认的条目数。

（2），功能分步骤介绍

1---，通过可选参数，初始化插件：

 1 $(function(){ 2     bigbear.ui.createTab($("#tab"),{ 3         buttonText : "添加模块" , 4         result : [  5             { 6                 text : "向导提示" , 7                 url : "help.html" , 8                 showClose : "0" 9             } ,10             {11                 text : "学生信息" ,12                 url : "info.html" ,13                 showClose : "1"14             } ,15             {16                 text : "学生分类" ,17                 url : "category.html" ,18                 showClose : "1"19             } ,20             {21                 text : "大熊君{{bb}}" ,22                 url : "bb.html" ,23                 showClose : "1"24             } ,25             {26                 text : "Beta测试模块" ,27                 url : "test.html" ,28                 showClose : "1"29             } ,30             {31                 text : "三胖子" ,32                 url : "help.html" ,33                 showClose : "1"34             } ,35             {36                 text : "四秃子" ,37                 url : "help.html" ,38                 showClose : "1"39             }40         ] ,41         displayMax : 5 // 最多显示项目42     }) ;43 }) ;            

2---，渲染并且完成时间绑定以及相关的业务逻辑，比如初始化时条目数量验证。

 1 tabPRoto.init = function(){ 2     if(this._isEmptyResult()){ 3         this._setContent("暂无任何模块!") ; 4     } 5     var that = this ; 6     this.getElem().find(".title .adder") 7     .text("+" + this.getOpts()["buttonText"]) 8     .on("click",function(){ 9         that.getElem().find(".console-panel").slideToggle(function(){10             that._renderConsolePanel("0") ;11         }) ;12     }) ;13     $.each(this.getOpts()["result"],function(i,item){14         if(that._isDisplayMax(i + 1)){15             that._saveOrUpdateStatus(item,"1") ;16         }17         else{18             that._saveOrUpdateStatus(item,"2") ;19         }20         that._render(item) ;21     }) ;22     if(!that._isDisplayMax(this.getOpts()["result"].length)){23         this.getElem().find(".title .more-mod").fadeIn(function(){24             $(this).find(".tag").on("click",function(){25                 var root = $(this).next() ;26                 root.empty() ;27                 $.each(that._getItemListByStatus("2"),function(i,data){28                     $("<div></div>").text(data["text"])29                     .on("click",function(){30                         if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){31                             that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){32                                 that._saveOrUpdateStatus(data,"1") ;33                             }) ;34                         }35                         else{36                             alert("不能添加任何模块，目前已经是最大数量！") ;37                         }38                     })39                     .appendTo(root) ;40                 }) ;41                 root.toggle() ;42             }) ;43             44         });45     }46     this.getElem().find(".title .items div")47     .eq(0)48     .trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！49 } ;

3---，选项卡切换以及数据内容渲染操作。

1 tabProto._setCurrent = function(index){2     var items = this.getElem().find(".title .items div").removeClass("active") ;3     items.eq(index).addClass("active") ;4     var contents = this.getElem().find(".content .c").hide() ;5     contents.eq(index).show() ;6 } ;    

1 item.on("click",function(){2     that._setCurrent($(this).index()) ;3     that._getContent(data["url"]).done(function(result){4         that._setContent(result) ;5     })6     .fail(function(){7         throw new Error("Net Error !") ;8     });9 })

1 tabProto._setContent = function(html){2     this.getElem().find(".content").html(html) ;3 } ;4 tabProto._getContent = function(url){5     return $.Ajax({6         url : url7     }) ;8 } ;

4---，核心的辅助数据操作方法，不涉及dom。

 1 /* update time 2015 1/26 15:36 */  2 tabProto._isDisplayMax = function(size){ 3     var displayMax = this.getOpts()["displayMax"] || 5 ; 4     return (size <= displayMax) ? true : false ; 5 } ; 6 tabProto._isEmptyResult = function(){ 7     if(!this.getOpts()["result"].length){ 8         return false ; 9     }10     return true ;11 } ;12 tabProto._saveOrUpdateStatus = function(item,status){13     item["status"] = status ;14 } ;15 tabProto._getItemListByStatus = function(status){16     var list = [] ;17     var result = this.getOpts()["result"] ;18     $.each(result,function(i,item){19         if(status == item["status"]){20             list.push(item) ;21         }22     }) ;23     return list ;24 } ;25 tabProto._getStatusByIndex = function(index){26     var status = null ;27     var result = this.getOpts()["result"] ;28     $.each(result,function(i,item){29         if(index == item["index"]){30             status = item["status"] ;31         }32     }) ;33     return status ;34 } ;

（三），完整代码以供学习，本代码已经过测试，包括目录结构以及相关的文件。

　1，html

 1 <body> 2     <div class="dxj-ui-hd"> 3         大熊君{{bb}} - DXJ UI ------ Tab 4     </div> 5     <div class="dxj-ui-bd"> 6         <div id="tab"> 7             <div class="title"> 8                 <div class="adder"> 9                     + 添加学生信息10                 </div>11                 <div class="items">12                     <!--<div><span class="del">X</span>欢迎页</div>13                     <div><span class="del">X</span>用户管理</div>14                     <div><span class="del">X</span>Bigbear</div>-->15                 </div>16                 <div class="more-mod">17                     <div class="tag">更多模块</div>18                     <div class="mods">19                         20                     </div>21                 </div>22             </div>23             <div