天天看點
傳回

jQuery EasyUI 布局插件 - Panel 面闆

jQuery EasyUI 插件

通過 $.fn.panel.defaults 重寫預設的 defaults。

面闆（panel）當做其他内容的容器使用。它是建立其他元件（比如：Layout 布局、Tabs 标簽頁/頁籤、Accordion 折疊面闆，等等）的基礎元件。它也提供内置的可折疊、可關閉、可最大化、可最小化的行為以及其他自定義行為。面闆（panel）可以簡單地嵌入到網頁的任何位置。

jQuery EasyUI 布局插件 - 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 顯示在面闆（panel）頭部的标題文字。
iconCls 在面闆（panel）裡顯示一個 16x16 圖示的 CSS class。
width number 設定面闆（panel）的寬度。 auto
height 設定面闆（panel）的高度。
left 設定面闆（panel）的左邊位置。
top 設定面闆（panel）的頂部位置。
cls 給面闆（panel）添加一個 CSS class。
headerCls 給面闆（panel）頭部添加一個 CSS class。
bodyCls 給面闆（panel）主體添加一個 CSS class。
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 定義了是否顯示面闆（panel）的邊框。 true
doSize 如果設定為 true，建立時面闆（panel）就調整尺寸并做成布局。
noheader 如果設定為 true，面闆（panel）的頭部将不會被建立。
content 面闆（panel）主體内容。
collapsible 定義是否顯示折疊按鈕。
minimizable 定義是否顯示最小化按鈕。
maximizable 定義是否顯示最大化按鈕。
closable 定義是否顯示關閉按鈕。
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 定義初始化面闆（panel）是不是折疊的。
minimized 定義初始化面闆（panel）是不是最小化的。
maximized 定義初始化面闆（panel）是不是最大化的。
closed 定義初始化面闆（panel）是不是關閉的。
href 一個 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>
cache 設定為 true 就緩存從 href 加載的面闆（panel）内容。
loadingMessage 當加載遠端資料時在面闆（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 面闆（panel）打開前觸發，傳回 false 就停止打開。
onOpen 面闆（panel）打開後觸發。
onBeforeClose 面闆（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 面闆（panel）關閉後觸發。
onBeforeDestroy 面闆（panel）銷毀前觸發，傳回false就取消銷毀。
onDestroy 面闆（panel）銷毀後觸發。
onBeforeCollapse 面闆（panel）折疊前觸發，傳回false就停止折疊。
onCollapse 面闆（panel）折疊後觸發。
onBeforeExpand 面闆（panel）展開前觸發，傳回false就停止展開。
onExpand 面闆（panel）展開後觸發。
onResize width, height

面闆（panel）調整尺寸後觸發。

width：新的外部寬度

height：新的外部高度
onMove left,top

面闆（panel）移動後觸發。

left：新的左邊位置

top：新的頂部位置
onMaximize 視窗最大化後觸發。
onRestore 視窗還原為它的原始尺寸後觸發。
onMinimize 視窗最小化後觸發。

方法

options 傳回選項（options）屬性（property）。
panel 傳回外部面闆（panel）對象。
header 傳回面闆（panel）頭部對象。
body 傳回面闆（panel）主體對象。
setTitle 設定頭部的标題文本。
open forceOpen 當 forceOpen 參數設定為 true 時，就繞過 onBeforeOpen 回調函數打開面闆（panel）。
close forceClose 當 forceClose 參數設定為 true 時，就繞過 onBeforeClose 回調函數關閉面闆（panel）。
destroy forceDestroy 當 forceDestroy 參數設定為 true 時，就繞過 onBeforeDestroy 回調函數銷毀面闆（panel）。
refresh

重新整理面闆（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

設定面闆（panel）尺寸并做布局。Options 對象包含下列屬性：

width：新的面闆（panel）寬度

height：新的面闆（panel）寬度

left：新的面闆（panel）左邊位置

top：新的面闆（panel）頂部位置

$('#pp').panel('resize',{
    width: 600,
    height: 400
});
move 移動面闆（panel）到新位置。Options 對象包含下列屬性：
maximize 面闆（panel）适應它的容器的尺寸。
minimize 最小化面闆（panel）。
restore 把最大化的面闆（panel）還原為它原來的尺寸和位置。
collapse animate 折疊面闆（panel）主體。
expand 展開面闆（panel）主體。
上一篇: Swift裡的類繼承，構造和析構代碼
下一篇: Accord.NET重新開機4.0 開發