當(dāng)前位置：
首頁 >
EasyUI中Accordion折叠面板的简单使用
發(fā)布時(shí)間：2025/3/19
16
豆豆
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中Accordion折叠面板的简单使用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場(chǎng)景
效果
容器選項(xiàng)
| width | number | 折疊面板（Accordion）容器的寬度。 | auto |
| height | number | 折疊面板（Accordion）容器的高度。 | auto |
| fit | boolean | 設(shè)置為 true，就使折疊面板（Accordion）容器的尺寸適應(yīng)它的父容器。 | false |
| border | boolean | 定義是否顯示邊框。 | true |
| animate | boolean | 定義當(dāng)展開或折疊面板（panel）時(shí)是否顯示動(dòng)畫效果。 | true |
| multiple | boolean | 設(shè)置為 true，則可同時(shí)展開多個(gè)面板（panel）。該屬性自版本 1.3.5 起可用。 | false |
| selected | number | 初始化選中的面板（panel）索引。該屬性自版本 1.3.5 起可用。 | 0 |
面板（Panel）選項(xiàng)
折疊面板（Accordion）的面板（panel）選項(xiàng)繼承自面板（panel），下面是附加的屬性：
| selected | boolean | 設(shè)置為 true 就展開面板（panel）。 | false |
| collapsible | boolean | 定義是否顯示可折疊按鈕。如果設(shè)置為 false，將不能通過點(diǎn)擊來展開/折疊面板（panel）。 | true |
事件
| onSelect | title,index | 當(dāng)面板（panel）被選中時(shí)觸發(fā)。 |
| onUnselect | title,index | 當(dāng)面板（panel）未被選中時(shí)觸發(fā)。該事件自版本 1.3.5 起可用。 |
| onAdd | title,index | 當(dāng)添加一個(gè)新面板（panel）時(shí)觸發(fā)。 |
| onBeforeRemove | title,index | 當(dāng)移除一個(gè)面板（panel）之前觸發(fā)，返回 false 就取消移除動(dòng)作。 |
| onRemove | title,index | 當(dāng)移除一個(gè)面板（panel）時(shí)觸發(fā)。 |
方法
| options | none | 返回折疊面板（accordion）的選項(xiàng)。 |
| panels | none | 獲取全部的面板（panel）。 |
| resize | none | 調(diào)整折疊面板（accordion）的尺寸。 |
| getSelected | none | 獲取第一個(gè)選中的面板（panel）。 |
| getSelections | none | 過去所有選中的面板（panel）。該方法自版本 1.3.5 起可用。 |
| getPanel | which | 獲取指定的面板（panel）。'which' 參數(shù)可以是面板（panel）的標(biāo)題（title）或索引（index）。 |
| getPanelIndex | panel | 獲取指定的面板（panel）索引。該方法自版本 1.3 起可用。 下面的實(shí)例顯示如何獲取選中的面板（panel）索引。 |
| select | which | 選擇指定的面板（panel）。'which' 參數(shù)可以是面板（panel）的標(biāo)題（title）或索引（index）。 |
| unselect | which | 未選擇指定的面板（panel）。'which' 參數(shù)可以是面板（panel）的標(biāo)題（title）或索引（index）。該方法自版本 1.3.5 起可用。 |
| add | options | 添加一個(gè)新的面板（panel）。默認(rèn)情況下，新添加的面板（panel）會(huì)被選中。如需添加一個(gè)未被選中的新面板（panel），請(qǐng)傳遞 'selected' 屬性，并將其設(shè)置為 false。 代碼實(shí)例： |
| remove | which | 移除指定的面板（panel）。'which' 參數(shù)可以是面板（panel）的標(biāo)題（title）或索引（index）。 |
?
實(shí)現(xiàn)
<!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>?
總結(jié)
以上是生活随笔為你收集整理的EasyUI中Accordion折叠面板的简单使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中Panel面板的简单使用
- 下一篇： Junit单元测试时提示：Method