# 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
  显示控件时触发