ToolbarSeparator

FineUI. ToolbarSeparator

工具栏分隔符控件

Constructor

new ToolbarSeparator(options)

Example

工具栏分隔符，用于在视觉上把按钮分组。也可用字符串'-'快捷书写：

FineUI.create({
	type: 'Panel', renderTo: document.body, width: 600, height: 150, title: '面板', bodyPadding: 10,
	bars: [{
		type: 'Toolbar',
		items: [
			{ type: 'Button', text: '新建' },
			{ type: 'Button', text: '打开' },
			{ type: 'ToolbarSeparator' },
			{ type: 'Button', text: '保存' },
			'-',  		// 等价于 { type: 'ToolbarSeparator' }
			{ type: 'Button', text: '删除' }
		]
	}]
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
type string 'ToolbarSeparator'

控件类型

Extends

Members

el :jQuery

Description:

  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

Methods

disable()

Description:

  • 禁用控件（按钮变灰、表单字段不可输入；可用isDisabled查询当前状态）

Inherited From:
Example

提交期间禁用按钮，避免重复提交（用 jQuery 的 $.ajax）：

FineUI.create({
    type: 'Button', text: '提交',
    handler: function () {
        var me = this;
        me.disable();
        $.ajax({
            url: '/api/save', method: 'POST', dataType: 'json',
            complete: function () {
                me.enable();
            }
        });
    }
});

doLayout(startFormTopmostComonentopt)

Description:

  • 执行布局操作

Inherited From:
Parameters:
Name Type Attributes Default Description
startFormTopmostComonent boolean <optional>
 false

从最顶层的控件开始布局

enable()

Description:

  • 启用控件（与disable对应）

Inherited From:

getAttr(key) → {string}

Description:

  • 获取节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键
Returns:

节点属性值

Type
string

getEncodedText(text) → {string}

Description:

  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串
Returns:

编码后的字符串

Type
string

getHeight() → {number}

Description:

  • 获取控件高度

Inherited From:
Returns:

高度

Type
number

getTooltip() → {string}

Description:

  • 获取提示信息

Inherited From:
Returns:

提示信息

Type
string

getWidth() → {number}

Description:

  • 获取控件宽度

Inherited From:
Returns:

宽度

Type
number

hide()

Description:

  • 隐藏控件（默认通过 CSS display:none 隐藏；可通过hiddenMode选择 visibility/offsets 模式以保留布局空间）

Inherited From:
Example

根据权限隐藏按钮：

if (!currentUser.canEdit) {
    FineUI.ui.btnEdit.hide();
}

isDisabled() → {boolean}

Description:

  • 是否禁用

Inherited From:
Returns:

是否禁用

Type
boolean

isType(value) → {boolean}

Description:

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

Inherited From:
Example
grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true
Parameters:
Name Type Description
value Object

控件类型
Returns:

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

Type
boolean

isVisible() → {boolean}

Description:

  • 是否可见

Inherited From:
Returns:

是否可见

Type
boolean

off(eventNames, fnopt)

Description:

  • 移除事件

Inherited From:
Examples

移除特定回调：

function onMyClick() { ... }
FineUI.ui.btn1.on('click', onMyClick);
// 后续解绑：
FineUI.ui.btn1.off('click', onMyClick);

移除某事件下的全部回调（不传 fn 参数）：

FineUI.ui.btn1.off('click');
Parameters:
Name Type Attributes Description
eventNames string

事件名称（可以空格分割多个事件名称）
fn F_Component_on <optional>

之前注册的事件处理函数（留空则移除该事件的所有回调）

on(eventNames, fn)

Description:

  • 注册事件（运行时绑定；与配置参数listeners的初始绑定等价，但可在控件创建后动态追加）

Inherited From:
Examples

初始绑定形态：在FineUI.create时通过listeners配置项一次性声明：

FineUI.create({
    type: 'Button', renderTo: document.body, text: '按钮',
    listeners: {
        click: function (event) {
            FineUI.alert('button clicked');
        },
        // 同一个 listeners 内可以同时声明多个事件
        beforeclick: function (event) {
            // 返回 false 可阻止 click 事件
        }
    }
});

运行时绑定形态：控件创建后通过on()追加，效果与上面的listeners等价：

FineUI.ui.btn1.on('click', function (event) {
    FineUI.alert('button clicked');
});

on()一次绑定多个事件（事件名之间空格分隔）：

FineUI.ui.tbxName.on('focus blur', function () {
    console.log('focus 或 blur 触发');
});
Parameters:
Name Type Description
eventNames string

事件名称（可以空格分割多个事件名称）
fn F_Component_on

触发事件时执行的函数

remove()

Description:

  • 从父控件中移除当前控件并销毁其 DOM（不可恢复；移除后 FineUI.ui[id] 也会清除）。触发 remove 事件可用于清理外部资源。

Inherited From:
Example

动态添加 + 移除子控件：

var btn = FineUI.create({
    type: 'Button', text: '临时按钮', renderTo: document.body
});
// 5 秒后移除
setTimeout(function () {
    btn.remove();
}, 5000);

removeAttr(key)

Description:

  • 删除节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

removeTooltip()

Description:

  • 删除提示信息

Inherited From:

setAttr(key, value)

Description:

  • 设置节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键
value string

节点属性值

setAttrs(attrs)

Description:

  • 设置节点属性

Inherited From:
Parameters:
Name Type Description
attrs Object

节点属性对象

setDisabled(disabled)

Description:

  • 设置控件的禁用状态

Inherited From:
Parameters:
Name Type Description
disabled boolean

是否禁用

setEnabled(enabled)

Description:

  • 设置控件的启用状态

Inherited From:
Parameters:
Name Type Description
enabled boolean

是否启用

setHeight(height)

Description:

  • 设置控件高度

Inherited From:
Parameters:
Name Type Description
height number

高度

setHidden(hidden)

Description:

  • 设置控件的隐藏状态

Inherited From:
Parameters:
Name Type Description
hidden boolean

是否隐藏

setSize(width, height)

Description:

  • 设置控件尺寸（同时设置宽高；等价于setWidth + setHeight但只触发一次布局）

Inherited From:
Example

响应窗口 resize 调整面板尺寸：

$(window).on('resize', function () {
    FineUI.ui.panel1.setSize($(window).width() - 20, $(window).height() - 40);
});
Parameters:
Name Type Description
width number

宽度
height number

高度

setTooltip(tooltip)

Description:

  • 设置提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息

setVisible(visible)

Description:

  • 设置控件的显示状态

Inherited From:
Parameters:
Name Type Description
visible boolean

是否可见

setWidth(width)

Description:

  • 设置控件宽度

Inherited From:
Parameters:
Name Type Description
width number

宽度

show()

Description:

  • 显示控件（与hide对应）

Inherited From:
Example

根据下拉列表的选中项，联动显示某区块：

FineUI.ui.ddlType.on('change', function () {
    if (this.getValue() === 'advanced') {
        FineUI.ui.pnlAdvanced.show();
    } else {
        FineUI.ui.pnlAdvanced.hide();
    }
});

toggleEnabled()

Description:

  • 切换启用状态

Inherited From:

toggleVisible()

Description:

  • 切换显示状态

Inherited From:

trigger(eventName, args)

Description:

  • 触发事件

Inherited From:
Parameters:
Name Type Description
eventName string

事件名称
args Object

事件参数

Events

beforehide

Description:

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

Inherited From:

beforeshow

Description:

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

Inherited From:

hide

Description:

  • 隐藏控件时触发

Inherited From:

layout

Description:

  • 布局控件时触发

Inherited From:

remove

Description:

  • 移除控件时触发（调用 remove() 时，控件 DOM 被销毁之前触发；可用于清理外部资源 / 解绑全局事件）

Inherited From:

render

Description:

  • 渲染控件时触发

Inherited From:

show

Description:

  • 显示控件时触发

Inherited From: