免費(fèi)AI編程助手
jQuery EasyUI 布局插件 – Panel 面板
2018-09-21 10:04 更新
jQuery EasyUI 布局插件 - Panel 面板
jQuery EasyUI 插件 通過 $.fn.panel.defaults 重寫默認(rèn)的 defaults。
面板（panel）當(dāng)做其他內(nèi)容的容器使用。它是創(chuàng)建其他組件（比如：Layout 布局、Tabs 標(biāo)簽頁/選項卡、Accordion 折疊面板，等等）的基礎(chǔ)組件。它也提供內(nèi)置的可折疊、可關(guān)閉、可最大化、可最小化的行為以及其他自定義行為。面板（panel）可以簡單地嵌入到網(wǎng)頁的任何位置。
用法
創(chuàng)建面板（Panel）
1、通過標(biāo)記創(chuàng)建面板（Panel）
從標(biāo)記創(chuàng)建面板（Panel）更容易。把 'easyui-panel' class 添加到 <div> 標(biāo)記。
<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、編程創(chuàng)建面板（Panel）
讓我們創(chuàng)建帶右上角工具欄的面板（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）
調(diào)用 'move' 方法把面板（Panel）移動到新位置。
$('#p').panel('move',{
left:100,
top:100
});
加載內(nèi)容
讓我們通過 ajax 加載面板（panel）內(nèi)容并且當(dāng)加載成功時顯示一些信息。
$('#p').panel({
href:'content_url.php',
onLoad:function(){
alert('loaded successfully');
}
});
屬性
| 名稱 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| id | string | 面板（panel）的 id 屬性。 | null |
| title | string | 顯示在面板（panel）頭部的標(biāo)題文字。 | null |
| iconCls | string | 在面板（panel）里顯示一個 16x16 圖標(biāo)的 CSS class。 | null |
| width | number | 設(shè)置面板（panel）的寬度。 | auto |
| height | number | 設(shè)置面板（panel）的高度。 | auto |
| left | number | 設(shè)置面板（panel）的左邊位置。 | null |
| top | number | 設(shè)置面板（panel）的頂部位置。 | null |
| cls | string | 給面板（panel）添加一個 CSS class。 | null |
| headerCls | string | 給面板（panel）頭部添加一個 CSS class。 | null |
| bodyCls | string | 給面板（panel）主體添加一個 CSS class。 | null |
| style | object | 給面板（panel）添加自定義格式的樣式。 改變面板（panel）邊框?qū)挾鹊拇a實例：
<div class="easyui-panel" style="width:200px;height:100px" data-options="style:{borderWidth:2}">
</div>
| {} |
| fit | boolean | 當(dāng)設(shè)置為 true 時，面板（panel）的尺寸就適應(yīng)它的父容器。下面的實例演示了自動調(diào)整尺寸到它的父容器的最大內(nèi)部尺寸的面板（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 | 如果設(shè)置為 true，創(chuàng)建時面板（panel）就調(diào)整尺寸并做成布局。 | true |
| noheader | boolean | 如果設(shè)置為 true，面板（panel）的頭部將不會被創(chuàng)建。 | false |
| content | string | 面板（panel）主體內(nèi)容。 | null |
| collapsible | boolean | 定義是否顯示折疊按鈕。 | false |
| minimizable | boolean | 定義是否顯示最小化按鈕。 | false |
| maximizable | boolean | 定義是否顯示最大化按鈕。 | false |
| closable | boolean | 定義是否顯示關(guān)閉按鈕。 | false |
| tools | array,selector | 自定義工具組，可能的值： 1、數(shù)組，每個元素包含 iconCls 和 handler 兩個屬性。 2、選擇器，指示工具組。 面板（panel）工具組可通過已存在 <div> 標(biāo)簽聲明：
<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）工具組可通過數(shù)組定義：
<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）是不是關(guān)閉的。 | false |
| href | string | 一個 URL，用它加載遠(yuǎn)程數(shù)據(jù)并且顯示在面板（panel）里。請注意，除非面板（panel）打開，否則內(nèi)容不會被加載。這對創(chuàng)建一個惰性加載的面板（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 | 設(shè)置為 true 就緩存從 href 加載的面板（panel）內(nèi)容。 | true |
| loadingMessage | string | 當(dāng)加載遠(yuǎn)程數(shù)據(jù)時在面板（panel）里顯示一條信息。 | Loading… |
| extractor | function | 定義如何從 ajax 響應(yīng)中提取內(nèi)容，返回提取的數(shù)據(jù)。
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;
}
}
|
事件
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| onLoad | none | 當(dāng)遠(yuǎn)程數(shù)據(jù)被加載時觸發(fā)。 |
| onBeforeOpen | none | 面板（panel）打開前觸發(fā)，返回 false 就停止打開。 |
| onOpen | none | 面板（panel）打開后觸發(fā)。 |
| onBeforeClose | none | 面板（panel）關(guān)閉前觸發(fā)，返回 false 就取消關(guān)閉。下面聲明的面板（panel）不會關(guān)閉。
<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）關(guān)閉后觸發(fā)。 |
| onBeforeDestroy | none | 面板（panel）銷毀前觸發(fā)，返回false就取消銷毀。 |
| onDestroy | none | 面板（panel）銷毀后觸發(fā)。 |
| onBeforeCollapse | none | 面板（panel）折疊前觸發(fā)，返回false就停止折疊。 |
| onCollapse | none | 面板（panel）折疊后觸發(fā)。 |
| onBeforeExpand | none | 面板（panel）展開前觸發(fā)，返回false就停止展開。 |
| onExpand | none | 面板（panel）展開后觸發(fā)。 |
| onResize | width, height | 面板（panel）調(diào)整尺寸后觸發(fā)。 width：新的外部寬度 height：新的外部高度 |
| onMove | left,top | 面板（panel）移動后觸發(fā)。 left：新的左邊位置 top：新的頂部位置 |
| onMaximize | none | 窗口最大化后觸發(fā)。 |
| onRestore | none | 窗口還原為它的原始尺寸后觸發(fā)。 |
| onMinimize | none | 窗口最小化后觸發(fā)。 |
方法
| 名稱 | 參數(shù) | 描述 |
|---|---|---|
| options | none | 返回選項（options）屬性（property）。 |
| panel | none | 返回外部面板（panel）對象。 |
| header | none | 返回面板（panel）頭部對象。 |
| body | none | 返回面板（panel）主體對象。 |
| setTitle | title | 設(shè)置頭部的標(biāo)題文本。 |
| open | forceOpen | 當(dāng) forceOpen 參數(shù)設(shè)置為 true 時，就繞過 onBeforeOpen 回調(diào)函數(shù)打開面板（panel）。 |
| close | forceClose | 當(dāng) forceClose 參數(shù)設(shè)置為 true 時，就繞過 onBeforeClose 回調(diào)函數(shù)關(guān)閉面板（panel）。 |
| destroy | forceDestroy | 當(dāng) forceDestroy 參數(shù)設(shè)置為 true 時，就繞過 onBeforeDestroy 回調(diào)函數(shù)銷毀面板（panel）。 |
| refresh | href | 刷新面板（panel）加載遠(yuǎn)程數(shù)據(jù)。如果分配了 'href' 參數(shù)，將重寫舊的 '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 | 設(shè)置面板（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）適應(yīng)它的容器的尺寸。 |
| minimize | none | 最小化面板（panel）。 |
| restore | none | 把最大化的面板（panel）還原為它原來的尺寸和位置。 |
| collapse | animate | 折疊面板（panel）主體。 |
| expand | animate | 展開面板（panel）主體。 |
jQuery EasyUI 插件 以上內(nèi)容是否對您有幫助：
更多建議：