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 ''

显示文本
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

节点属性对象

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

菜单对象或者菜单标识符

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: