Tool

FineUI. Tool

工具图标控件

Constructor

new Tool(options)

Examples

工具图标通常作为FineUI.Panel/FineUI.Grid标题栏右侧的小图标按钮使用：

FineUI.create({
	type: 'Panel', renderTo: document.body, width: 600, height: 200, title: '面板', bodyPadding: 10,
	tools: [
		{ type: 'Tool', iconFont: 'refresh', tooltip: '刷新', handler: function () { FineUI.alert('刷新'); } },
		{ type: 'Tool', iconFont: 'gear', tooltip: '设置' },
		{ type: 'Tool', iconFont: 'close', tooltip: '关闭' }
	]
});

工具图标可以挂菜单，类似FineUI.Button：

FineUI.create({
	type: 'Panel', renderTo: document.body, width: 600, height: 200, title: '面板', bodyPadding: 10,
	tools: [{
		type: 'Tool', iconFont: 'gear', tooltip: '设置',
		menu: {
			type: 'Menu',
			items: [
				{ type: 'MenuItem', text: '导出' },
				{ type: 'MenuItem', text: '打印' }
			]
		}
	}]
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
icon string ''

图标
iconFont string ''

图标字体
iconFontCls string ''

自定义图标字体的样式类
text string ''

显示文本
onClientClick string | function ''

点击时执行的客户端脚本，排在 click 事件之前执行（链条：表单验证 → beforeclick → 本项 → click 事件 → handler），返回 false 中断后续。传函数则直接使用；传字符串则经 new Function 编译（不推荐：页面开启 CSP 时必须放行 script-src 'unsafe-eval'，请改用 listeners.click 具名回调）
validateForm string ''

点击前需要验证的表单标识符（验证不通过则不触发后续点击逻辑）
validateForms Array.<string>

点击前需要验证的表单标识符数组
validateTarget string '_self'

验证失败时提示对话框的弹出位置（可选项为：_self, _parent, _top）
validateMessageBox boolean true

验证失败时是否出现提示对话框
validateMessageBoxPlain boolean false

验证失败的提示对话框是否使用简洁按钮样式
type string 'Tool'

控件类型

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

getText() → {string}

Description:

  • 获取按钮文本

Returns:

按钮文本

Type
string

getTooltip() → {string}

Description:

  • 获取提示信息

Inherited From:
Returns:

提示信息

Type
string

getWidth() → {number}

Description:

  • 获取控件宽度

Inherited From:
Returns:

宽度

Type
number

hasIcon() → {boolean}

Description:

  • 是否有图标

Returns:

是否有图标

Type
boolean

hide()

Description:

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

Inherited From:
Example

根据权限隐藏按钮：

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

hidePopEl()

Description:

  • 隐藏弹出菜单

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

节点属性对象

setClickHandler(clickHandler)

Description:

  • 运行时换掉 click 事件的处理函数（服务端 ClickHandler 属性的回发下发点）。 传的是全局函数名（不是脚本串，因此不经 new Function、不需 unsafe-eval）； 只换掉上一次绑上的那一份，不影响其它人给 click 挂的监听。传空串即摘除绑定。

Example
FineUI.ui.tool1.setClickHandler('onRefreshClick');
Parameters:
Name Type Description
clickHandler string

全局函数名（回调首参恒为 event）

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

是否隐藏

setIcon(icon)

Description:

  • 设置图标地址

Example
FineUI.ui.tool1.setIcon('../res/images/16/1.png');
Parameters:
Name Type Description
icon string

图标地址

setIconFont(iconFont)

Description:

  • 设置图标字体

Example
FineUI.ui.tool1.setIconFont('bank');
Parameters:
Name Type Description
iconFont string

图标字体

setMenu(menu)

Description:

  • 设置菜单

Parameters:
Name Type Description
menu Object | string

菜单对象或者菜单标识符

setOnClientClick(onClientClick)

Description:

  • 设置客户端点击脚本（在 click 事件之前执行，返回 false 中断后续；禁用态下不触发）。 传函数则直接使用；传字符串则经 new Function 编译（不推荐：页面开启 CSP 时必须放行 script-src 'unsafe-eval'，请改用 listeners.click 具名回调）。

Parameters:
Name Type Description
onClientClick string | function

客户端脚本或函数

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

高度

setText(text)

Description:

  • 设置按钮文本

Parameters:
Name Type Description
text string

按钮文本

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

showPopEl()

Description:

  • 显示弹出菜单

toggleEnabled()

Description:

  • 切换启用状态

Inherited From:

toggleVisible()

Description:

  • 切换显示状态

Inherited From:

trigger(eventName, args)

Description:

  • 触发事件

Inherited From:
Parameters:
Name Type Description
eventName string

事件名称
args Object

事件参数

Events

beforeclick

Description:
Parameters:
Name Type Description
event jQuery.Event

事件对象

beforehide

Description:

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

Inherited From:

beforeshow

Description:

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

Inherited From:

click

Description:

  • 点击工具图标时触发（返回false则不执行handler方法）

Parameters:
Name Type Description
event jQuery.Event

事件对象

hide

Description:

  • 隐藏控件时触发

Inherited From:

layout

Description:

  • 布局控件时触发

Inherited From:

remove

Description:

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

Inherited From:

render

Description:

  • 渲染控件时触发

Inherited From:

show

Description:

  • 显示控件时触发

Inherited From: