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" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> <script> $(function () { //屬性列表 $('#box').panel({ id : 'box', //面板的ID值 默認為null title : '我是一個面板', //面板顯示的標題文本，默認為null width : 500, //面板寬度 默認為auto height : 150, //面板高度 默認為auto iconCls : 'icon-add', //面板左上角的一個圖標,可去css樣式中自定義圖標文件，默認為null //left : 100, //設置面板距離左邊的距離 默認為null //top : 100, //設置面板距離上邊的距離 默認為null cls : 'a', //添加一個CSS 類ID 到面板。默認為null。 headerCls : 'b', //參數為css類 定義面板頭部樣式 默認null bodyCls : 'c', //參數為css類 定義面板正文樣式 默認null //面板樣式 style : { 'min-height' : '200px', }, //fit : true, //默認為false，含義是面板大小是否自適應父容器 //border : false, //默認為true 定義是否顯示面板邊框 //doSize : false, //noheader : true, //默認為false，當設置為true，在創建面板的時候不會創建標題 content : '<strong>面板主體內容</strong>', //面板主體內容 默認為null collapsible : true, //是否顯示可折疊按鈕 默認為false minimizable : true, //是否顯示最小化按鈕 默認false maximizable : true, //是否顯示最大化按鈕 默認false closable : true, //是否定義關閉按鈕 默認false tools : '#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}
新聞熱點
疑難解答
