JqueryUI - 按钮( Button)
jQueryUI提供了button（）方法，用于将HTML元素（如按钮，输入和锚点）转换为可主题按钮，并自动管理鼠标移动，所有这些都由jQuery UI透明地管理。
为了对单选按钮进行分组，Button还提供了一个名为Buttonset的附加小部件。 通过选择容器元素（包含单选按钮）和调用.buttonset() 。
语法 (Syntax)
button()方法可以使用两种形式 -
$ (selector, context).button（选项）方法
button (options)方法声明应将HTML元素视为按钮。 options参数是一个对象，它指定按钮的行为和外观。
语法 (Syntax)
$(selector, context).button (options);
您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项，则您将使用逗号分隔它们，如下所示 -
$(selector, context).button({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同options -
| Sr.No. | 选项和说明 |
|---|---|
| 1 | disabled 此选项取消激活该按钮设置为true 。 默认情况下，其值为false 。 |
| 2 | icons 此选项指定button: primary中将显示一个或两个图标button: primary左侧的button: primary图标，右侧的辅助图标。 主要图标由对象的primary属性标识， secondary图标由次要属性标识。 默认情况下，其值为primary: null, secondary: null 。 |
| 3 | label 此选项指定要在覆盖自然标签的按钮上显示的文本。 如果省略，则显示元素的自然标签。 对于单选按钮和复选框，自然标签是与控件关联的 默认情况下，其值为null 。 |
| 4 | text 此选项指定是否在按钮上显示文本。 如果指定为false ，则仅当（并且仅当）icons选项指定至少一个图标时，才会禁止文本。 默认情况下，其值为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)方法可以对按钮执行操作，例如禁用按钮。 该操作在第一个参数中指定为字符串（例如，“禁用”以禁用按钮）。 请查看下表中可以传递的操作。
语法 (Syntax)
$(selector, context).button ("action", params);
下表列出了此方法可以使用的不同actions -
| Sr.No. | 行动和描述 |
|---|---|
| 1 | destroy 此操作完全删除元素的按钮功能。 元素返回到pre-init状态。 此方法不接受任何参数。 |
| 2 | disable 此操作会禁用元素的按钮功能。 此方法不接受任何参数。 |
| 3 | enable 此操作启用元素的按钮功能。 此方法不接受任何参数。 |
| 4 | option( optionName ) 此操作检索optionName指定的选项的值。 其中optionName是一个String。 |
| 5 | option 此操作检索包含表示当前按钮选项哈希的键/值对的对象。 |
| 6 | option( optionName, value ) 此操作设置与指定的optionName关联的按钮选项的值。 |
| 7 | option( options ) 此操作为按钮设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。 |
| 8 | refresh 此操作会刷新按钮的显示。 当程序处理按钮并且显示器不一定对应于内部状态时，这很有用。 此方法不接受任何参数。 |
| 9 | widget 此操作返回包含button元素的jQuery对象。 此方法不接受任何参数。 |
例子 (Example)
现在让我们看一个使用上表中的操作的示例。 以下示例演示了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还提供了针对特定事件触发的事件方法。 这些事件方法如下 -
| Sr.No. | 事件方法和描述 |
|---|---|
| 1 | create(event, ui) 创建按钮时会触发此事件。 其中event是Event类型， ui是Object类型。 |
例子 (Example)
以下示例演示了按钮窗口小部件功能的事件方法用法。 此示例演示了事件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的标准浏览器中打开它，您还必须看到以下输出 -
新页面打开