MenuCheckBox

FineUI. MenuCheckBox

new MenuCheckBox(options)

Description:

复选框菜单项控件

Examples

菜单中的复选框项，checked设置选中状态：

FineUI.create({
	type: 'Button', renderTo: document.body, text: '设置',
	menu: {
		type: 'Menu',
		items: [{
			type: 'MenuCheckBox', text: '显示工具栏', checked: true
		}, {
			type: 'MenuCheckBox', text: '显示状态栏'
		}, {
			type: 'MenuCheckBox', text: '自动保存', checked: true
		}]
	}
});

使用group属性把多项变成单选互斥（同 group 仅一项可选中）：

FineUI.create({
	type: 'Button', renderTo: document.body, text: '主题',
	menu: {
		type: 'Menu',
		items: [{
			type: 'MenuCheckBox', text: '浅色主题', group: 'theme', checked: true
		}, {
			type: 'MenuCheckBox', text: '深色主题', group: 'theme'
		}, {
			type: 'MenuCheckBox', text: '跟随系统', group: 'theme'
		}]
	}
});

Parameters:

Name Type Description

options

Object

初始参数

Properties

Name	Type	Default	Description
`checked`	boolean	`false`	是否处于选中状态
`group`	string	`''`	分组名称（拥有相同 group 属性的复选框菜单项被渲染为单选按钮）
`hiddenName`	string	`''`	用来存放复选框 input 节点的 name 属性
`text`	string	`''`	显示文本
`type`	string	`'MenuCheckBox'`	控件类型

Extends

FineUI.MenuItemBase

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

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

getCheckBoxEl() → {jQuery}

Description:

获取菜单项的复选框元素

Returns:

复选框元素

Type: jQuery

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

hideTopMenu()

Description:

隐藏顶层菜单

Inherited From:

FineUI.MenuItemBase#hideTopMenu

insertTool(insertIndex, item)

Description:

插入工具图标

Inherited From:

FineUI.PanelBase#insertTool

Parameters:

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

isChecked() → {boolean}

Description:

是否选中

Returns:

是否选中

Type: boolean

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

setChecked(checked)

Description:

设置复选框的选中状态（如果当前项有group分组，设为true会自动取消同组其他项的选中）

Example

程序勾选某个菜单复选框：

FineUI.ui.mnuShowToolbar.setChecked(true);

Parameters:

Name	Type	Description
`checked`	boolean	选中状态

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

beforeclick

Description:

点击菜单复选框之前触发（返回false则不执行点击操作）

Parameters:

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

beforehide

Description:

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

Inherited From:

FineUI.Component#event:beforehide

beforeshow

Description:

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

Inherited From:

FineUI.Component#event:beforeshow

checkchange

Description:

菜单复选框选中状态改变时触发

Parameters:

Name	Type	Description
`event`	jQuery.Event	事件对象
`checked`	boolean	是否选中

click

Description:

点击菜单复选框时触发（返回false则不执行handler方法）

Parameters:

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

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 });
        }
    }
});