jQuery UI API - componente Button (Botón Widget)
categoría
uso
Descripción: Botones themable y botones.
Nueva versión: 1.8
componente Button (Botón de widgets) reforzar la funcionalidad de los elementos del formulario estándar, como los botones (botón), la entrada (input), anclas (ancla), con la libración apropiada (flotar) y el estilo de activación (activo) con el tema del botón.
Además de los botones básicos, botones de radio y casillas de verificación (radio tipo de entrada y casilla de verificación) también se pueden convertir a un botón. Versiones (etiqueta) está diseñado estilos de botón, actualice la entrada subyacente ha hecho clic. Con el fin de que funcione correctamente, es necesario introducir un id
de atributo, y el punto de la etiqueta (etiqueta) es for
propiedad. No entrada en la etiqueta (etiqueta) en el interior, de lo contrario, causar problemas de accesibilidad .
Para los botones de radio por paquetes, Button también ofrece un widget de adicional denominado Buttonset. Buttonset mediante la selección de un elemento contenedor (incluyendo botones de radio) y llamar a .buttonset()
para su uso. Buttonset también proporciona una agrupación visual, por lo que cuando hay un botón se puede considerar el uso de la misma. Se selecciona todos los descendientes y su aplicación .button()
. Puede activar y desactivar un conjunto de botones, que se activan y desactivan todos los botones incluidos. Destrucción de rally botón llamar de cada botón destroy
método. Para los botones de radio y casillas de verificación se recomienda botón agrupación de usar con la legend
del fieldset
para proporcionar una etiqueta de paquetes accesibles.
Cuando se utiliza un tipo de botón, enviar o restablecer la entrada, el apoyo se limita a texto sin formato y sin etiquetas de los iconos.
tematización
componente Button (Botón de widgets) usando framework jQuery UI CSS para definir la apariencia de su estilo. Si es necesario utilizar los botones de estilo especificadas, puede utilizar el siguiente nombre de clase CSS:
-
ui-button
: elementos DOM que representan el botón. Este elemento se basa en el texto y los iconos para agregar una de las opciones de clase:ui-button-text-only
,ui-button-icon-only
,ui-button-icons-only
,ui-button-text-icons
.-
ui-button-icon-primary
: los principales elementos de los iconos de los botones de la pantalla. Sólo cuando el icono principal de iconos proporcionan opciones cuando se presenta. -
ui-button-text
: un contenedor de todo el contenido del texto de un botón. -
ui-button-icon-secondary
: Los botones de visualización de iconos secundarios. Sólo cuando el icono secundarias iconos proporcionan opciones cuando se presenta.
-
-
ui-buttonset
: Buttonset recipiente exterior.
confiar
información adicional
- La parte funcional requiere un poco de CSS, de lo contrario no funcionará. Si crea un tema personalizado, utilice el archivo CSS widget de especificado como un punto de partida.
La navegación rápida
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 ) {} ); |
Ejemplos
Ejemplo 1:Un botón de jQuery UI sencilla (botón).
<! DOCTYPE html> <Html lang = "es"> <Head> <Charset Meta = "UTF-8"> <Título> miembro de botón (botón 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> <Cuerpo> <Botón> etiqueta del botón </ botón> <Script> $ ( "Botón") .button (); </ Script> </ Body> </ Html>Ejemplo 2:
Un conjunto simple jQuery UI botón (Buttonset).
<! DOCTYPE html> <Html lang = "es"> <Head> <Charset Meta = "UTF-8"> <Título> miembro de botón (botón 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> <Cuerpo> <Forma> <Fieldset> <Leyenda> proyecto favorito jQuery </ legend> <Div id = "radio"> <Input type = "radio" id = "chisporroteo" name = "proyecto"> <Label for = "chisporroteo"> chisporroteo </ label> <Input type = "radio" id = "qunit" name = "proyecto" marcada = "marcada"> <Label for = "qunit"> QUnit </ label> <Input type = "radio" id = nombre de "color" = "proyecto"> <Label for = "color"> Color </ label> </ Div> </ Fieldset> </ Form> <Script> $ ( "#radio") .buttonset (); </ Script> </ Body> </ Html>