Button

F. Button

new Button(options)

Description:
  • 按钮控件

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

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

图标地址

setIconFont(iconFont)

Description:
  • 设置图标字体

Example
F.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: