jQuery EasyUI API 中文文檔 - Panel面板
用$.fn.panel.defaults重寫defaults。
用法示例
創(chuàng)建Panel
1. 經(jīng)由標(biāo)記創(chuàng)建Panel
從標(biāo)記創(chuàng)建Panel更容易。把 'easyui-panel' 類添加到<div/>標(biāo)記。
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"
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)容
讓我們經(jīng)由ajax加載panel內(nèi)容并且當(dāng)加載成功時(shí)顯示一些信息。
$('#p').panel({
href:'content_url.php',
onLoad:function(){
alert('loaded successfully');
}
});
特性
名稱 |
類型 |
說明 |
默認(rèn)值 |
title |
string |
顯示在Panel頭部的標(biāo)題文字。 |
null |
iconCls |
string |
在Panel里顯示一個(gè)16x16圖標(biāo)的CSS類。 |
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類。 |
null |
headerCls |
string |
給Panel頭部增加一個(gè)CSS類。 |
null |
bodyCls |
string |
給Panel身體增加一個(gè)CSS類。 |
null |
style |
object |
給Panel增加自定義格式的樣式。 |
{} |
fit |
boolean |
當(dāng)設(shè)為true時(shí),Panel的 尺寸就適應(yīng)它的父容器。 |
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 |
自定義工具組,每個(gè)工具包含兩個(gè)特性: iconCls和handler |
[] |
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里。 |
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]; // 只抽出 body 的內(nèi)容 } 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)閉。 |
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ā)。 |
onMove |
left,top |
Panel移動(dòng)后觸發(fā)。 Top:新的頂部位置 |
onMaximize |
none |
窗口最大化后觸發(fā)。 |
onRestore |
none |
窗口還原為它的原始尺寸后觸發(fā)。 |
onMinimize |
none |
窗口最小化后觸發(fā)。 |
方法
名稱 |
參數(shù) |
說明 |
options |
none |
返回選項(xiàng)特性。 |
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 |
當(dāng)設(shè)置了href特性時(shí),刷新Panel加載遠(yuǎn)程數(shù)據(jù)。 |
resize |
options |
設(shè)置Panel尺寸并做布局。Options對象包含下列特性: |
move |
options |
移動(dòng)Panel到新位置。Options對象包含下列特性: |
maximize |
none |
Panel適應(yīng)它的容器的尺寸。 |
minimize |
none |
最小化Panel。 |
restore |
none |
把最大化的Panel還原為它原來的尺寸和位置。 |
collapse |
animate |
折疊Panel身體。 |
expand |
animate |
展開Panel身體。 |
相關(guān)文章
jQuery EasyUI 折疊面板accordion的使用實(shí)例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果,通過簡單的jQuery鏈?zhǔn)讲僮鲗?shí)現(xiàn)針對頁面元素的遍歷及樣式動(dòng)態(tài)變換功能,需要的朋友可以參考下2015-09-09jQuery中on綁定事件后引發(fā)的事件冒泡問題如何解決
這篇文章主要介紹了jQuery中on綁定事件后引發(fā)的事件冒泡問題及解決辦法,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-05-05jquery給圖片添加鼠標(biāo)經(jīng)過時(shí)的邊框效果
鼠標(biāo)經(jīng)過時(shí)圖片產(chǎn)生塌陷,實(shí)則應(yīng)該將邊框控制直接加在IMG標(biāo)簽上即可,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-11-11jQuery ctrl+Enter shift+Enter實(shí)現(xiàn)代碼
jQuery中對鍵盤事件進(jìn)行了修正 調(diào)用函數(shù)的時(shí)候傳入事件即可。2010-02-02jquery點(diǎn)贊功能實(shí)現(xiàn)代碼 點(diǎn)個(gè)贊吧!
點(diǎn)贊功能很多地方都會(huì)出現(xiàn),如何實(shí)現(xiàn)愛心點(diǎn)贊功能,這篇文章主要為大家詳細(xì)介紹了jquery點(diǎn)贊功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05jQuery實(shí)現(xiàn)div隨意拖動(dòng)的實(shí)例代碼(通用代碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)div隨意拖動(dòng)的實(shí)例代碼,涉及到j(luò)query div隨意拖動(dòng)相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2016-01-01基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動(dòng)
點(diǎn)擊左右按鈕圖片橫向滾動(dòng)jquery,一次滾動(dòng)四個(gè),圖片滾動(dòng)完成,自動(dòng)回到第一個(gè)版面,效果相當(dāng)不錯(cuò),感興趣的前端工程師們可以參考下2013-04-04jQuery+PHP實(shí)現(xiàn)微信轉(zhuǎn)盤抽獎(jiǎng)功能的方法
這篇文章主要介紹了jQuery+PHP實(shí)現(xiàn)微信轉(zhuǎn)盤抽獎(jiǎng)功能的方法,詳細(xì)分析了抽獎(jiǎng)程序界面設(shè)計(jì)、前臺(tái)jQuery交互、后臺(tái)概率算法等抽獎(jiǎng)功能相關(guān)技巧,需要的朋友可以參考下2016-05-05