F.js - 基于 jQuery 的专业 WebUI 控件库

Class: Button

F. Button

new F.Button(options)

F.Button.js, line 3

按钮控件

Name Type Description

options

Object

初始参数

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'	控件类型

Examples

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

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

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

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

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

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

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

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

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

F.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'
		}]
	}
});

Extends

F.Component

Members

eljQuery

控件对应的jQuery节点对象

Methods

click() F.Button.js, line 175

点击按钮

inherited disable() F.Component.js, line 236

禁用控件

inherited doLayout(startFormTopmostComonent) F.Component.js, line 122

执行布局操作

Name	Type	Default	Description
`startFormTopmostComonent`	boolean	false	optional 从最顶层的控件开始布局

inherited enable() F.Component.js, line 242

启用控件

inherited getAttr(key){string} F.Component.js, line 101

获取节点属性

Name	Type	Description
`key`	string	节点属性键

Returns:

Type	Description
string	节点属性值

inherited getHeight(){number} F.Component.js, line 136

获取控件高度

Returns:

Type	Description
number	高度

getText(){string} F.Button.js, line 163

获取按钮文本

Returns:

Type	Description
string	按钮文本

inherited getTooltip(){string} F.Component.js, line 196

获取提示信息

Returns:

Type	Description
string	提示信息

inherited getWidth(){number} F.Component.js, line 130

获取控件宽度

Returns:

Type	Description
number	宽度

hasIcon(){boolean} F.Button.js, line 141

是否有图标

Returns:

Type	Description
boolean	是否有图标

inherited hide() F.Component.js, line 262

隐藏控件

hidePopEl() F.Button.js, line 108

隐藏弹出菜单

inherited isDisabled(){boolean} F.Component.js, line 224

是否禁用

Returns:

Type	Description
boolean	是否禁用

isPressed(){boolean} F.Button.js, line 123

是否处于按下状态

Returns:

Type	Description
boolean	是否处于按下状态

inherited isType(value){boolean} F.Base.js, line 23

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

Name	Type	Description
`value`	Object	控件类型

Returns:

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

Example

grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true

inherited isVisible(){boolean} F.Component.js, line 216

是否可见

Returns:

Type	Description
boolean	是否可见

inherited off(eventNames, fn) F.Component.js, line 181

移除事件

Name	Type	Description
`eventNames`	string	事件名称（可以空格分割多个事件名称）
`fn`	F_Component_on	之前注册的事件处理函数

inherited on(eventNames, fn) F.Component.js, line 174

注册事件

Name	Type	Description
`eventNames`	string	事件名称（可以空格分割多个事件名称）
`fn`	F_Component_on	触发事件时执行的函数

inherited remove() F.Component.js, line 115

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

inherited removeAttr(key) F.Component.js, line 108

删除节点属性

Name	Type	Description
`key`	string	节点属性键

inherited removeTooltip() F.Component.js, line 208

删除提示信息

inherited setAttr(key, value) F.Component.js, line 94

设置节点属性

Name	Type	Description
`key`	string	节点属性键
`value`	string	节点属性值

inherited setAttrs(attrs) F.Component.js, line 86

设置节点属性

Name	Type	Description
`attrs`	Object	节点属性对象

setBadge(badge, badgeText, badgeType, badgeAnimationType) F.Button.js, line 94

设置徽标

Name	Type	Description
`badge`	boolean	是否启用徽标
`badgeText`	string	徽标文本
`badgeType`	string	徽标类型（可选项为：information, error, success, warning）
`badgeAnimationType`	string	徽标动画类型（可选项为：none, processing, fade, shake, move）

inherited setDisabled(disabled) F.Component.js, line 248

设置控件的禁用状态

Name	Type	Description
`disabled`	boolean	是否禁用

inherited setEnabled(enabled) F.Component.js, line 254

设置控件的启用状态

Name	Type	Description
`enabled`	boolean	是否启用

inherited setHeight(height) F.Component.js, line 143

设置控件高度

Name	Type	Description
`height`	number	高度

inherited setHidden(hidden) F.Component.js, line 286

设置控件的隐藏状态

Name	Type	Description
`hidden`	boolean	是否隐藏

setIcon(icon) F.Button.js, line 149

设置图标地址

Name	Type	Description
`icon`	string	图标地址

Example

F.ui.button1.setIcon('../res/images/16/1.png');

setIconFont(iconFont) F.Button.js, line 157

设置图标字体

Name	Type	Description
`iconFont`	string	图标字体

Example

F.ui.button1.setIconFont('bank');

setMenu(menu) F.Button.js, line 101

设置菜单

Name	Type	Description
`menu`	Object \| string	菜单对象或者菜单标识符

setPressed(pressed) F.Button.js, line 129

设置按下状态

Name	Type	Description
`pressed`	boolean	按下状态

inherited setSize(width, height) F.Component.js, line 158

设置控件尺寸

Name	Type	Description
`width`	number	宽度
`height`	number	高度

setText(text) F.Button.js, line 169

设置按钮文本

Name	Type	Description
`text`	string	按钮文本

inherited setTooltip(tooltip) F.Component.js, line 202

设置提示信息

Name	Type	Description
`tooltip`	string	提示信息

inherited setVisible(visible) F.Component.js, line 280

设置控件的显示状态

Name	Type	Description
`visible`	boolean	是否可见

inherited setWidth(width) F.Component.js, line 150

设置控件宽度

Name	Type	Description
`width`	number	宽度

inherited show() F.Component.js, line 268

显示控件

showPopEl() F.Button.js, line 114

显示弹出菜单

inherited toggleEnabled() F.Component.js, line 230

切换启用状态

togglePressed() F.Button.js, line 134

切换按下状态

inherited toggleVisible() F.Component.js, line 274

切换显示状态

inherited trigger(eventName, args) F.Component.js, line 189

触发事件

Name	Type	Description
`eventName`	string	事件名称
`args`	Object	事件参数

Events

beforeclick F.Button.js, line 72

点击事件之前触发（返回false则不执行F.Button#event:click事件）

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

inherited beforehide F.Component.js, line 57

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

inherited beforeshow F.Component.js, line 69

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

click F.Button.js, line 79

点击时触发（返回false则不执行handler方法）

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

inherited hide F.Component.js, line 63

隐藏控件时触发

inherited layout F.Component.js, line 45

布局控件时触发

inherited render F.Component.js, line 51

渲染控件时触发

inherited show F.Component.js, line 75

显示控件时触发

F.js v7.1.0

Class: Button

new F.Button(options)

Examples

Extends

Members

eljQuery

Methods

click()

inherited disable()

inherited doLayout(startFormTopmostComonent)

inherited enable()

inherited getAttr(key){string}

Returns:

inherited getHeight(){number}

Returns:

getText(){string}

Returns:

inherited getTooltip(){string}

Returns:

inherited getWidth(){number}

Returns:

hasIcon(){boolean}

Returns:

inherited hide()

hidePopEl()

inherited isDisabled(){boolean}

Returns:

isPressed(){boolean}

Returns:

inherited isType(value){boolean}

Returns:

Example

inherited isVisible(){boolean}

Returns:

inherited off(eventNames, fn)

inherited on(eventNames, fn)

inherited remove()

inherited removeAttr(key)

inherited removeTooltip()

inherited setAttr(key, value)

inherited setAttrs(attrs)

setBadge(badge, badgeText, badgeType, badgeAnimationType)

inherited setDisabled(disabled)

inherited setEnabled(enabled)

inherited setHeight(height)

inherited setHidden(hidden)

setIcon(icon)

Example

setIconFont(iconFont)

Example

setMenu(menu)

setPressed(pressed)

inherited setSize(width, height)

setText(text)

inherited setTooltip(tooltip)

inherited setVisible(visible)

inherited setWidth(width)

inherited show()

showPopEl()

inherited toggleEnabled()

togglePressed()

inherited toggleVisible()

inherited trigger(eventName, args)

Events

beforeclick

inherited beforehide

inherited beforeshow

click

inherited hide

inherited layout

inherited render

inherited show