# 加載方式 ## Class加載 ``` <div style="width: 500px;" class="easyui-panel" title="我的面板"> <p>標題</p> </div> ```  ## JS調用加載 ``` <div id="box"> <p>標題</p> </div> <script> $(function () { $('#box').panel({ // 面板的 ID 值 id : 'pox', // 面板左上角的圖標 iconCls:'icon-add', // 設置面板寬度 width:500, // 設置面板高度 heigth:400, // 設置面板距離左邊的位置 left : 10000, // 設置面板距離頂部的位置 top: 200, // 添加一個 CSS 類 ID 到面板(往面板的class中加入 a) cls:'a', // 添加一個 CSS 類 ID 到面板頭部 headerCls : 'b', // 添加一個 CSS 類 ID 到面板正文部分 bodyCls : 'c', // 添加一個當前指定樣式到面板 style : { 'min-height' : '150px' }, // 當設置為true的時候面板大小將自適應父容器 fit : false, // 是否顯示面板邊框 border : true, // 面板顯示的標題文本 title:'面板標題', // 如果設置為 true，在面板被創建的時候將重置大小和重新布局 doSize : true, // 是否創建面板標題 noheader : false, // 面板主體內容 content : '我是面板內容', // 是否顯示可折疊按鈕 collapsible : true, // 是否顯示最小化按鈕 minimizable : true, // 是否顯示最大化按鈕 maximizable : true, // 是否顯示關閉按鈕 closable : true, // 自定義工具菜單 tools : [{ iconCls:'icon-help', handler:function () { alert('help'); } },{ iconCls:'icon-edit', handler:function () { alert('edit'); } }], // 是否在初始化的時候折疊面板 collapsed : false, // 是否在初始化的時候最小化面板 minimized : false, // 是否在初始化的時候最大化面板 maximized : false, // 是否在初始化的時候關閉面板 closed : false, // 從 URL 讀取遠程數據并且顯示到面板 href : 'mycontent.php', // 是否在超鏈接載入時緩存面板內容 cache : true, // 在加載遠程數據的時候在面板內顯示一條信息 loadingMessage : '正在加載中', //定義如何從 ajax 應答數據中提取內容，返回提取數據 extractor: function (data) { return data.substring(0,3); } }); }); </script> ```  # 屬性列表 | 屬性名 | 值 | 說明 | | --- | --- | | id | string | 面板的 ID 值。默認為 null。| | title | string | 面板顯示的標題文本。默認為 null。| | iconCls | string| 設置一個 16x16 圖標的 CSS 類 ID 顯示在面板左上角。默認為 null。| | width | number | 設置面板寬度。默認值 auto。| | height | number | 設置面板高度。默認值 auto。| | left | number| 設置面板距離左邊的位置（即 X 軸位置）。默認為null。| | top| number | 設置面板距離頂部的位置（即 Y 軸位置）。默認為null。| | cls| string | 添加一個 CSS 類 ID 到面板。默認為 null。| | headerCls| string | 添加一個 CSS 類 ID 到面板頭部。默認為 null。| | bodyCls | string| 添加一個 CSS 類 ID 到面板正文部分。默認為null。| | style| subject | 添加一個當前指定樣式到面板。默認為{}。| | fit | boolean| 當設置為true的時候面板大小將自適應父容器。默認為 false。| | border| boolean| 定義是否顯示面板邊框。默認為 true| | doSize | boolean| 如果設置為 true，在面板被創建的時候將重置大小和重新布局。默認為 true。| | noheader| boolean| 如果設置為 true。將不會創建面板標題。默認為false。| | content | string| 面板主體內容。默認為 null。| | collapsible | boolean| 定義是否顯示可折疊按鈕。默認為 false。| | minimizable| boolean | 定義是否顯示最小化按鈕。默認為 false。| | maximizable| boolean| 定義是否顯示最大化按鈕。默認為 false。| | closeable | boolean | 定義是否顯示關閉按鈕。| | tools| array,selector| 自定義工具菜單，可用值：1)數 組 ， 每 個 元 素 都 包 含 ’iconCls’和’handler’屬性。2)指向工具菜單的選擇器。默認為[]。| | collapsed| boolean| 定義是否在初始化的時候折疊面板。默認值為false。| | minimized| boolean| 定義是否在初始化的時候最小化面板。默認值為false。| | maximized | boolean| 定義是否在初始化的時候最大化面板。默認值為false。| | closed | boolean| 定義是否在初始化的時候關閉面板。默認為false。| | href | string| 從 URL 讀取遠程數據并且顯示到面板。默認為null。| | cache| boolean| 如果為 true，在超鏈接載入時緩存面板內容。默認為 true。| | loadingMessage| string| 在加載遠程數據的時候在面板內顯示一條信息。默認值為 loading...。| | extractor| function| 定義如何從 ajax 應答數據中提取內容，返回提取數據。| # 事件列表 | 事件名 | 參數 | 說明 | | --- | --- | | onBeforeLoad | none | 在加載遠程數據之前觸發。| | onLoad | none | 在加載遠程數據時觸發。| | onBeforeOpen| none| 在打開面板之前觸發，返回 false 可以取消打開操作。| | onOpen | none | 在打開面板之后觸發。| | onBeforeClose | none| 在關閉面板之前觸發，返回 false 可以取消關閉操作。| | onClose| none | 在面板關閉之后觸發。| | onBeforeDestroy | none| 在面板銷毀之前觸發，返回 false 可以取消銷毀操作。| | onDestroy | none| 在面板銷毀之后觸發。| | onBeforeCollapse| none| 在面板折疊之前觸發，返回 false 可以終止折疊操作。| | onCollapse | none| 在面板折疊之后觸發。| | onBeforeExpand | none| 在面板展開之前觸發，返回 false 可以終止、展開操作。| | onExpand| none| 在面板展開之后觸發。| | onResize| width,height| 在面板改變大小之后觸發。width：新的寬度。height：新的高度。| | onMove | left,top| 在面板移動之后觸發。left：新的左邊距位置。top：新的上邊距位置。| | onMaximize| none| 在窗口最大化之后觸發。| | onRestore| none | 在窗口恢復到原始大小以后觸發。| | onMinimize| none | 在窗口最小化之后觸發。| # 方法列表 | 方法名 | 參數 | 說明 | | --- | --- | | options| none| 返回屬性對象。| | panel | none | 返回面板對象。| | header| none| 返回面板頭對象。| | body| none| 返回面板主體對象。| | setTitle| title | 設置面板頭的標題文本。| | open| forceOpen| 在'forceOpen'參數設置為 true 的時候，打開面板時將跳過'onBeforeOpen'回調函數。| | close| forceClose| 在'forceClose'參數設置為 true 的時候，關閉面板時將跳過'onBeforeClose'回調函數。| | destroy | forceDestroy| 在'forceDestroy'參數設置為 true 的時候，銷毀面板時將跳過'onBeforeDestory'回調函數。| | refresh | href| 刷新面板來裝載遠程數據。如果'href'屬性有了新配置，它將重寫舊的'href'屬性。| | resize| options| 設置面板大小和布局。參數對象包含下列屬性：width：新的面板寬度。height：新的面板高度。left：新的面板左邊距位置。top：新的面板上邊距位置。| | move | options| 移動面板到一個新位置。參數對象包含下列屬性：left：新的左邊距位置。top：新的上邊| | maximize | none | 最大化面板到容器大小。| | minimize | none | 最小化面板。| | restore| none | 恢復最大化面板回到原來的大小和位置。| | collapse | animate | 折疊面板主題。| | expand| animate | 展開面板主體。| ``` //返回屬性對象 console.log($('#box').panel('options')); //返回面板對象 console.log($('#box').panel('panel')); //返回面板頭對象 console.log($('#box').panel('header')); //返回面板主體對象 console.log($('#box').panel('body')); //修改面板標題 $('#box').panel('setTitle', '修改') //跳過 onBeforeOpen 回調函數 $('#box').panel('open', true); //跳過 onBeforeClose 回調函數 $('#box').panel('close', true); //跳過 onBeforeDestroy 回調函數 $('#box').panel('close', true); //刷新當前內容 $('#box').panel('refresh'); //刷新指定載入內容 $('#box').panel('refresh', 'content.php'); //設置面板的大小和布局 $('#box').panel('resize', { width : 100, height : 100, left : 100, top : 100, }); //設置移動的坐標 $('#box').panel('move', { left : 100, top : 100, }); //設置面板最大化 $('#box').panel('maximize'); //設置面板最小化 $('#box').panel('minimize'); //設置恢復最大化面板到原始的大小和位置 $('#box').panel('restore'); //設置折疊面板 $('#box').panel('collapse'); //設置展開面板 $('#box').panel('expand'); //可以使用$.fn.panel.defaults 重寫默認值對象。 $.fn.panel.defaults.border = false; ```