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

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

FineUI.create({
	type: 'Button', renderTo: document.body, text: '按钮', enablePress: 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

是否启用按下状态
enableToggle boolean

[已废弃] 旧版本属性名，请改用 enablePress。兼容性保留：若用户传入此参数会被识别并启用按下状态（与 enablePress 等价）。
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

getEncodedText(text) → {string}

Description:

  • 获取编码后的字符串

Inherited From:
Parameters:
Name Type Description
text string

原始字符串
Returns:

编码后的字符串

Type
string

hidePopEl()

Description:

  • 隐藏弹出菜单

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

showPopEl()

Description:

  • 显示弹出菜单

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: