亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript插件化開發(fā)教程 （三）

 更新時間：2015年01月27日 14:58:36   投稿：hebedich  
前面我們學(xué)習(xí)了jQuery的方式開發(fā)插件，講訴的都是些基礎(chǔ)的理論知識，今天開始，我們就來實戰(zhàn)一下，學(xué)習(xí)開發(fā)自己的插件庫。

一，開篇分析

前面兩篇文章我們主要講述了以“jQuery的方式如何開發(fā)插件”，以及過程化設(shè)計與面向?qū)ο笏枷朐O(shè)計相結(jié)合的方式是

如何設(shè)計一個插件的，兩種方式各有利弊取長補(bǔ)短，本系列文章是以學(xué)習(xí)為導(dǎo)向的，具體場景大家自己定奪使用方式。那么今天從這篇文章開始，我們就以實例的方式帶著大家由淺入深的開發(fā)屬于自己的插件庫。嘿嘿嘿，廢話少說，進(jìn)入正題。直接上實際效果圖：

　　大家看到了吧，這是一個選項卡插件，在我們?nèi)粘Ｗ瞿欠N單頁應(yīng)用（"SPA"）的時候或許會接觸到，就拿今天的例子來說吧，

我們做一個基于BS結(jié)構(gòu)的系統(tǒng)，會有若干模塊組成，它們是構(gòu)建系統(tǒng)的全部組成，通過這個插件我們可以有效地管理我們模塊

的體驗形式以及用戶可交互性，下面就具體分析一下吧。

（二），實例分析

　　（1），首先確定這個插件做什么事。下面看一下插件的調(diào)用方式，以及配置參數(shù)說明。如下代碼：

復(fù)制代碼 代碼如下:

 bigbear.ui.createTab($("#tab"),{
     buttonText : "添加模塊" ,
     result : [
         {
             text : "向?qū)崾? ,
             url : "help.html" ,
             showClose : "0" ,
             status : "1"
         } ,
         {
             text : "學(xué)生信息" ,
             url : "info.html" ,
             showClose : "1" ,
             status : "1"
         } ,
         {
             text : "學(xué)生分類" ,
             url : "category.html" ,
             showClose : "1" ,
             status : "1"
         } ,
         {
             text : "大熊君{{bb}}" ,
             url : "bb.html" ,
             showClose : "1" ,
             status : "1"
         } ,
         {
             text : "Beta測試模塊" ,
             url : "test.html" ,
             showClose : "1" ,
             status : "1"
         }
     ]
 }) ;

“bigbear.ui.createTab”里面包含兩個參數(shù)，第一個是dom節(jié)點對象，第二個是插件參數(shù)選項，"buttonText "代表“Tab“插件中，操作按鈕的文字描述。

”result“是一個數(shù)組，里面包含的是選項卡項目的屬性，包括文字描述，點擊選項卡項目時做請求使用的url，”showClose“代表選項卡的選項是否顯示關(guān)閉按鈕。

”status“代表選項的狀態(tài)，默認(rèn)為打開狀態(tài)，可能會有關(guān)閉狀態(tài)，分別表示為：1-打開，0-關(guān)閉。

（2），所涉的功能有哪些

通過可選參數(shù)，動態(tài)生成相關(guān)選項條目，如下來個例子：

復(fù)制代碼 代碼如下:

bigbear.ui.createTab($("#tab"),{
    buttonText : "添加模塊" ,
    result : [
        {
            text : "jQuery源碼分析" ,
            url : "help.html" ,
            showClose : "0" ,
            status : "1"
        } ,
        {
            text : "大熊君{{bb}}}" ,
            url : "bb.html" ,
            showClose : "1" ,
            status : "1"
        }
    ]
}) ;

效果如下所示：

可自由添加以及刪除條目選項，如下效果所示：

上圖為其中一種情況，無模塊的時候，會提示信息。

這是第二種情況，之前刪除的可以恢復(fù)。

（三），完整代碼以供學(xué)習(xí)，本代碼已經(jīng)過測試，包括目錄結(jié)構(gòu)以及相關(guān)的文件。

　?。?），html

復(fù)制代碼 代碼如下:

<body>
        <div class="dxj-ui-hd">
            大熊君{{bb}} - DXJ UI ------ Tab
        </div>
        <div class="dxj-ui-bd">
            <div id="tab">
                <div class="title">
                    <div class="adder">
                        + 添加學(xué)生信息
                    </div>
                    <div class="items">
                        <!--<div><span class="del">X</span>歡迎頁</div>
                        <div><span class="del">X</span>用戶管理</div>
                        <div><span class="del">X</span>Bigbear</div>-->
                    </div>
                </div>
                <div class="console-panel">
                </div>
                <div class="content">
                    <!--<div class="c">
                        <div class="input-content"><span>姓名：</span><input type="text" /></div>
                        <div class="input-content"><span>備注：</span><textarea></textarea></div>
                    </div>    <div class="input-content"><input type="button" value="保存" /></div>
                    -->
                </div>
            </div>
        </div>
    </body>

（2），css文件代碼

復(fù)制代碼 代碼如下:

.dxj-ui-hd {
    padding:0px ;
    margin : 0 auto;
    margin-top:30px;
    width:780px;
    height:60px;
    line-height: 60px;
    background: #3385ff;
    color:#fff;
    font-family: "微軟雅黑" ;
    font-size: 28px;
    text-align: center;
    font-weight:bold;
}
.dxj-ui-bd {
    padding:0px ;
    margin : 0 auto;
    width:778px;
    padding-top : 30px ;
    padding-bottom : 30px ;
    overflow: hidden;
    border:1px solid #3385ff;
}
.dxj-ui-bd #tab {
    padding:0px ;
    margin : 0 auto;
    width:720px;
    overflow: hidden;
}
.dxj-ui-bd #tab .title {
    width:720px;
    overflow: hidden;
    border-bottom:2px solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
    width:160px;
    height:32px;
    line-height: 32px;
    background: #DC143C;
    color:#fff;
    font-family: "微軟雅黑" ;
    font-size: 14px;
    text-align: center;
    font-weight:bold;
    float : left;
    cursor:pointer;
}
.dxj-ui-bd #tab .title .items {
    height:32px;
    margin-left:20px;
    width:540px;
    overflow: hidden;
    float : left;
}
.dxj-ui-bd #tab .title .items div {
    padding:0px;
    margin-left:10px;
    width:96px;
    height:32px;
    line-height: 32px;
    background: #3385ff;
    color:#fff;
    font-family: arial ;
    font-size: 12px;
    text-align: center;
    position:relative;
    float : left;
    cursor:pointer;
}
.dxj-ui-bd #tab .title .items div span.del {
    width:16px;
    height:16px;
    line-height: 16px;
    display:block;
    background: #DC143C;
    position:absolute;
    right:0 ;
    top:0;
    cursor:pointer;
}
.dxj-ui-bd #tab .content {
    width:716px;
    padding-top:30px;
    overflow: hidden;
    border:2px solid #3385ff;
    border-top:0px;
    min-height:130px;
    text-align:center;
}
.dxj-ui-bd #tab .content table {
    margin : 0 auto ;
}
.dxj-ui-bd #tab .content div.c {
    padding-top : 20px ;
    padding-left:20px;
    background:#eee;
    height:140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
    margin-top : 10px ;
    font-family: arial ;
    font-size: 12px;
}
.dxj-ui-bd #tab .console-panel {
    width:716px;
    padding-top:20px;
    padding-bottom:20px;
    overflow: hidden;
    border:2px solid #3385ff;
    border-top:0px;
    border-bottom:2px solid #3385ff;
    background:#fff;
    display:none;
}
.active {
    font-weight:bold ;
}

（3），Js代碼如下：

復(fù)制代碼 代碼如下:

$(function(){
    bigbear.ui.createTab($("#tab"),{
        buttonText : "添加模塊" ,
        result : [
            {
                text : "向?qū)崾? ,
                url : "help.html" ,
                showClose : "0" ,
                status : "1"
            } ,
            {
                text : "學(xué)生信息" ,
                url : "info.html" ,
                showClose : "1" ,
                status : "1"
            } ,
            {
                text : "學(xué)生分類" ,
                url : "category.html" ,
                showClose : "1" ,
                status : "1"
            } ,
            {
                text : "大熊君{{bb}}" ,
                url : "bb.html" ,
                showClose : "1" ,
                status : "1"
            } ,
            {
                text : "Beta測試模塊" ,
                url : "test.html" ,
                showClose : "1" ,
                status : "1"
            }
        ]
    }) ;
}) ;
(function($){
    var win = window ;
    var bb = win.bigbear = win.bigbear || {
        ui : {}
    } ;
    var ui = bb.ui = {} ;
    var Tab = function(elem,opts){
        this.elem = elem ;
        this.opts = opts ;
    } ;
    var tabProto = Tab.prototype ;
    tabProto._deleteItem = function(item){
        var that = this ;
        this.getElem().find(".title .items div")
        .eq(item["index"])
        .fadeOut(function(){
            that._resetContent() ;
            that._updateStatus(item) ;
            that._triggerItem(item["index"] + 1) ;
            that.getElem().find(".title .adder").trigger("click") ;
        }) ;
    } ;
    tabProto._triggerItem = function(next){
        var nextStatus = this._getStatus(next) ;
        var items = this.getElem().find(".title .items div") ;
        next = items.eq(next) ;
        if(next.size() && "1" == nextStatus){ //后繼dom節(jié)點存在
            next.trigger("click") ;
        }
        else{
            items.eq(0).trigger("click") ;
        }
    } ;
    tabProto._getStatus = function(index){
        var status = "" ;
        $.each(this.getOpts()["result"],function(i,item){
            if(index == item["index"]){
                status += item["status"] ;
                return false ;
            }
        }) ;
        return status ;
    } ;
    tabProto._updateStatus = function(item){
        var status = item["status"] ;
        item["status"] = ("1" == status) ? "0" : "1" ;
    } ;
    tabProto.init = function(){
        var that = this ;
        this.getElem().find(".title .adder")
        .text("+" + this.getOpts()["buttonText"])
        .on("click",function(){
            that._toggleConsolePanel(function(){
                var root = that.getElem().find(".console-panel").empty() ;
                $.each(that.getOpts()["result"],function(i,item){
                    if("0" == item["status"]){
                        var elem = $("<div style='float:left';></div>")
                        .data("item",item)
                        .appendTo(root) ;
                        $("<input type='radio' name='addmod' />").appendTo(elem) ;
                        $("<span></span>").text(item["text"]).appendTo(elem) ;
                    }
                }) ;
                if(root.find("div").size()){
                    $("<input type='button' value='添加模塊' style='margin-left:20px'/>")
                    .on("click",function(){
                        var data = root.find("input[type=radio]:checked").parent().data("item") ;
                        that._updateStatus(data) ;
                        that.getElem().find(".title .items div").eq(data["index"]).fadeIn().trigger("click") ;
                        that.getElem().find(".title .adder").trigger("click") ;
                    })
                    .appendTo(root) ;
                }
                else{
                    root.text("暫無任何可添加的項目！") ;
                }
            }) ;
        }) ;
        $.each(this.getOpts()["result"],function(i,item){
            item["index"] = i ;
            that._render(item) ;
        }) ;
        this.getElem().find(".title .items div")
        .eq(0)
        .trigger("click") ; // 假定是必須有一項，否則插件意義就不大了！
    } ;
    tabProto._toggleConsolePanel = function(callback){
        this.getElem().find(".console-panel").slideToggle(function(){
            $.isFunction(callback) && callback() ;
        }) ;
    } ;
    tabProto._resetContent = function(){
        this.getElem().find(".content").html("") ;
    } ;
    tabProto._setContent = function(html){
        this.getElem().find(".content").html(html) ;
    } ;
    tabProto._getContent = function(url){
        return $.ajax({
            url : url
        }) ;
    } ;
    tabProto._render = function(data){
        var that = this ;
        var item = $("<div></div>")
        .text(data["text"])
        .on("click",function(){
            that._setCurrent(data["index"]) ;
            that._getContent(data["url"]).done(function(result){
                that._setContent(result) ;
            })
            .fail(function(){
                throw new Error("Net Error !") ;
            });
        })
        .appendTo(this.getElem().find(".title .items")) ;
        if("1" == data["showClose"]){
            $("<span class='del'>X</span>")
            .on("click",function(){
                if(win.confirm("是否刪除此項？")){
                    that._deleteItem(data) ;
                    return false ; // 阻止冒泡
                }
            })
            .appendTo(item) ;
        }
    } ;
    tabProto._setCurrent = function(index){
        var items = this.getElem().find(".title .items div").removeClass("active") ;
        items.eq(index).addClass("active") ;
        var contents = this.getElem().find(".content .c").hide() ;
        contents.eq(index).show() ;
    } ;   
    tabProto.getElem = function(){
        return this.elem ;
    } ;
    tabProto.getOpts = function(){
        return this.opts ;
    } ;
    ui.createTab = function(elem,opts){
        var tab = new Tab(elem,opts) ;
        tab.init() ;
        return tab ;
    } ;       
})(jQuery) ;

（四），最后總結(jié)

　?。?），面向?qū)ο蟮乃伎挤绞胶侠矸治龉δ苄枨蟆?/p>

　?。?），以類的方式來組織我們的插件邏輯。

　?。?），不斷重構(gòu)上面的實例，如何進(jìn)行合理的重構(gòu)那？不要設(shè)計過度，要游刃有余，推薦的方式是過程化設(shè)計與面向?qū)ο笏枷朐O(shè)計相結(jié)合。

 　  （4），思考一下上面例子中，選項卡中的選項是否可以獨(dú)立成單獨(dú)的類那？比如“Item”，那么“Tab”類如何修改那？帶著問題去思考吧。。。

以上就是本文的全部內(nèi)容了，后續(xù)我們將繼續(xù)完善此插件，喜歡本文的話，來給點個贊吧。

相關(guān)文章

  • JavaScript?日期和時間的格式化方法

    JavaScript?日期和時間的格式化方法

    這篇文章主要介紹了JavaScript?日期和時間的格式化,JavaScript?中的?Date?對象提供了許多方法和屬性，可以用于處理日期和時間，根據(jù)具體情況選擇適合的方法和技巧，需要的朋友可以參考下
    2023-02-02
  • HTML中的setCapture和releaseCapture使用介紹

    HTML中的setCapture和releaseCapture使用介紹

    setCapture函數(shù)的作用就是將后續(xù)的mouse事件都發(fā)送給這個對象，releaseCapture就是將鼠標(biāo)事件還回去，由 document、window、object之類的自行來處理。這樣就保證了在拖動的過程中，不會由于經(jīng)過了其它的元素而受到干擾
    2012-03-03
  • Event altKey,ctrlKey,shiftKey屬性解析

    Event altKey,ctrlKey,shiftKey屬性解析

    本篇文章主要是對Event altKey,ctrlKey,shiftKey屬性解析了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • 設(shè)為首頁與加入收藏的JS代碼(多瀏覽器支持)

    設(shè)為首頁與加入收藏的JS代碼(多瀏覽器支持)

    由于現(xiàn)在很多瀏覽器版本，那么多瀏覽器兼容的設(shè)為首頁與加入收藏功能代碼，就比較好用，這里簡單的整理下，方便需要的朋友
    2012-12-12
  • weui上傳多圖片,壓縮,base64編碼的示例代碼

    weui上傳多圖片,壓縮,base64編碼的示例代碼

    這篇文章主要介紹了weui上傳多圖片,壓縮,base64編碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-06-06
  • 特殊日期提示功能的實現(xiàn)方法

    特殊日期提示功能的實現(xiàn)方法

    這篇文章主要介紹了特殊日期提示功能的實現(xiàn)方法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-06-06
  • JavaScript中DOM詳解

    JavaScript中DOM詳解

    這篇文章主要介紹了jQuery 中DOM 操作詳解,以及在火狐和IE之間的13點JavaScript差異，需要的朋友可以參考下
    2015-04-04
  • uniapp?h5如何獲取用戶地理位置信息(使用高德地圖)

    uniapp?h5如何獲取用戶地理位置信息(使用高德地圖)

    這篇文章主要給大家介紹了關(guān)于uniapp?h5如何獲取用戶地理位置信息的相關(guān)資料,文中主要使用高德地圖,這里主要講h5實現(xiàn)獲取地理位置信息并定位功能,需要的朋友可以參考下
    2023-08-08
  • 如何實現(xiàn)小程序與小程序之間的跳轉(zhuǎn)

    如何實現(xiàn)小程序與小程序之間的跳轉(zhuǎn)

    這篇文章主要給大家介紹了關(guān)于如何實現(xiàn)小程序與小程序之間的跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11

最新評論