Button

FineUI. Button

new Button(options)

Description:

  • 按钮控件

Examples

创建按钮，使用参数handler来指定点击按钮时执行的代码：

FineUI.create({
	type: 'button', renderTo: document.body, text: '按钮',
	handler: function () {
		FineUI.alert('你点击了按钮');
	}
});

也可以通过FineUI.Button#event:click来设置按钮的点击事件处理函数，通过这种方式设置的代码会先于handler执行：

FineUI.create({
	type: 'button', renderTo: document.body, text: '按钮',
	listeners: {
		click: function (event) {
			FineUI.alert('你点击了按钮');
		}
	}
});

使用参数icon指定按钮图标，或者参数iconFont指定图标字体：

FineUI.create({
	type: 'button', renderTo: document.body, text: '按钮', icon: '../res/icon/tag_green.png'
});

按钮可以被按下，使用参数enableToggle来启用，并通过pressed设置当前的状态：

FineUI.create({
	type: 'button', renderTo: document.body, text: '按钮', enableToggle: true, pressed: true
});

按钮菜单可以使用参数menu来设置，拥有菜单的按钮会在右侧显示一个箭头图标，点击按钮时弹出菜单：

FineUI.create({
	type: 'button', renderTo: document.body, text: '按钮', iconFont: 'bank',
	menu: {
		type: 'menu',
		items: [{
			type: 'menuitem', text: '菜单一'
		}, {
			type: 'menuitem', text: '菜单二', icon: '../res/icon/tag_pink.png', href: 'http://www.ustc.edu.cn/', hrefTarget: '_blank'
		}]
	}
});
Parameters:
Name Type Description
options Object

初始参数

Properties
Name Type Default Description
text string ''

显示文本
scale string 'normal'

按钮的大小（可选项为：small, normal, medium, large）
enablePress boolean false

是否启用按下状态
pressed boolean false

是否处于按下状态
icon string ''

图标
iconFont string ''

图标字体
iconFontCls string ''

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

按钮图标的位置（可选项为：left, right, top, bottom）
validateForm string ''

需要验证的表单
validateForms Array.<string>

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

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

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

是否启用徽标
badgeText string ''

徽标文本
badgeType string 'information'

徽标类型（可选项为：information, error, success, warning）
badgeAnimationType string 'none'

徽标动画类型（可选项为：none, processing, fade, shake, move）
tabIndex number 0

TAB键导航的顺序
type string 'button'

控件类型

Extends

Members

el :jQuery

Description:

  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

Methods

click()

Description:

  • 点击按钮

disable()

Description:

  • 禁用控件

Inherited From:

doLayout(startFormTopmostComonentopt)

Description:

  • 执行布局操作

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

从最顶层的控件开始布局

enable()

Description:

  • 启用控件

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:

  • 隐藏控件

Inherited From:

hidePopEl()

Description:

  • 隐藏弹出菜单

isDisabled() → {boolean}

Description:

  • 是否禁用

Inherited From:
Returns:

是否禁用

Type
boolean

isPressed() → {boolean}

Description:

  • 是否处于按下状态

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, fn)

Description:

  • 移除事件

Inherited From:
Parameters:
Name Type Description
eventNames string

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

之前注册的事件处理函数

on(eventNames, fn)

Description:

  • 注册事件

Inherited From:
Parameters:
Name Type Description
eventNames string

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

触发事件时执行的函数

remove()

Description:

  • 删除父控件中移除当前控件

Inherited From:

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

节点属性对象

setBadge(badge, badgeText, badgeType, badgeAnimationType)

Description:

  • 设置徽标

Parameters:
Name Type Description
badge boolean

是否启用徽标
badgeText string

徽标文本
badgeType string

徽标类型（可选项为：information, error, success, warning）
badgeAnimationType string

徽标动画类型（可选项为：none, processing, fade, shake, move）

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.button1.setIcon('../res/images/16/1.png');
Parameters:
Name Type Description
icon string

图标地址

setIconFont(iconFont)

Description:

  • 设置图标字体

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

图标字体

setMenu(menu)

Description:

  • 设置菜单

Parameters:
Name Type Description
menu Object | string

菜单对象或者菜单标识符

setPressed(pressed)

Description:

  • 设置按下状态

Parameters:
Name Type Description
pressed boolean

按下状态

setSize(width, height)

Description:

  • 设置控件尺寸

Inherited From:
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:

  • 显示控件

Inherited From:

showPopEl()

Description:

  • 显示弹出菜单

toggleEnabled()

Description:

  • 切换启用状态

Inherited From:

togglePressed()

Description:

  • 切换按下状态

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:

render

Description:

  • 渲染控件时触发

Inherited From:

show

Description:

  • 显示控件时触发

Inherited From: