jQuery UI API - Button component (Button Widget)
category
usage
Description: themable buttons and buttons.
New version: 1.8
Button component (Button Widget) strengthen the functionality of the standard form elements, such as buttons (button), the input (input), anchors (anchor), with the appropriate hover (hover) and activation (active) style to the theme of the button.
In addition to the basic buttons, radio buttons and check boxes (input type radio and checkbox) can also be converted to a button. Related tags (label) is designed button styles, update the underlying input clicked. In order to work properly, you need to input a id
attribute, and point to label (label) is for
property. Do not input on the label (label) inside, otherwise it will cause accessibility problems .
For packet radio buttons, Button also provides an additional widget named Buttonset. Buttonset by selecting a container element (including radio buttons) and call .buttonset()
to use. Buttonset also provides a visual grouping, so when there is a button can consider using it. It selects all descendants and their application .button()
. You can enable and disable a set of buttons, which will enable and disable all buttons included. Destruction Button rally calling each button's destroy
method. For radio buttons and checkboxes button grouping is recommended to use with the legend
of the fieldset
to provide an accessible packet label.
When using a type of button, submit or reset the input, support is limited to plain text without icon labels.
Theming
Button component (Button Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the specified style buttons, you can use the following CSS class name:
-
ui-button
: DOM elements representing the button. This element will be based on text and icons to add one of the following class options:ui-button-text-only
,ui-button-icon-only
,ui-button-icons-only
,ui-button-text-icons
.-
ui-button-icon-primary
: the main elements of the button icons for display. Only when the main icon of icons provide options when presented. -
ui-button-text
: a container around the text content of a button. -
ui-button-icon-secondary
: The secondary display buttons for icons. Only when the secondary icon icons provide options when presented.
-
-
ui-buttonset
: Buttonset outer container.
rely
Additional information
- The part requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget specified CSS file as a starting point.
Quick navigation
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
disabled | Boolean | 如果设置为 true ,则禁用该 button。代码实例: 初始化带有指定 $( ".selector" ).button({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).button( "option", "disabled" ); // setter $( ".selector" ).button( "option", "disabled", true ); |
false |
icons | Object | 要显示的图标,包括带有文本的图标和不带有文本的图标(查看 text 选项)。默认情况下 ,主图标显示在标签文本的左边,副图标显示在右边。显示位置可通过 CSS 进行控制。 代码实例: 初始化带有指定 $( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }); 在初始化后,获取或设置 // getter var icons = $( ".selector" ).button( "option", "icons" ); // setter $( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } ); |
{ primary: null, secondary: null } |
label | String | 要显示在按钮中的文本。当未指定时( null ),则使用元素的 HTML 内容,或者如果元素是一个 submit 或 reset 类型的 input 元素,则使用它的 value 属性,或者如果元素是一个 radio 或 checkbox 类型的 input 元素,则使用相关的 label 元素的 HTML 内容。代码实例: 初始化带有指定 $( ".selector" ).button({ label: "custom label" }); 在初始化后,获取或设置 // getter var label = $( ".selector" ).button( "option", "label" ); // setter $( ".selector" ).button( "option", "label", "custom label" ); |
null |
text | Boolean | 是否显示标签。当设置为 false 时,不显示文本,但是此时必须启用 icons 选项,否则 text 选项将被忽略。 代码实例: 初始化带有指定 $( ".selector" ).button({ text: false }); 在初始化后,获取或设置 // getter var text = $( ".selector" ).button( "option", "text" ); // setter $( ".selector" ).button( "option", "text", false ); |
true |
方法 | 返回 | 描述 |
---|---|---|
destroy() | jQuery (plugin only) | 完全移除 button 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: $( ".selector" ).button( "destroy" ); |
disable() | jQuery (plugin only) | 禁用 button。
代码实例: 调用 disable 方法: $( ".selector" ).button( "disable" ); |
enable() | jQuery (plugin only) | 启用 button。
代码实例: 调用 enable 方法: $( ".selector" ).button( "enable" ); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).button( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 button 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).button( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 button 选项的值。
代码实例: 调用该方法: $( ".selector" ).button( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 button 设置一个或多个选项。
代码实例: 调用该方法: $( ".selector" ).button( "option", { disabled: true } ); |
refresh() | jQuery (plugin only) | 刷新按钮的视觉状态。用于在以编程方式改变原生元素的选中状态或禁用状态后更新按钮状态。
代码实例: 调用 refresh 方法: $( ".selector" ).button( "refresh" ); |
widget() | jQuery | 返回一个包含 button 的 jQuery 对象。
代码实例: 调用 widget 方法: var widget = $( ".selector" ).button( "widget" ); |
事件 | 类型 | 描述 |
---|---|---|
create( event, ui ) | buttoncreate | 当创建按钮 button 时触发。
注意: 代码实例: 初始化带有指定 create 回调的 button: $( ".selector" ).button({ create: function( event, ui ) {} }); 绑定一个事件监听器到 buttoncreate 事件: $( ".selector" ).on( "buttoncreate", function( event, ui ) {} ); |
Examples
Example 1:A simple jQuery UI button (Button).
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> button member (Button Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Head> <Body> <Button> button label </ button> <Script> $ ( "Button") .button (); </ Script> </ Body> </ Html>Example 2:
A simple jQuery UI button set (Buttonset).
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> button member (Button Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Head> <Body> <Form> <Fieldset> <Legend> favorite jQuery project </ legend> <Div id = "radio"> <Input type = "radio" id = "sizzle" name = "project"> <Label for = "sizzle"> Sizzle </ label> <Input type = "radio" id = "qunit" name = "project" checked = "checked"> <Label for = "qunit"> QUnit </ label> <Input type = "radio" id = "color" name = "project"> <Label for = "color"> Color </ label> </ Div> </ Fieldset> </ Form> <Script> $ ( "#radio") .buttonset (); </ Script> </ Body> </ Html>