Accordion

FineUI. Accordion

new Accordion(options)

Description:

手风琴控件。容纳多个 FineUI.AccordionPane，同时仅展开一个窗格。

相关在线示例：

Examples

创建手风琴控件，items列表中放置多个FineUI.AccordionPane：

FineUI.create({
	type: 'Accordion', renderTo: document.body, width: 400, height: 400, title: '手风琴',
	items: [{
		type: 'AccordionPane', title: '窗格一', bodyPadding: 10, content: '第一个窗格内容'
	}, {
		type: 'AccordionPane', title: '窗格二', bodyPadding: 10, content: '第二个窗格内容'
	}, {
		type: 'AccordionPane', title: '窗格三', bodyPadding: 10, content: '第三个窗格内容'
	}]
});

使用activePaneIndex指定默认激活的窗格，fill: false禁用窗格填充：

FineUI.create({
	type: 'Accordion', renderTo: document.body, width: 400, height: 400, title: '手风琴',
	activePaneIndex: 1, fill: false,
	items: [{
		type: 'AccordionPane', title: '窗格一', bodyPadding: 10, content: '内容一'
	}, {
		type: 'AccordionPane', title: '窗格二', bodyPadding: 10, content: '内容二（默认激活）'
	}]
});

通过FineUI.Accordion#event:panechange事件监听窗格切换：

FineUI.create({
	type: 'Accordion', renderTo: document.body, width: 400, height: 300,
	items: [{
		type: 'AccordionPane', title: '窗格一', bodyPadding: 10, content: '内容一'
	}, {
		type: 'AccordionPane', title: '窗格二', bodyPadding: 10, content: '内容二'
	}],
	listeners: {
		panechange: function (event, pane, paneIndex) {
			FineUI.alert('激活：' + pane.getTitle());
		}
	}
});

Parameters:

Name Type Description

options

Object

初始参数

Properties

Name	Type	Default	Description
`activePaneIndex`	number	`0`	激活手风琴窗格的索引
`fill`	boolean	`true`	手风琴窗格是否填充整个控件
`showCollapseTool`	boolean	`true`	是否显示手风琴窗格的折叠工具按钮
`type`	string	`'Accordion'`	控件类型

Extends

FineUI.Panel

Members

bodyEl :jQuery

Description:

控件主体对应的jQuery节点对象

Inherited From:

FineUI.PanelBase#bodyEl

控件主体对应的jQuery节点对象

Type:

jQuery

el :jQuery

Description:

控件对应的jQuery节点对象

Inherited From:

FineUI.Component#el

控件对应的jQuery节点对象

Type:

jQuery

items :Object

Description:

子控件列表

Inherited From:

FineUI.Container#items

子控件列表

Type:

Object

Methods

activeNextPane()

Description:

激活下一个手风琴窗格

activePane(value)

Description:

设置激活手风琴窗格

Parameters:

Name	Type	Description
`value`	number \| string	手风琴窗格

addTool(item)

Description:

添加工具图标

Inherited From:

FineUI.PanelBase#addTool

Parameters:

Name	Type	Description
`item`	FineUI.Tool	工具图标实例

collapse()

Description:

折叠面板（程序触发；启用collapsible: true时有效）

Inherited From:

FineUI.PanelBase#collapse

Example

程序折叠侧栏：

FineUI.ui.panelSide.collapse();

expand()

Description:

展开面板（与collapse对应）

Inherited From:

FineUI.PanelBase#expand

getActivePane() → {FineUI.AccordionPane}

Description:

获取激活手风琴窗格

Returns:

激活的手风琴窗格

Type: FineUI.AccordionPane

getActivePaneId() → {string}

Description:

获取激活的手风琴窗格标识

Returns:

手风琴窗格标识

Type: string

getActivePaneIndex() → {number}

Description:

获取激活的手风琴窗格序号

Returns:

激活手风琴窗格的序号

Type: number

getEncodedText(text) → {string}

Description:

获取编码后的字符串

Inherited From:

FineUI.Component#getEncodedText

Parameters:

Name	Type	Description
`text`	string	原始字符串

Returns:

编码后的字符串

Type: string

getFormFields() → {Array.<FineUI.Field>}

Description:

获取容器内（深度遍历）所有表单字段实例（FineUI.Field的子类，如TextBox/NumberBox/DatePicker等）

Inherited From:

FineUI.Container#getFormFields

Example

遍历表单全部字段，序列化为 name → value 的对象（用于自定义 ajax 提交；字段未声明name时改用id）：

var values = {};
FineUI.ui.form1.getFormFields().forEach(function (field) {
    values[field.name || field.id] = field.getValue();
});
// values 形如：{ tbxUserName: 'FineUIPro', numberAge: 30, ... }

Returns:

表单字段数组

Type: Array.<FineUI.Field>

getIFrameEl() → {jQuery}

Description:

获取内联框架元素

Inherited From:

FineUI.PanelBase#getIFrameEl

Returns:

内联框架元素

Type: jQuery

getIFrameUrl() → {string}

Description:

获取内联框架地址

Inherited From:

FineUI.PanelBase#getIFrameUrl

Returns:

内联框架地址

Type: string

getIFrameWindow() → {Window}

Description:

获取内联框架窗体对象

Inherited From:

FineUI.PanelBase#getIFrameWindow

Returns:

内联框架窗体对象

Type: Window

getItem(value) → {FineUI.Component}

Description:

获取子控件（按索引/标识符/匹配函数查找；通常配合items无显式 id 的场景，比按FineUI.ui[id]更精准）

Inherited From:

FineUI.Container#getItem

Examples

按索引取第一个子控件：

var firstChild = FineUI.ui.toolbar1.getItem(0);

按 id 取子控件：

var btn = FineUI.ui.toolbar1.getItem('btnSave');

按匹配函数找第一个匹配的子控件（函数对每项返回 true 即匹配）：

var btn = FineUI.ui.toolbar1.getItem(function (item) {
    return item.type === 'Button' && item.text === '保存';
});

Parameters:

Name	Type	Description
`value`	number \| string \| function	子控件索引、标识符或者匹配函数

Returns:

子控件实例

Type: FineUI.Component

getTitleTooltip() → {string}

Description:

获取面板标题提示信息

Inherited From:

FineUI.PanelBase#getTitleTooltip

Returns:

标题提示信息

Type: string

hasHScrollbar() → {boolean}

Description:

是否存在水平滚动条

Inherited From:

FineUI.PanelBase#hasHScrollbar

Returns:

是否存在水平滚动条

Type: boolean

hasVScrollbar() → {boolean}

Description:

是否存在垂直滚动条

Inherited From:

FineUI.PanelBase#hasVScrollbar

Returns:

是否存在垂直滚动条

Type: boolean

hidePopEl()

Description:

隐藏容器内的所有弹出框

Inherited From:

FineUI.Container#hidePopEl

insertTool(insertIndex, item)

Description:

插入工具图标

Inherited From:

FineUI.PanelBase#insertTool

Parameters:

Name	Type	Description
`insertIndex`	number	插入的位置
`item`	FineUI.Tool	工具图标实例

isCollapsed() → {boolean}

Description:

是否处于折叠状态

Inherited From:

FineUI.PanelBase#isCollapsed

Returns:

折叠状态

Type: boolean

isType(value) → {boolean}

Description:

检测当前实例是否指定的控件类型

Inherited From:

FineUI.Base#isType

Example

grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true

Parameters:

Name	Type	Description
`value`	Object	控件类型

Returns:

如果当前实例是指定的控件类型，返回true；否则返回false

Type: boolean

refreshIFrame()

Description:

刷新内联框架

Inherited From:

FineUI.PanelBase#refreshIFrame

setActivePane(value)

Description:

设置激活的手风琴窗格（同时仅一个窗格可激活）

Examples

按索引激活第二个窗格：

FineUI.ui.accordion1.setActivePane(1);

按 id 激活：

FineUI.ui.accordion1.setActivePane('paneSettings');

Parameters:

Name	Type	Description
`value`	number \| string	手风琴窗格索引或标识符

setIFrameUrl(url)

Description:

设置内联框架地址

Inherited From:

FineUI.PanelBase#setIFrameUrl

Parameters:

Name	Type	Description
`url`	string	内联框架地址

setSplitDraggable() → {boolean}

Description:

设置分隔条是否可以拖动

Inherited From:

FineUI.PanelBase#setSplitDraggable

Returns:

是否可以拖动

Type: boolean

setTitleTooltip(tooltip)

Description:

设置面板标题提示信息

Inherited From:

FineUI.PanelBase#setTitleTooltip

Parameters:

Name	Type	Description
`tooltip`	string	提示信息字符串

toggleCollapse()

Description:

切换面板的折叠状态

Inherited From:

FineUI.PanelBase#toggleCollapse

Events

beforehide

Description:

隐藏控件之前触发（返回false则取消隐藏操作）

Inherited From:

FineUI.Component#event:beforehide

beforeshow

Description:

显示控件之前触发（返回false则取消显示操作）

Inherited From:

FineUI.Component#event:beforeshow

collapse

Description:

折叠面板时触发（启用collapsible: true时；用户点击折叠图标或调用collapse()都会触发）

Inherited From:

FineUI.PanelBase#event:collapse

Example

侧栏折叠后让中央面板"伸开"覆盖空间：

FineUI.ui.panelSide.on('collapse', function () {
    FineUI.ui.panelMain.setWidth(window.innerWidth);
});

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象

dirtychange

Description:

容器内的字段值改变时触发

Inherited From:

FineUI.PanelBase#event:dirtychange

expand

Description:

展开面板时触发（与collapse事件对应）

Inherited From:

FineUI.PanelBase#event:expand

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象

hide

Description:

隐藏控件时触发

Inherited From:

FineUI.Component#event:hide

iframeload

Description:

内联框架加载完毕时触发（启用iframe: true时；常用于和 iframe 内部脚本通讯）

Inherited From:

FineUI.PanelBase#event:iframeload

Example

iframe 加载完成后给子页面注入参数：

FineUI.create({
    type: 'Window', iframe: true, iframeUrl: '/detail.aspx',
    listeners: {
        iframeload: function () {
            var iframeWin = this.getIFrameWindow();
            iframeWin.someInitFunction({ userId: 101 });
        }
    }
});