學習 easyui 之三：panel 分析

 在 easyui 中，panel 是很基礎的控件，無論是提示框，還是 DataGrid 都是從 panel 派生出來。因此，研究一下 panel 很有必要。

創建如下一個 panel ，可以使用如下的代碼。

頁面中添加一個 div 標記。

<div id="panel1">
</div>

配套的腳本代碼如下：

var options = {
    title: "我的 Panel",
    top: 400,
    left: 100,
    width: 300,
    height: 200,
    iconCls: 'icon-ok',
    tools: [
        {
            iconCls: 'icon-add',
            handler: function () { alert('add') }
        }, {
            iconCls: 'icon-edit',
            handler: function () { alert('edit') }
        }]

};

$("#panel1").panel(options);

如果你使用 FireBug 查看一下，可以看到生成的 html 如下所示。

<div class="panel" style="display: block; left: 100px; top: 400px; width: 300px;">
    <div class="panel-header" style="width: 288px;">
        <div class="panel-title panel-with-icon">我的 Panel</div>
        <div class="panel-icon icon-ok"></div>
        <div class="panel-tool">
             <a href="javascript:void(0)" class="icon-add"></a>
             <a href="javascript:void(0)" class="icon-edit"></a>
        </div>
    </div>
    <div id="panel1" title="" class="panel-body" style="width: 298px; height: 171px;">
    </div>
</div>

 可以很清楚地看到，panel 由兩大部分組成：header 和 body，我們自己定義的 div 成為了 panel 的 body 部分，同時，還被添加了一些類說明。

那么，panel 是如何實現的呢？

全部的代碼太復雜了，我們在后面詳細說明，這里我們通過 panel 的 title 進行說明。

在 panel 中，首先在 jQuery 提供的原型對象 fn 上添加一個名為 panel 的函數，這是我們使用 panel 的主要入口。

這里使用 jQuery 提供的 data 為我們的 panel 保存了一個名為 panel 的數據對象，這個對象的 options 就是這個 panel 當前的配置參數對象，panel 屬性則表示這個 panel 的 jQuery 對象本身，isLoaded 用來表示這個 panel 是否已經加載完成。

 $.fn.panel = function ( args, para ) {
    options = $.extend({}, $.fn.panel.defaults, $.fn.panel.parseOptions(this), args);
    $(this).attr("title", "");

    // 保存數據
    panelData = $.data(this, "panel", { options: options, panel: createPanel(this), isLoaded: false });
};

然后，在這個 panel 屬性上，通過 defaults 設置了 panel 的眾多屬性的默認值。

$.fn.panel.defaults = {
        id: null,
        title: null,
        ......  
}

通過 methods 定義了 panel 所支持的眾多方法。

$.fn.panel.methods = {
    // 設置 Panel 的標題
    setTitle: function (jqObj, newTitle) {
        return jqObj.each(function () {
            setPanelTitle(this, newTitle);
        });
    },
    ......
}

注意，真正設置 title 的是內部的一個函數 setPanelTitle，這是定義在閉包中的一個函數。

首先，通過 jQuery 提供的 data 函數將原來保存的關於這個 panel 對象的數據取出來，將新設置的標題保存到設置中。

header 方法用來獲取 panel 的標題部分元素，通過重新設置 innerHTML 內容更新標題。

(function ($) {
    // 為 Panel 設置標題
    function setPanelTitle(domElem, newTitle) {
        // 保存 panel 的標題
        $.data(domElem, "panel").options.title = newTitle;
        // 獲取 panel 的標題對象，重新設置標題
        $(domElem).panel("header").find("div.panel-title").html(newTitle);
    };

    ......
})(jQuery);

 在 easyui 中，控件基本按照這個模式進行組織。