場景

效果

屬性

名稱類型描述默認值

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

實現

<!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>

遠程調用dynamic.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <h1>遠程數據調用</h1> </body> </html>

效果

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。