jQuery EasyUI，Panel(面板)組件

?

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

?

本節課重點了解EasyUI中Panel(面板)組件的使用方法，這個組件不依賴于其他組件。

?

一．加載方式

//class 加載方式 <div class="easyui-panel" data-options="closable:true"title="My Panel" style="width:500px;"><p>內容區域</p> </div>

panel()將元素執行面板方法

//JS 加載調用 $('#box').panel({width:500,height:150,title : '面板',closable : true, });

?

?

二．屬性列表

?

id ?string 面板的 ID 值。默認為 null。設置面板的id

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題id:'pox' //設置面板的id }); });

?

title ?string 面板顯示的標題文本。默認為 null。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板' //面板顯示的標題 }); });

?

iconCls ?string 設置一個 16x16 圖標的 CSS 類 ID 顯示在面板左上角。默認為 null。設置面板標題左邊圖標

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit' //設置面板標題左邊圖標 }); });

?

width ?number 設置面板寬度。默認值 auto。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150 //設置面板高度 }); });

?

height ?number 設置面板高度。默認值 auto。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150 //設置面板高度 }); });

?

left ?number 設置面板距離左邊的位置（即 X 軸位置）。默認為null。，結合定位使用

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標left:200, //設置面板距離左邊的位置（即 X 軸位置）top:200 //設置面板距離頂部的位置（即 Y 軸位置） });$('#box').panel('panel').css('position','absolute'); //獲取面板對象，設置定位 });

?

top ?number 設置面板距離頂部的位置（即 Y 軸位置）。默認為null。結合定位使用

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標left:200, //設置面板距離左邊的位置（即 X 軸位置）top:200 //設置面板距離頂部的位置（即 Y 軸位置） });$('#box').panel('panel').css('position','absolute'); //獲取面板對象，設置定位 });

?

cls ?string 添加一個 CSS 類 ID 到面板。默認為 null。給面板添加一個class來設置css

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標cls:'pppox' //給面板添加一個class來設置css }); });

?

headerCls ?string 添加一個 CSS 類 ID 到面板頭部。默認為 null。給面板頭部添加一個class來設置css

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標headerCls:'pppox' //給面板頭部添加一個class來設置css }); });

?

bodyCls ?string 添加一個 CSS 類 ID 到面板正文部分。默認為null。給面板正文添加一個class來設置css

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標bodyCls:'pppox' //給面板正文添加一個class來設置css }); });

?

style ?subject 添加一個當前指定樣式到面板。默認為{}。添加一個指定css樣式到面板，注意如果給內置的樣式有沖突可以沒有效果

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標bodyCls:'pppox', //給面板正文添加一個class來設置cssstyle: { //添加一個指定css樣式到面板，注意如果給內置的樣式有沖突可以沒有效果'min-height': '250px'}}); });

?

fit ?boolean 當設置為 true 的時候面板大小將自適應父容器。默認為 false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標bodyCls:'pppox', //給面板正文添加一個class來設置cssfit:true //當設置為 true 的時候面板大小將自適應父容器。默認為 false。 }); });

?

border ?boolean 定義是否顯示面板邊框。默認為 true

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標border:false //定義是否顯示面板邊框。默認為 true }); });

?

doSize ?boolean 如果設置為 true，在面板被創建的時候將重置大小和重新布局。默認為 true。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標doSize:true //如果設置為 true，在面板被創建的時候將重置大小和重新布局。默認為 true。 }); });

?

noheader ?boolean 如果設置為 true。將不會創建面板標題。默認為false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標noheader:true //如果設置為 true。將不會創建面板標題。默認為false。 }); });

?

content ?string 面板主體內容。默認為 null。，設置面板主體內容

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標content :'這是修改后的主體內容' //設置面板主體內容 }); });

?

collapsible ?boolean 定義是否顯示可折疊按鈕。默認為 false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true //定義是否顯示可折疊按鈕。默認為 false。 }); });

?

minimizable ?boolean 定義是否顯示最小化按鈕。默認為 false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標minimizable :true //定義是否顯示最小化按鈕。默認為 false。 }); });

?

maximizable ?boolean 定義是否顯示最大化按鈕。默認為 false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標maximizable :true //定義是否顯示最大化按鈕。默認為 false。 }); });

?

closable ?boolean 定義是否顯示關閉按鈕。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標closable :true //定義是否顯示關閉按鈕。 }); });

?

tools ? array,selector自定義工具菜單，可用值：(1)數 組 ， 每 個 元 素 都 包 含 ’iconCls’ 和’handler’屬性。(2)指向工具菜單的選擇器。默認為[]。

自定義根據按鈕接收一個數組，數組里接收對象，以鍵值對的方式設置iconCls圖標，和handler點擊后的操作，要設置多個圖標數組里就接收多個對象

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標closable :true, //定義是否顯示關閉按鈕。tools:[{ //自定義工具菜單iconCls:'icon-edit', //iconCls圖標handler:function () {alert('點擊后的操作'); //handler點擊后的操作 }}]}); });

?

collapsed ?boolean 定義是否在初始化的時候折疊面板。默認值為false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。collapsed :true //定義是否在初始化的時候折疊面板。默認值為false。 }); });

?

minimized ?boolean 定義是否在初始化的時候最小化面板。默認值為false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。minimized :true //定義是否在初始化的時候最小化面板。默認值為false。 }); });

?

maximized ?boolean 定義是否在初始化的時候最大化面板。默認值為false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。maximized :true //定義是否在初始化的時候最大化面板。默認值為false。 }); });

?

closed ?boolean 定義是否在初始化的時候關閉面板。默認為false。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。closed :true //定義是否在初始化的時候關閉面板。默認為false。 }); });

?

href ?string 從 URL 讀取遠程數據并且顯示到面板。默認為null。，值為要加載的文件地址采用的ajax加載

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/' //URL 讀取遠程數據并且顯示到面板。默認為null。 }); });

?

cache ?boolean 如果為 true，在超鏈接載入時緩存面板內容。默認為 true。，也就是緩存遠程數據

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。cache:true //如果為 true，在超鏈接載入時緩存面板內容。默認為 true。，也就是緩存遠程數據 }); });

?

loadingMessage ? string 在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。設置遠程加載時的內容

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中' //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。 }); });

?

extractor ? function 定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板，data接收遠程數據

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }}); });

?

?

三．事件列表

?

onBeforeLoad ?none 在加載遠程數據之前觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeLoad:function () {alert('在加載遠程數據之前觸發。');}}); });

?

onLoad ?none 在加載遠程數據時觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onLoad:function () {alert('在加載遠程數據時觸發。');}}); });

?

onBeforeOpen ?none在打開面板之前觸發，返回 false 可以取消打開操作。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeOpen:function () {alert('在打開面板之前觸發，返回 false 可以取消打開操作。');// return false; //返回false時，打開之后操作將取消},onOpen:function () {alert('在打開面板之后觸發。');}}); });

?

onOpen ?none 在打開面板之后觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeOpen:function () {alert('在打開面板之前觸發，返回 false 可以取消打開操作。');// return false; //返回false時，打開之后操作將取消},onOpen:function () {alert('在打開面板之后觸發。');}}); });

?

onBeforeClose ?none在關閉面板之前觸發，返回 false 可以取消關閉操作。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeClose:function () {alert('在關閉面板之前觸發，返回 false 可以取消關閉操作。');return false;},onClose:function () {alert('在面板關閉之后觸發。');}}); });

?

onClose ?none 在面板關閉之后觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeClose:function () {alert('在關閉面板之前觸發，返回 false 可以取消關閉操作。');return false;},onClose:function () {alert('在面板關閉之后觸發。');}}); });

?

onBeforeDestroy ?none在面板銷毀之前觸發，返回 false 可以取消銷毀操作。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeDestroy:function () {alert('在面板銷毀之前觸發，返回 false 可以取消銷毀操作。');return false;},onDestroy:function () {alert('在面板銷毀之后觸發。');}}); });

?

onDestroy ?none 在面板銷毀之后觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeDestroy:function () {alert('在面板銷毀之前觸發，返回 false 可以取消銷毀操作。');return false;},onDestroy:function () {alert('在面板銷毀之后觸發。');}}); });

?

onBeforeCollapse ?none在面板折疊之前觸發，返回 false 可以終止折疊操作。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeCollapse:function () {alert('在面板折疊之前觸發，返回 false 可以終止折疊操作。');// return false;},onCollapse:function () {alert('在面板折疊之后觸發。');}}); });

?

onCollapse ?none 在面板折疊之后觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeCollapse:function () {alert('在面板折疊之前觸發，返回 false 可以終止折疊操作。');// return false;},onCollapse:function () {alert('在面板折疊之后觸發。');}}); });

?

onBeforeExpand ?none在面板展開之前觸發，返回 false 可以終止展開操作。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeExpand:function () {alert('在面板展開之前觸發，返回 false 可以終止展開操作。');// return false;},onExpand:function () {alert('在面板展開之后觸發。');}}); });

?

onExpand ?none 在面板展開之后觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onBeforeExpand:function () {alert('在面板展開之前觸發，返回 false 可以終止展開操作。');// return false;},onExpand:function () {alert('在面板展開之后觸發。');}}); });

?

onResize ? width,height在面板改變大小之后觸發。width：新的寬度。height：新的高度。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onResize:function (width,height) {alert('在面板改變大小之后觸發。' +width+ '：新的寬度。' +height+ '：新的高度。');}}); });

?

onMove ? left,top在面板移動之后觸發。left：新的左邊距位置。top：新的上邊距位置。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onMove:function (left,top) {alert('在面板移動之后觸發。' +left+ '：新左邊位置。' +top+ '：新頭部位置。');}}); });

?

onMaximize ? none 在窗口最大化之后觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onMaximize:function () {alert('在窗口最大化之后觸發。');}}); });

?

onRestore ?none 在窗口恢復到原始大小以后觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onRestore:function () {alert('在窗口恢復到原始大小以后觸發。');}}); });

?

onMinimize ?none 在窗口最小化之后觸發。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 },onMinimize:function () {alert('在窗口最小化之后觸發。');}}); });

?

?

三．方法列表

?

options ?none 返回屬性對象。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }});alert($('#box').panel('options')); //返回屬性對象。 });

?

panel ?none 返回面板對象。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }});alert($('#box').panel('panel')); //返回面板對象。 });

?

header ?none 返回面板頭對象。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }});alert($('#box').panel('header')); //返回面板頭對象。 });

?

body ?none 返回面板主體對象。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }}); alert($('#box').panel('body')); //返回面板主體對象。 });

?

setTitle ?title 設置面板頭的標題文本。

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }});alert($('#box').panel('setTitle','設置標題')); //設置面板頭的標題文本。 });

?

open ?forceOpen 在'forceOpen'參數設置為 true 的時候，打開面板時將跳過'onBeforeOpen'回調函數。跳過在打開面板之后觸發

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }}); $('#box').panel('open', true); //參數設置為 true 的時候，打開面板時將跳過'onBeforeOpen'回調函數 });

?

close ?forceClose 在'forceClose'參數設置為 true 的時候，關閉面板時將跳過'onBeforeClose'回調函數。，跳過關閉之前觸發

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }});$('#box').panel('close', true); //參數設置為 true 的時候，關閉面板時將跳過'onBeforeClose'回調函數 });

?

destroy ?forceDestroy在'forceDestroy'參數設置為 true 的時候，銷毀面板時將跳過'onBeforeDestory'回調函數。跳過銷毀之前觸發

/** <div id="box">內容部分</div>**/$(function () {$('#box').panel({title: '面板', //面板顯示的標題width:500, //設置面板寬度height:150, //設置面板高度iconCls:'icon-edit', //設置面板標題左邊圖標collapsible :true, //定義是否顯示可折疊按鈕。默認為 false。minimizable :true, //定義是否顯示最小化按鈕。默認為 false。maximizable :true, //定義是否顯示最大化按鈕。默認為 false。closable :true, //定義是否顯示關閉按鈕。href :'is_user.php/', //URL 讀取遠程數據并且顯示到面板。默認為null。loadingMessage:'數據加載中', //在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。extractor:function (data) { //定義如何從 ajax 應答數據中提取內容，返回提取數據。也就是將遠程返回數據進行處理后返回給面板return data.substring(0,2); //加收外部數據，截取后返回 }});$('#box').panel('destroy', true); //參數設置為 true 的時候，銷毀面板時將跳過'onBeforeDestory'回調函數 });

?

?

refresh ?href 刷新面板來裝載遠程數據。如果'href'屬性有了新配置，它將重寫舊的'href'屬性。

//刷新當前內容 $('#box').panel('refresh');

?

//刷新指定載入內容 $('#box').panel('refresh', 'content.php');

?

?

resize ?options設置面板大小和布局。參數對象包含下列屬性：width：新的面板寬度。height：新的面板高度。left：新的面板左邊距位置。top：新的面板上邊距位置。

$('#box').panel('resize', { //設置面板大小和布局width : 100,height : 100,left : 100,top : 100});

?

move ?options 移動面板到一個新位置。參數對象包含下列屬性：left：新的左邊距位置。top：新的上邊距位置。

$('#box').panel('move', { //設置移動的坐標left : 100,top : 100});

?

maximize ?none 最大化面板到容器大小。

$('#box').panel('maximize'); //最大化面板到容器大小。

?

minimize ?none 最小化面板。

$('#box').panel('minimize'); //最小化面板。

?

restore ?none 恢復最大化面板回到原來的大小和位置。

$('#box').panel('restore'); //恢復最大化面板回到原來的大小和位置。

?

collapse ?animate 折疊面板主題。

$('#box').panel('collapse'); //折疊面板主題。

?

expand ?animate 展開面板主體。

$('#box').panel('expand'); //展開面板主體。

?

$.fn.panel.defaults 重寫默認值對象。

$.fn.panel.defaults.border = false;

?

轉載于:https://www.cnblogs.com/adc8868/p/6641325.html

總結

以上是生活随笔為你收集整理的第一百九十九节，jQuery EasyUI，Panel(面板)组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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