JqueryUI - 按钮小部件
jQueryUI 提供了 button() 方法来将 HTML 元素（如按钮、输入和锚点）转换为主题按钮，自动管理鼠标在它们上面的移动，所有这些都由 jQuery UI 透明地管理。
为了对单选按钮进行分组，Button 还提供了一个额外的小部件，称为 Buttonset。Buttonset 通过选择一个容器元素（包含单选按钮）并调用 .buttonset() 来使用。
语法
button() 方法有两种使用方式 −
$ (selector, context).button (options) 方法
button (options) 方法声明 HTML 元素应被视为按钮。 options 参数是一个指定按钮行为和外观的对象。
语法
$(selector, context).button (options);
您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −
$(selector, context).button({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 −
| 序号 | 选项 & 说明 |
|---|---|
| 1 | disabled
此选项停用设置为 true 的按钮。 默认情况下，它的值为 false。 |
| 2 | icons
此选项指定一个或两个图标将显示在左侧的 button: primary 图标和右侧的辅助图标中。 主图标由对象的 primary 属性标识，secondary 图标由 secondary 属性标识。 默认情况下，它的值为 primary: null, secondary: null。 |
| 3 | label
此选项指定要在覆盖自然标签的按钮上显示的文本。 如果省略，则显示元素的自然标签。在单选按钮和复选框的情况下，自然标签是与控件关联的 <label> 元素。 默认情况下，它的值为 null。 |
| 4 | text
此选项指定是否要在按钮上显示文本。 如果指定为 false，则当（且仅当）图标选项指定至少一个图标时，文本才会被抑制。 默认情况下，它的值为 true。 |
默认功能
以下示例演示了按钮小部件功能的一个简单示例，不向 button() 方法传递任何参数。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-1, #button-2, #button-3, #button-4" ).button();
$( "#button-5" ).buttonset();
});
</script>
</head>
<body>
<button id = "button-1">A button element</button>
<input id = "button-2" type = "submit" value = "A submit button">
<a id = "button-3" href = "">An anchor</a>
<input type = "checkbox" id = "button-4" >
<label for = "button-4">Toggle</label>
<br><br>
<div id = "button-5">
<input type = "checkbox" id = "check1">
<label for = "check1">Left</label>
<input type = "checkbox" id = "check2">
<label for = "check2">Middle</label>
<input type = "checkbox" id = "check3">
<label for = "check3">Right</label>
</div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 buttonexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
此示例演示了可用于按钮的标记:按钮元素、提交类型的输入和锚点。
使用图标、文本和禁用
下面的例子演示了JqueryUI的按钮函数中icons、text和disabled两个选项的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-6" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
$( "#button-7" ).button({
disabled:true
});
$( "#button-8" ).button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
});
});
</script>
</head>
<body>
<button id = "button-6">
Button with icon only
</button>
<button id = "button-7">
Button Disabled
</button>
<button id = "button-8">
Button with two icons
</button>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 buttonexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在这里你可以看到一个只有图标的按钮，一个有两个图标的按钮和一个禁用的按钮。
$ (selector, context).button ("action", params) 方法
button ("action", params) 方法可以对按钮执行操作，例如禁用按钮。 该操作在第一个参数中指定为字符串（例如，"disable"以禁用按钮）。 在下表中查看可以传递的操作。
语法
$(selector, context).button ("action", params);
下表列出了可与此方法一起使用的不同动作 −
| 序号 | 操作 & 说明 |
|---|---|
| 1 | destroy
此操作完全删除元素的按钮功能。 元素返回到它们的预初始化状态。 此方法不接受任何参数。 |
| 2 | disable
此操作禁用元素的按钮功能。 此方法不接受任何参数。 |
| 3 | enable
此操作启用元素的按钮功能。 此方法不接受任何参数。 |
| 4 | option( optionName )
此操作检索在 optionName 中指定的选项的值。 其中 optionName 是一个字符串。 |
| 5 | option
此操作检索包含表示当前按钮选项哈希的键/值对的对象。 |
| 6 | option( optionName, value )
此操作设置与指定的 optionName 关联的按钮选项的值。 |
| 7 | option( options )
此操作为按钮设置一个或多个选项。 其中 options 是要设置的选项值对的映射。 |
| 8 | refresh
此操作刷新按钮的显示。 当按钮由程序处理并且显示不一定对应于内部状态时，这很有用。 此方法不接受任何参数。 |
| 9 | widget
此操作返回一个包含按钮元素的 jQuery 对象。 此方法不接受任何参数。 |
示例
现在让我们看一个使用上表中的操作的示例。 以下示例演示了 destroy() 和 disable() 方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-9" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#button-9" ).button('destroy');
$( "#button-10" ).button({
icons: {
primary: "ui-icon-seek-prev"
}
});
$( "#button-10" ).button('disable');
$( "#button-11" ).button({
text: false,
icons: {
primary: "ui-icon-play"
}
});
});
</script>
</head>
<body>
<button id = "button-9">
I'm destroyed
</button>
<button id = "button-10">
I'm disabled
</button>
<button id = "button-11">
play
</button>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 buttonexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
按钮上的事件管理
除了我们在前面部分看到的按钮（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −
| 序号 | 事件方法 & 说明 |
|---|---|
| 1 | create(event, ui)
创建按钮时会触发此事件。 其中event是Event类型，ui是Object类型。 |
示例
以下示例演示了按钮小部件功能的事件方法用法。 这个例子演示了事件 create 的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
<script>
$(function() {
$( "#button-12" ).button({
create: function() {
$("p#result").html ($("p#result")
.html () + "<b>created</b><br>");
}
});
});
</script>
</head>
<body>
<button id = "button-12">
A button element
</button>
<p class = "resultarea" id = result></p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 buttonexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
