> Accordion依賴于Panel（面板）組件 # 加載方式 ## Class加載 ``` <div id="box" class="easyui-accordion" style="width:300px;height:200px;"> <div title="accordion1">accordion1</div> <div title="accordion2">accordion2</div> <div title="accordion3">accordion3</div> </div> ``` ## JS調用加載 ``` $(function () { $('#box').accordion({ // 分類容器的寬度 weight : 200, // 分類容器的高度 height: 200, // 是否將分類容器大小將自適應父容器 fit : false, // 是否顯示邊框 border : true, // 在展開和折疊的時候是否顯示動畫效果 animate : true, // 是否同時展開多個面板 multiple : false, // 設置初始化時默認選中的面板索引號（從0開始） selected : 1 }) ; }); ``` # 容器屬性列表 | 屬性名 | 值 | 說明| | --- | --- | | width | number | 分類容器的寬度。默認值 auto。| | height | number | 分類容器的高度。默認值 auto。| | fit| boolean | 如果設置為 true，分類容器大小將自適應父容器。默認值 false。| | border | boolean 定義是否顯示邊框。默認值 true。| | animate | boolean | 定義在展開和折疊的時候是否顯示動畫效果。默認值 true。| | multiple | boolean | 如果為 true 時，同時展開多個面板。默認值 false。| | selected | number | 設置初始化時默認選中的面板索引號。默認值0。| # 事件列表 | 事件名 | 傳參 | 說明| | --- | --- | | onSelect | title,index | 在面板被選中的時候觸發。| | onUnselect | title,index | 在面板被取消選中的時候觸發。| | onAdd | title,index | 在添加新面板的時候觸發。| | onBeforeRemove | title,index | 在移除面板之前觸發，返回 false 可以取消移除操作。| | onRemove | title,index | 在面板被移除的時候觸發。| *** ``` $(function () { $('#box').accordion({ onSelect : function (title, index) { console.log(title + '|' + index); }, onUnselect : function (title, index) { console.log(title + '|' + index); }, onAdd : function (title, index) { console.log(title + '|' + index); }, onBeforeRemove : function (title, index) { console.log(title + '|' + index); // return false; }, onRemove : function (title, index) { console.log(title + '|' + index); } }) ; }); ``` # 方法列表 | 方法名 | 參數 | 說明| | --- | --- | | options| none | 返回分類組件的屬性。| | panels | none | 獲取所有面板。| | resize | none | 調整分類組件大小。| | getSelected | none | 獲取選中的面板。| | getSelections | none | 獲取所有選中的面板。| | getPanel | which | 獲取指定的面板，'which'參數可以是面板的標題或者索引。| | getPanelIndex | panel | 獲取指定面板的索引。| | select | which | 選擇指定面板。'which'參數可以是面板標題或者索引。| | unselect | which | 取消選擇指定面板。'which'參數可以是面板標題或者索引。| | add | options | 添加一個新面板。在默認情況下，新增的面板會變成當前面板。如果要添加一個非選中面板，不要忘記將'selected'屬性設置為 false。| | remove | which | 移除指定面板。'which'參數可以使面板的標題或者索引。| *** ``` //返回屬性對象 console.log($('#box').accordion('options')); //返回所有分類面板 console.log($('#box').accordion('panels')); //調整分類面板布局和大小 $(document).click(function () { $('#box').accordion().css('display', 'block'); $('#box').accordion('resize'); }); //選擇選中的分類面板 console.log($('#box').accordion('getSelected')); //選擇所有選中的分類面板 console.log($('#box').accordion('getSelections')); //獲取指定下標的分類面板 console.log($('#box').accordion('getPanel', 1)); //獲取指定分類面板的下標值 console.log($('#box').accordion('getPanelIndex', '#a2')); //選中指定下標的分類面板 $('#box').accordion('select', 1); //取消選中指定下標的分類面板 $('#box').accordion('unselect', 0); //新增一個分類面板 $('#box').accordion('add', { title : '新分類', closable : true, content : '123', collapsible : false, selected : false, }); //移除一個分類面板 $('#box').accordion('remove', 0); // 可以使用$.fn.accordion.defaults 重寫默認值對象。 $.fn.accordion.defaults.border = false; ``` # 面板屬性 > 分類組件面板繼承了 panel 屬性，我們參考 panel 屬性即可，對分類的面板同樣有效。 并且提供了新增的兩個屬性。 | 屬性名 | 參數 |說明| | --- | --- | | selected | boolean | 如果設置為 true 將展開面板。| | collapsible | boolean | 如果設置為 true 將顯示折疊按鈕。|