jQuery EasyUI 佈局插件 - Panel 面板

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.panel.defaults 重寫默認的 defaults。

面板（panel）當做其他內容的容器使用。它是創建其他組件（比如：Layout 佈局、Tabs 標籤頁/選項卡、Accordion 折疊面板，等等）的基礎組件。它也提供內置的可折疊、可關閉、可最大化、可最小化的行為以及其他自定義行為。面板（panel）可以簡單地嵌入到網頁的任何位置。

用法

創建面板（Panel）

1、通過標記創建面板（Panel）

從標記創建面板（Panel）更容易。把 'easyui-panel' class 添加到 <div> 標記。

<div id="p" class="easyui-panel" title="My Panel"
    style="width:500px;height:150px;padding:10px;background:#fafafa;"
    data-options="iconCls:'icon-save',closable:true,
    collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

2、編程創建面板（Panel）

讓我們創建帶右上角工具欄的面板（Panel）。

<div id="p" style="padding:10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
$('#p').panel({
    width:500,
    height:150,
    title:'My Panel',
    tools:[{
    iconCls:'icon-add',
    handler:function(){alert('new')}
    },{
    iconCls:'icon-save',
    handler:function(){alert('save')}
    }]
});

移動面板（Panel）

調用 'move' 方法把面板（Panel）移動到新位置。

$('#p').panel('move',{
    left:100,
    top:100
});

加載內容

讓我們通過 ajax 加載面板（panel）內容並且當加載成功時顯示一些資訊。

$('#p').panel({
    href:'content_url.php',
    onLoad:function(){
        alert('loaded successfully');
    }
});

屬性

名稱 類型 描述 默認值
id string 面板（panel）的 id 屬性。 null
title string 顯示在面板（panel）頭部的標題文字。 null
iconCls string 在面板（panel）裏顯示一個 16x16 圖示的 CSS class。 null
width number 設置面板（panel）的寬度。 auto
height number 設置面板（panel）的高度。 auto
left number 設置面板（panel）的左邊位置。 null
top number 設置面板（panel）的頂部位置。 null
cls string 給面板（panel）添加一個 CSS class。 null
headerCls string 給面板（panel）頭部添加一個 CSS class。 null
bodyCls string 給面板（panel）主體添加一個 CSS class。 null
style object 給面板（panel）添加自定義格式的樣式。
改變面板（panel）邊框寬度的代碼實例： 
<div class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</div>
{}
fit boolean 當設置為 true 時，面板（panel）的尺寸就適應它的父容器。下麵的實例演示了自動調整尺寸到它的父容器的最大內部尺寸的面板（panel）。 
<div style="width:200px;height:100px;padding:5px">
    <div class="easyui-panel" style="width:200px;height:100px"
            data-options="fit:true,border:false">
        Embedded Panel
    </div>
</div>
false
border boolean 定義了是否顯示面板（panel）的邊框。 true
doSize boolean 如果設置為 true，創建時面板（panel）就調整尺寸並做成佈局。 true
noheader boolean 如果設置為 true，面板（panel）的頭部將不會被創建。 false
content string 面板（panel）主體內容。 null
collapsible boolean 定義是否顯示折疊按鈕。 false
minimizable boolean 定義是否顯示最小化按鈕。 false
maximizable boolean 定義是否顯示最大化按鈕。 false
closable boolean 定義是否顯示關閉按鈕。 false
tools array,selector 自定義工具組，可能的值：
1、數組，每個元素包含 iconCls 和 handler 兩個屬性。
2、選擇器，指示工具組。

面板（panel）工具組可通過已存在 <div> 標籤聲明： 
<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
    <a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
面板（panel）工具組可通過數組定義： 
<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },{
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }]">
</div>
[]
collapsed boolean 定義初始化面板（panel）是不是折疊的。 false
minimized boolean 定義初始化面板（panel）是不是最小化的。 false
maximized boolean 定義初始化面板（panel）是不是最大化的。 false
closed boolean 定義初始化面板（panel）是不是關閉的。 false
href string 一個 URL，用它加載遠程數據並且顯示在面板（panel）裏。請注意，除非面板（panel）打開，否則內容不會被加載。這對創建一個惰性加載的面板（panel）很有用： 
<div id="pp" class="easyui-panel" style="width:300px;height:200px"
        data-options="href='get_content.php',closed:true">
</div>
<a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>
null
cache boolean 設置為 true 就緩存從 href 加載的面板（panel）內容。 true
loadingMessage string 當加載遠程數據時在面板（panel）裏顯示一條資訊。 Loading…
extractor function 定義如何從 ajax 回應中提取內容，返回提取的數據。 
extractor: function(data){
    var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
    var matches = pattern.exec(data);
    if (matches){
        return matches[1];    // only extract body content
    } else {
        return data;
    }
}

事件

名稱 參數 描述
onLoad none 當遠程數據被加載時觸發。
onBeforeOpen none 面板（panel）打開前觸發，返回 false 就停止打開。
onOpen none 面板（panel）打開後觸發。
onBeforeClose none 面板（panel）關閉前觸發，返回 false 就取消關閉。下麵聲明的面板（panel）不會關閉。 
<div class="easyui-panel" style="width:300px;height:200px;"
        title="My Panel" data-options="onBeforeClose:function(){return false}">
    The panel cannot be closed.
</div>
onClose none 面板（panel）關閉後觸發。
onBeforeDestroy none 面板（panel）銷毀前觸發，返回false就取消銷毀。
onDestroy none 面板（panel）銷毀後觸發。
onBeforeCollapse none 面板（panel）折疊前觸發，返回false就停止折疊。
onCollapse none 面板（panel）折疊後觸發。
onBeforeExpand none 面板（panel）展開前觸發，返回false就停止展開。
onExpand none 面板（panel）展開後觸發。
onResize width, height 面板（panel）調整尺寸後觸發。
width：新的外部寬度
height：新的外部高度
onMove left,top 面板（panel）移動後觸發。
left：新的左邊位置
top：新的頂部位置
onMaximize none 窗口最大化後觸發。
onRestore none 窗口還原為它的原始尺寸後觸發。
onMinimize none 窗口最小化後觸發。

方法

名稱 參數 描述
options none 返回選項（options）屬性（property）。
panel none 返回外部面板（panel）對象。
header none 返回面板（panel）頭部對象。
body none 返回面板（panel）主體對象。
setTitle title 設置頭部的標題文本。
open forceOpen 當 forceOpen 參數設置為 true 時，就繞過 onBeforeOpen 回調函數打開面板（panel）。
close forceClose 當 forceClose 參數設置為 true 時，就繞過 onBeforeClose 回調函數關閉面板（panel）。
destroy forceDestroy 當 forceDestroy 參數設置為 true 時，就繞過 onBeforeDestroy 回調函數銷毀面板（panel）。
refresh href 刷新面板（panel）加載遠程數據。如果分配了 'href' 參數，將重寫舊的 'href' 屬性。
代碼實例： 
// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
resize options 設置面板（panel）尺寸並做佈局。Options 對象包含下列屬性：
width：新的面板（panel）寬度
height：新的面板（panel）寬度
left：新的面板（panel）左邊位置
top：新的面板（panel）頂部位置

代碼實例： 
$('#pp').panel('resize',{
    width: 600,
    height: 400
});
move options 移動面板（panel）到新位置。Options 對象包含下列屬性：
left：新的面板（panel）左邊位置
top：新的面板（panel）頂部位置
maximize none 面板（panel）適應它的容器的尺寸。
minimize none 最小化面板（panel）。
restore none 把最大化的面板（panel）還原為它原來的尺寸和位置。
collapse animate 折疊面板（panel）主體。
expand animate 展開面板（panel）主體。
jQuery EasyUI 插件 jQuery EasyUI 插件