場景

效果

屬性

名稱類型描述默認(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" οnclick="javascript:alert('add')"></a> <a href="#" class="icon-edit" οnclick="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="#" οnclick="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[^>]*>((.|[ ? ])*)</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）主體。

實現(xiàn)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body><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><div id="p1" class="easyui-panel" title="My Panel"style="width:500px;height:150px;padding:10px;background:#fafafa;"></div> <script type="text/javascript">$('#p1').panel({href:'dynamic.html',onLoad:function(){alert('loaded successfully');}}); </script> </body> </html>

遠(yuǎn)程調(diào)用dynamic.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <h1>遠(yuǎn)程數(shù)據(jù)調(diào)用</h1> </body> </html>

效果

總結(jié)

以上是生活随笔為你收集整理的EasyUI中Panel面板的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。