EasyUI中Accordion折叠面板的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中Accordion折叠面板的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
容器選項
| width | number | 折疊面板（Accordion）容器的寬度。 | auto |
| height | number | 折疊面板（Accordion）容器的高度。 | auto |
| fit | boolean | 設置為 true，就使折疊面板（Accordion）容器的尺寸適應它的父容器。 | false |
| border | boolean | 定義是否顯示邊框。 | true |
| animate | boolean | 定義當展開或折疊面板（panel）時是否顯示動畫效果。 | true |
| multiple | boolean | 設置為 true，則可同時展開多個面板（panel）。該屬性自版本 1.3.5 起可用。 | false |
| selected | number | 初始化選中的面板（panel）索引。該屬性自版本 1.3.5 起可用。 | 0 |
面板（Panel）選項
折疊面板（Accordion）的面板（panel）選項繼承自面板（panel），下面是附加的屬性：
| selected | boolean | 設置為 true 就展開面板（panel）。 | false |
| collapsible | boolean | 定義是否顯示可折疊按鈕。如果設置為 false，將不能通過點擊來展開/折疊面板（panel）。 | true |
事件
| onSelect | title,index | 當面板（panel）被選中時觸發。 |
| onUnselect | title,index | 當面板（panel）未被選中時觸發。該事件自版本 1.3.5 起可用。 |
| onAdd | title,index | 當添加一個新面板（panel）時觸發。 |
| onBeforeRemove | title,index | 當移除一個面板（panel）之前觸發，返回 false 就取消移除動作。 |
| onRemove | title,index | 當移除一個面板（panel）時觸發。 |
方法
| options | none | 返回折疊面板（accordion）的選項。 |
| panels | none | 獲取全部的面板（panel）。 |
| resize | none | 調整折疊面板（accordion）的尺寸。 |
| getSelected | none | 獲取第一個選中的面板（panel）。 |
| getSelections | none | 過去所有選中的面板（panel）。該方法自版本 1.3.5 起可用。 |
| getPanel | which | 獲取指定的面板（panel）。'which' 參數可以是面板（panel）的標題（title）或索引（index）。 |
| getPanelIndex | panel | 獲取指定的面板（panel）索引。該方法自版本 1.3 起可用。 下面的實例顯示如何獲取選中的面板（panel）索引。 |
| select | which | 選擇指定的面板（panel）。'which' 參數可以是面板（panel）的標題（title）或索引（index）。 |
| unselect | which | 未選擇指定的面板（panel）。'which' 參數可以是面板（panel）的標題（title）或索引（index）。該方法自版本 1.3.5 起可用。 |
| add | options | 添加一個新的面板（panel）。默認情況下，新添加的面板（panel）會被選中。如需添加一個未被選中的新面板（panel），請傳遞 'selected' 屬性，并將其設置為 false。 代碼實例： |
| remove | which | 移除指定的面板（panel）。'which' 參數可以是面板（panel）的標題（title）或索引（index）。 |
?
實現
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body><div id="aa" class="easyui-accordion" style="width:300px;height:200px;"><div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">面板1</div><div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">面板2</div><div title="Title3">面板3</div></div> </body> </html>?
總結
以上是生活随笔為你收集整理的EasyUI中Accordion折叠面板的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中Panel面板的简单使用
- 下一篇： Junit单元测试时提示：Method