JavaScript插件化开发教程 （四）(2)

$(function(){
    bigbear.ui.createTab($("#tab"),{
        buttonText : "添加模块" ,
        result : [
            {
                text : "向导提示" ,
                url : "help.html" ,
                showClose : "0"
            } ,
            {
                text : "学生信息" ,
                url : "info.html" ,
                showClose : "1"
            } ,
            {
                text : "学生分类" ,
                url : "category.html" ,
                showClose : "1"
            } ,
            {
                text : "大熊君{{bb}}" ,
                url : "bb.html" ,
                showClose : "1"
            } ,
            {
                text : "Beta测试模块" ,
                url : "test.html" ,
                showClose : "1"
            } ,
            {
                text : "三胖子" ,
                url : "help.html" ,
                showClose : "1"
            } ,
            {
                text : "四秃子" ,
                url : "help.html" ,
                showClose : "1"
            }
        ] ,
        displayMax : 5 // 最多显示项目
    }) ;
}) ;           

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

复制代码 代码如下:

tabProto.init = function(){
    if(this._isEmptyResult()){
        this._setContent("暂无任何模块!") ;
    }
    var that = this ;
    this.getElem().find(".title .adder")
    .text("+" + this.getOpts()["buttonText"])
    .on("click",function(){
        that.getElem().find(".console-panel").slideToggle(function(){
            that._renderConsolePanel("0") ;
        }) ;
    }) ;
    $.each(this.getOpts()["result"],function(i,item){
        if(that._isDisplayMax(i + 1)){
            that._saveOrUpdateStatus(item,"1") ;
        }
        else{
            that._saveOrUpdateStatus(item,"2") ;
        }
        that._render(item) ;
    }) ;
    if(!that._isDisplayMax(this.getOpts()["result"].length)){
        this.getElem().find(".title .more-mod").fadeIn(function(){
            $(this).find(".tag").on("click",function(){
                var root = $(this).next() ;
                root.empty() ;
                $.each(that._getItemListByStatus("2"),function(i,data){
                    $("<div></div>").text(data["text"])
                    .on("click",function(){
                        if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
                            that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                                that._saveOrUpdateStatus(data,"1") ;
                            }) ;
                        }
                        else{
                            alert("不能添加任何模块，目前已经是最大数量！") ;
                        }
                    })
                    .appendTo(root) ;
                }) ;
                root.toggle() ;
            }) ;
           
        });
    }
    this.getElem().find(".title .items div")
    .eq(0)
    .trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
} ;

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

复制代码 代码如下: