jQuery EasyUI 教學-Panel（面板）

<br/>

從現在開始，要跟大家開始講解jQuery EasyUI 教學-Layout（版面）中的第一小節內容：jQuery-panel(面板)元件，這款元件跟前面幾篇文章的元件用法幾乎都差不多，也是從設定一些面板屬性、操作面板觸發的事件以及方法來實現案例列的，我們可針對這三個點去學習。

使用$.fn.panel.defaults重寫預設值物件。

面板作為承載其它內容的容器。這是建構其他元件的基礎（例如：layout,tabs,accordion等）。它還提供了折疊、關閉、最大化、最小化和自訂行為。面板可以輕鬆嵌入到web頁面的任何位置。

使用案例：

創建面板

前端開發工作中會透過標籤和程序兩種方法來建立面板。

1、透過標籤建立面板

透過標籤建立更簡單。將’easyui-panel’類ID到

標籤。

<p 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>
</p>

2. 建立面板程式

讓我們建立面板右上角的的工具列。

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

移動面板

呼叫‘move’方法移動面板到新的位置。

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

讀取內容

當載入成功的時候讓我們透過ajax載入面板內容並顯示一些訊息。

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

屬性：

属性名	属性值类型	描述
id	string	面板的ID属性。
title	string	在面板头部显示的标题文本。
iconCls	string	设置一个16×16图标的CSS类ID显示在面板左上角。
width	number	设置面板宽度。
height	number	设置面板高度。
left	number	设置面板距离左边的位置（即X轴位置）
top	number	设置面板距离顶部的位置（即Y轴位置）
cls	string	添加一个CSS类ID到面板
headerCls	string	添加一个CSS类ID到面板头部
bodyCls	string	添加一个CSS类ID到面板正文部分
style	object	添加一个当前指定样式到面板。如下代码示例更改面板边框宽度： <p class="easyui-panel" style="width:200px;height:100px" data-options="style:{borderWidth:2}"> </p>
fit	boolean	当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板；可以自动在父容器的最大范围内调整大小。 <p style="width:200px;height:100px;padding:5px"> <p class="easyui-panel" style="width:200px;height:100px" data-options="fit:true,border:false"> Embedded Panel </p> </p>
border	boolean	定义是否显示面板边框。
doSize	boolean	如果设置为true，在面板被创建的时候将重置大小和重新布局。
noheader	boolean	如果设置为true，那么将不会创建面板标题
content	string	面板主体内容
collapsible	boolean	定义是否显示可折叠按钮。
minimizable	boolean	定义是否显示最小化按钮。
maximizable	boolean	定义是否显示最大化按钮。
closable	boolean	定义是否显示关闭按钮。
tools	array,selector	自定义工具菜单，可用值： 1) 数组，每个元素都包含’iconCls’和’handler’属性。 2) 指向工具菜单的选择器。 面板工具菜单可以声明在已经存在的 标签上： <p class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options ="iconCls:&#39;icon-ok&#39;,tools:&#39;#tt&#39;"> </p> <p id="tt"> <a href="#" class="icon-add" onclick ="javascript:alert(&#39;add&#39;)"></a> <a href="#" class="icon-edit" onclick ="javascript:alert(&#39;edit&#39;)"></a> </p> 面板工具菜单也可以通过数组定义： <p class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:&#39;icon-ok&#39;,tools:[ { iconCls:&#39;icon-add&#39;, handler:function(){alert(&#39;add&#39;)} },{ iconCls:&#39;icon-edit&#39;, handler:function(){alert(&#39;edit&#39;)} }]"> </p>
collapsed	boolean	定义是否在初始化的时候折叠面板。
minimized	boolean	定义是否在初始化的时候最小化面板。
maximized	boolean	定义是否在初始化的时候最大化面板。
closed	boolean	定义是否在初始化的时候关闭面板。
href	string	从URL读取远程数据并且显示到面板。注意：内容将不会被载入，直到面板打开或扩大，在创建延迟加载面板时是非常有用的： <p id="pp" class="easyui-panel" style ="width:300px;height:200px" data-options="href=&#39;get_content.php&#39;,closed:true"> </p> <a href="#" onclick ="javascript:$(&#39;#pp&#39;).panel(&#39;open&#39;)">Open</a>
cache	boolean	如果为true，在超链接载入时缓存面板内容
loadingMessage	string	在加载远程数据的时候在面板内显示一条消息
extractor	function	定义如何从ajax应答数据中提取内容，返回提取数据。 xtractor: function(data){ var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var matches = pattern.exec(data); if (matches){ return matches[1]; // 仅提取主体内容 } else { return data; } }
method	string	使用HTTP的哪一种方法读取内容页。可用值：’get’,’post’。（该属性自1.3.6版开始可用）
queryParams	object	在加载内容页的时候添加的请求参数。（该属性自1.3.6版开始可用）
loader	function	定义了如何从远程服务器加载内容页，该函数接受以下参数： param：参数对象发送给远程服务器。 success(data)：在检索数据成功的时候调用的回调函数。 error()：在检索数据失败的时候调用的回调函数。 （该属性自1.3.6版开始可用）

事件：

onMinimizenone在視窗最小化之後觸發。

 方法：

事件名	事件参数	描述
onBeforeLoad	none	在加载内容页之前触发，返回false将忽略该动作。（该事件自1.3.6版开始可用）
onLoad	none	在加载远程数据时触发
onLoadError	none	在加载内容页发生错误时触发。（该事件自1.3.6版开始可用）
onBeforeOpen	none	在打开面板之前触发，返回false可以取消打开操作
onOpen	none	在打开面板之后触发
onBeforeClose	none	在关闭面板之前触发，返回false可以取消关闭操作。下列的面板将不能关闭。 <p class="easyui-panel" style="width:300px;height:200px;" title="My Panel" data-options ="onBeforeClose:function(){return false}"> 面板将不能关闭 </p>
onClose	none	在面板关闭之后触发。
onBeforeDestroy	none	在面板销毁之前触发，返回false可以取消销毁操作
onDestroy	none	在面板销毁之后触发
onBeforeCollapse	none	在面板折叠之前触发，返回false可以终止折叠操作。
onCollapse	none	在面板折叠之后触发
onBeforeExpand	none	在面板展开之前触发，返回false可以终止展开操作。
onExpand	none	在面板展开之后触发
onResize	width, height	在面板改变大小之后触发。 width：新的宽度。 height：新的高度。
onMove	left,top	在面板移動之後觸發。 left：新的左邊距位置。 top：新的上邊距位置
onMaximize	none	在視窗最大化之後觸發
onRestore

方法名	方法参数	描述
options	none	返回属性对象。
panel	none	返回面板对象。
header	none	返回面板头对象。
body	none	返回面板主体对象。
setTitle	title	设置面板头的标题文本。
open	forceOpen	在’forceOpen’参数设置为true的时候，打开面板时将跳过’onBeforeOpen’回调函数。
close	forceClose	在’forceClose’参数设置为true的时候，关闭面板时将跳过’onBeforeClose’回调函数。
destroy	forceDestroy	在’forceDestroy’参数设置为true的时候，销毁面板时将跳过’onBeforeDestory’回调函数。
refresh	href	刷新面板来装载远程数据。如果’href’属性有了新配置，它将重写旧的’href’属性。代码示例： // 打开面板且刷新其内容。 $('#pp').panel('open').panel('refresh'); // 刷新一个新的URL内容 $('#pp').panel('open').panel('refresh','new_content.php');
resize	options	设置面板大小和布局。参数对象包含下列属性： width：新的面板宽度。 height：新的面板高度。 left：新的面板左边距位置。 top：新的面板上边距位置。代码示例： $('#pp').panel('resize',{ width: 600, height: 400 });
move	options	移动面板到一个新位置。参数对象包含下列属性： left：新的左边距位置。 top：新的上邊距位置。
maximize	options	最大化面板到容器大小。
minimize	none	最小化面板。
restore	none	恢復最大化面板回到原來的大小和位置。
collapse	animate	折疊面板主題。
expand	animate	展開面板主體。

 以上就是jQuery EasyUI 教學-Panel（面板）的內容，更多相關內容請關注PHP中文網（www.php.cn）！

相關文章：

easyui datagrid分頁4、easyUI-七種版面（layout）

初識通用資料庫操作類前端EasyUI中的tree使用指南