jQuery Easy UI Panel(面板)組件，jqueryui
panel(面板)組件,跟前面的組件用法幾乎都差不多，也是從設定一些面板屬性、操作面板觸發的事件、我們可針對面板對象的操作方法這三個點去學習。
後面有一些組件要依賴於這個組件。
還有一點跟前面不同的就是面板內容可以請求遠端資料。
樣本：
<!DOCTYPE html><html><head><title>jQuery Easy UI</title><meta charset="UTF-8" /><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script><link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><script>$(function () {//屬性列表$('#box').panel({id : 'box',//面板的ID值 預設為nulltitle : '我是一個面板',//面板顯示的標題文本，預設為nullwidth : 500,//面板寬度 預設為autoheight : 150,//面板高度 預設為autoiconCls : 'icon-add',//面板左上方的一個表徵圖,可去css樣式中自訂表徵圖檔案，預設為null//left : 100,//設定面板距離左邊的距離 預設為null//top : 100,//設定面板距離上邊的距離 預設為nullcls : 'a',//添加一個CSS 類ID 到面板。預設為null。headerCls : 'b',//參數為css類 定義面板頭部樣式 預設nullbodyCls : 'c',//參數為css類 定義面板內文樣式 預設null//面板樣式style : {'min-height' : '200px',},//fit : true,//預設為false，含義是面板大小是否自適應父容器//border : false,//預設為true 定義是否顯示面板邊框//doSize : false,//noheader : true,//預設為false，當設定為true，在建立面板的時候不會建立標題content : '<strong>面板主體內容</strong>',//面板主體內容 預設為nullcollapsible : true,//是否顯示可摺疊按鈕 預設為falseminimizable : true,//是否顯示最小化按鈕預設falsemaximizable : true,//是否顯示最大化按鈕預設falseclosable : true,//是否定義關閉按鈕預設falsetools : '#tt',//定義工具菜單，有兩種方式，一種是下面那個數組方式，另一種指向定義好的菜單/*tools : [{iconCls : 'icon-help',//表徵圖handler : function () {//點擊觸發函數alert('help');},},{}],*///collapsed : true,//是否在初始化的時候摺疊面板//minimized : true,//是否在初始化的時候最小化面板//maximized : true,//是否在初始化的時候最大化面板//closed : true,//是否在初始化的時候關閉面板，這個屬性什麼時候能用到？//href : 'haicheng_demo/panel', //遠程請求資料（ajax請求，不能跨域）//loadingMessage : '正在努力載入中...',//正在載入遠端資料的時候，在面板內顯示的資訊,預設loading...//cache:false,//如果為true，在超連結載入時緩衝面板內容。預設為true。/** *對ajax遠程請求回來的資料進行處理，然後return到面板上 *extractor : function (data) {return data+"</br>--2014.08.18";} */ //觸發事件列表：/* onBeforeLoad : function () {alert('遠程載入之前觸發！');return false;//取消遠程載入},onLoad : function () {alert('遠程載入之後觸發！');},onBeforeOpen : function () {alert('開啟之前觸發！');return false;//取消開啟},onOpen : function () {alert('開啟之後觸發！');},onBeforeClose : function () {alert('關閉之前觸發！');return false;//取消關閉},onClose : function () {alert('關閉之後觸發！');},onBeforeDestroy : function () {alert('銷毀之前觸發！');//return false;//取消銷毀},onDestroy : function () {alert('銷毀之後觸發！');},onBeforeCollapse : function () {alert('摺疊之前觸發！');//return false;//取消摺疊},onCollapse : function () {alert('摺疊之後觸發！');},onBeforeExpand : function () {alert('展開之前觸發！');//return false;//取消展開},onExpand : function () {alert('展開之後觸發！');},onMaximize : function () {alert('視窗最大化時觸發！');},onRestore : function () {alert('視窗還原時觸發！');},onMinimize : function () {alert('視窗最小化時觸發！');},onResize : function (width, height) {alert(width + '|' + height);},onMove : function (left, top) {alert(left + '|' + top);}*///onBeforeOpen : function () {//alert('開啟之前觸發！');//return false;//取消開啟//},});//方法列表//$('#box').panel('panel').css('position', 'absolute');//$('#box').panel('destroy');/*$(document).click(function () {$('#box').panel('resize', {'width' : 600,'height' : 300,});});$(document).click(function () {$('#box').panel('move', {'left' : 600,'top' : 300,});});*///console.log($('#box').panel('options'));//console.log($('#box').panel('panel'));//console.log($('#box').panel('header'));//console.log($('#box').panel('body'));//$('#box').panel('setTitle', '標題');//$('#box').panel('open', true);//$('#box').panel('close');//$('#box').panel('destroy');//$('#box').panel('maximize');//$('#box').panel('restore');//$('#box').panel('minimize');//$('#box').panel('collapse');//$('#box').panel('expand');});</script></head><body><!--<div class="easyui-panel" data-options="closable:true" title="面板" style="width:500px;"><p>內容地區</p></div>--><div id="box"><p>內容地區</p></div><div id="tt"><a class="icon-add" onclick="javascript:alert('add')"> </a><a class="icon-edit" onclick="javascript:alert('edit')"> </a><a class="icon-cut" onclick="javascript:alert('cut')"> </a></div></body></html>其他地方不說了，就說一下那個href屬性，我在實際學習的時候是基於一個SpringMVC架構寫的例子。
後台代碼：
@RequestMapping(value = "panel")public ModelAndView panel(String _){<span style="white-space:pre"></span>System.out.println("****************進入後台*******************"+_);<span style="white-space:pre"></span>ModelAndView mv =new ModelAndView("/panelDemo/panelData.jsp");<span style="white-space:pre"></span>mv.addObject("data", "Hello Hirain!!!");<span style="white-space:pre"></span>return mv;}為什麼我的後台方法多了個參數String _呢？是因為我看到它實際請求的時候在url後面自動拼上了一個參數_，後台不接收這個參數也一樣。
panelData.jsp內代碼就只有${data}
點此下載原始碼
這個只有在左邊的架構頁面中加一個遮蔽層，當右邊架構頁面的遮蔽層顯示時，將左邊架構頁面的遮蔽層也同時顯示出來，反之也是一樣。實現起來應該不是很難。
為了達到效果，將左邊遮蔽層的右邊框設成無。
對於ExtJS、JQuery UI與easy UI的選擇問題
首先根據你的需求，你需要這些架構具有你需要的UI組件，ExtJS、easy ui都具備你需要用到的那幾款ui組件，比如messagebox、tree、grid。相比較jQuery UI的ui組件不夠全面，比如grid，但是jquery有很多各種外掛程式，包括grid,但它不在jQuery UI內。而Ext JS和easy ui最新版提供的GRID都有20種以上實現不同功能grid。
輕重比較，說ExtJS比較大，jquery較小，那隻是淺顯的理解。首先ExtJS是一個完整的Framework,是重量層級的，easy ui 是基於jquery庫的一套UI組件庫，是輕量級的，ExtJS是應用application級的，而jquery是page頁面級的。當然application也是由page組成的，那就需要你自己去完成了，考慮你的需求，和使用架構的初衷，選擇使用哪一種。同時ExtJs由於是重量級架構，完全物件導向風格，提供API非常完備也非常龐大，所以學習成本也想相對較大。
相容性ExtJS相容IE全系列瀏覽器和其他非IE現代瀏覽器，jquery UI向來不太考慮ie低版本瀏覽器的相容，從態度上的鄙視。easy UI是基於jquery的，jquery2.X以上的版本不再支援IE6、7、8,，已鄭重聲明，請看官方網站，easyUI最新版本1.3.3使用jQuery2.0,由於又很多HTML5特性，不再支援IE6\7\8，低版本由一些小部分的相容不夠好，請自己做技術選型的時候去測試，你要使用那個版本。在相容問題上，他們都有瑕疵，看你的接收程度。
使用許可license. EXTJS 2.1以上版本，商用需要購買商業授權，jquery UI 使用MIT協議，開源。 jquery easyUI如果商用需遵循license commercial商業許可，也就是要購買使用權.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
