jQuery EasyUI 布局插件 – Panel 面板

2018-09-21 10:04 更新

jQuery EasyUI 布局插件 - Panel 面板

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.panel.defaults 重寫默認(rèn)的 defaults。

面板（panel）當(dāng)做其他內(nèi)容的容器使用。它是創(chuàng)建其他組件（比如：Layout 布局、Tabs 標(biāo)簽頁/選項(xiàng)卡、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')}
    }]
});

移動(dòng)面板（Panel）

調(diào)用 'move' 方法把面板（Panel）移動(dòng)到新位置。

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

加載內(nèi)容

讓我們通過 ajax 加載面板（panel）內(nèi)容并且當(dāng)加載成功時(shí)顯示一些信息。

$('#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）里顯示一個(gè) 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）添加一個(gè) CSS class。 null
headerCls string 給面板（panel）頭部添加一個(gè) CSS class。 null
bodyCls string 給面板（panel）主體添加一個(gè) CSS class。 null
style object 給面板（panel）添加自定義格式的樣式。
改變面板（panel）邊框?qū)挾鹊拇a實(shí)例： 
<div class="easyui-panel" style="width:200px;height:100px" 		data-options="style:{borderWidth:2}">
</div>
{}
fit boolean 當(dāng)設(shè)置為 true 時(shí)，面板（panel）的尺寸就適應(yīng)它的父容器。下面的實(shí)例演示了自動(dò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)建時(shí)面板（panel）就調(diào)整尺寸并做成布局。 true
noheader boolean 如果設(shè)置為 true，面板（panel）的頭部將不會(huì)被創(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ù)組，每個(gè)元素包含 iconCls 和 handler 兩個(gè)屬性。
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 一個(gè) URL，用它加載遠(yuǎn)程數(shù)據(jù)并且顯示在面板（panel）里。請(qǐng)注意，除非面板（panel）打開，否則內(nèi)容不會(huì)被加載。這對(duì)創(chuàng)建一個(gè)惰性加載的面板（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ù)時(shí)在面板（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ù)被加載時(shí)觸發(fā)。
onBeforeOpen none 面板（panel）打開前觸發(fā)，返回 false 就停止打開。
onOpen none 面板（panel）打開后觸發(fā)。
onBeforeClose none 面板（panel）關(guān)閉前觸發(fā)，返回 false 就取消關(guān)閉。下面聲明的面板（panel）不會(huì)關(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）移動(dòng)后觸發(fā)。
left：新的左邊位置
top：新的頂部位置
onMaximize none 窗口最大化后觸發(fā)。
onRestore none 窗口還原為它的原始尺寸后觸發(fā)。
onMinimize none 窗口最小化后觸發(fā)。

方法

名稱 參數(shù) 描述
options none 返回選項(xiàng)（options）屬性（property）。
panel none 返回外部面板（panel）對(duì)象。
header none 返回面板（panel）頭部對(duì)象。
body none 返回面板（panel）主體對(duì)象。
setTitle title 設(shè)置頭部的標(biāo)題文本。
open forceOpen 當(dāng) forceOpen 參數(shù)設(shè)置為 true 時(shí)，就繞過 onBeforeOpen 回調(diào)函數(shù)打開面板（panel）。
close forceClose 當(dāng) forceClose 參數(shù)設(shè)置為 true 時(shí)，就繞過 onBeforeClose 回調(diào)函數(shù)關(guān)閉面板（panel）。
destroy forceDestroy 當(dāng) forceDestroy 參數(shù)設(shè)置為 true 時(shí)，就繞過 onBeforeDestroy 回調(diào)函數(shù)銷毀面板（panel）。
refresh href 刷新面板（panel）加載遠(yuǎn)程數(shù)據(jù)。如果分配了 'href' 參數(shù)，將重寫舊的 'href' 屬性。
代碼實(shí)例： 
// 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 對(duì)象包含下列屬性：
width：新的面板（panel）寬度
height：新的面板（panel）寬度
left：新的面板（panel）左邊位置
top：新的面板（panel）頂部位置

代碼實(shí)例： 
$('#pp').panel('resize',{
	width: 600,
	height: 400
});
move options 移動(dòng)面板（panel）到新位置。Options 對(duì)象包含下列屬性：
left：新的面板（panel）左邊位置
top：新的面板（panel）頂部位置
maximize none 面板（panel）適應(yīng)它的容器的尺寸。
minimize none 最小化面板（panel）。
restore none 把最大化的面板（panel）還原為它原來的尺寸和位置。
collapse animate 折疊面板（panel）主體。
expand animate 展開面板（panel）主體。
jQuery EasyUI 插件 jQuery EasyUI 插件
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)