jQuery按钮组件的用法（附带实例）

可以使用带有适当悬停（hover）和激活（active）样式的可主题化按钮（Button）来优化标准表单元素（例如按钮、输入框等）。可用于按钮的标记实例主要有 <button> 元素或者类型为 submit 的 <input> 元素。

除了基本的按钮，单选按钮和复选框（类型为 radio 和 checkbox 的 <input> 元素）也可以转换为按钮。为了将单选按钮分组，按钮也提供了一个额外的小部件，名为 Buttonset。

Buttonset 通过选择一个容器元素（包含单选按钮）并调用 .buttonset() 来分组。Buttonset 也提供了可视化分组，因此当单选按钮需要分组时可以考虑使用它。

按钮部件（Button Widget）使用 jQuery UI CSS 框架来定义它的外观和感观的样式。如果需要使用按钮指定的样式，则可以使用如下 CSS class 名称：

ui-button：表示按钮的 DOM 元素。该元素会根据 text 和 icons 选项添加下列 CSS class 名称之一：
- ui-button-text-only;
- ui-button-icon-only;
- ui-button-icons-only;
- ui-button-text-icons。
ui-button-icon-primary：用于显示按钮主要图标的元素。只有当主要图标在 icons 选项中提供时才显示；
ui-button-text：在按钮文本内容周围的容器；
ui-button-icon-secondary：用于显示按钮次要图标的元素。只有当次要图标在 icons 选项中提供时才显示；
ui-buttonset：Buttonset 的外层容器。

按钮的常用选项及说明如下表所示：

表：按钮的常用选项及说明
选项	类型	说明
disabled	Boolean	如果设置为 true，则禁用该按钮
icons	Object	要显示的图标，包括带有文本的图标和不带文本的图标。默认情况下，主要图标显示在标签文本的左边，次要图标显示在标签文本的右边
label	String	要显示在按钮中的文本内容。当未指定时（选项值为 null），使用元素的 HTML 内容。如果元素是一个 submit 或 reset 类型的 <input> 元素，则使用它的 value 属性值；如果元素是一个 radio 或 checkbox 类型的 <input> 元素，则使用相关 <label> 元素的 HTML 内容
text	Boolean	是否显示标签。当设置为 false 时不显示文本，但是此时必须启用 icons 选项，否则 text 选项将被忽略

按钮的常用方法及说明如下表所示：

表：按钮的常用方法及说明
方法	说明
destroy()	完全移除按钮功能。这会把元素返回到它的初始化状态
disable()	禁用按钮
enable()	启用按钮
option(optionName)	获取当前与指定 optionName 参数关联的值
option()	获取一个包含键值对的对象，键值对表示当前按钮选项为 Hash
option(optionName, value)	设置与指定 optionName 参数关联的按钮选项的值
option(options)	为按钮设置一个或多个选项
refresh()	刷新按钮的视觉状态。用于在以编程方式改变原生元素的选中状态或禁用状态后刷新按钮的视觉状态
widget()	返回一个包含按钮的 jQuery 对象

按钮的常用事件及说明如下表所示：

表：按钮的常用事件及说明
事件	说明
create(event, ui)	当创建按钮时触发

【实例】分别使用 <button> 元素和类型为 submit 的 <input> 元素制作按钮。程序开发步骤如下:

新建一个 index.html；
复制 jQuery UI 文件夹 jquery-ui-1.13.2.custom 和 index.html 放在一起；
使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<title>按钮（Button）的使用</title>
<script>
$(function(){
    $("input[type=submit], a, button")
        .button()
        .click(function( event ){
            event.preventDefault();
        });
});
</script>
</head>
<body>
<button>一个button元素</button>
<input type="submit" value="一个提交按钮">
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，效果如下图所示：

图 1 按钮的应用实例

jQuery按钮组件的用法（附带实例）

相关文章