jQuery UI Button
jQuery UI Button
jQuery UI button()方法用于转换HTML元素(如button，input等)。它使用以下命令将HTML元素转换为可主题化的按钮: 自动管理鼠标移动。它们全部由jQuery UI透明管理。
语法:
您可以以两种形式使用button()方法:
$(selector, context).button (options)
$(selector, context).button ("action", params)
第一个方法
button (options)方法指定将HTML元素视为按钮。这里的options参数是一个对象，它指定按钮的行为和外观。
语法:
$(selector, context).button (options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示:
$(selector, context).button({option1: value1, option2: value2..... });
以下是可以与该方法一起使用的选项列表:
| 选项 | 说明 |
| disabled | 如果将此选项设置为true，它将禁用该按钮。默认情况下，其值为false。 |
| icons | 此选项指定在按钮上显示一个或两个图标: 左侧为主要图标，右侧为次要图标。主要图标由对象的主要属性标识，而次要图标则由对象标识次要属性。默认情况下，其主要和次要值设置为NULL。 |
| label | 此选项指定覆盖自然标签的按钮上显示的文本。对于单选按钮和复选框，自然标签是与控件关联的 |
| text | 此选项指定是否在按钮上显示文本。如果指定为false，则在(且仅当)icons选项指定至少一个图标时，才会禁止显示文本。默认情况下，其值为true。 |
jQuery UI button()示例1
让我们以一个示例来演示按钮小部件的功能，不将任何参数传递给button()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Buttons functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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>
jQuery UI button()示例2
icon，text和disabled的使用:
让我们举一个例子在jQueryUI的按钮功能中演示选项icon，text和disabled选项的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Buttons functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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>
第二种方法
button({option1: value1, option2: value2..... })方法用于对按钮执行操作，例如禁用按钮，在第一个参数中指定为字符串(例如，" disable"以禁用按钮)。
语法:
$(selector, context).button ("action", params);
以下是可与该方法一起使用的不同操作的列表:
| 动作 | 说明 |
| disable | 此操作用于完全删除元素的按钮功能，并强制元素返回其初始状态。此方法不接受任何参数。 |
| disable | 此操作用于禁用元素的按钮功能。此方法不接受任何参数。 |
| enable | 此操作用于启用元素的按钮功能。此方法不接受任何参数。 |
| option(optionName) | 此操作将检索optionName中指定的选项的值。这里的optionName是一个字符串。 |
| option | 此操作将检索一个对象，该对象包含表示当前按钮选项哈希的键/值对。 |
| option(optionName，value) | 此操作设置与指定的optionName关联的按钮选项的值。 |
| option(options) | 此操作为按钮设置一个或多个选项。这里的选项是要设置的选项-值对的映射。 |
| refresh | 此操作将刷新按钮的显示。当按钮由程序处理且显示不一定与内部状态相对应时，此功能很有用。此方法不接受任何参数。 |
| widget | 此操作返回一个包含button元素的jQuery对象。此方法不接受任何参数。 |
jQueryUI button()示例3
我们以一个示例来部署上述操作。在下面的示例中，我们演示了destroy()和disable()方法的使用。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Buttons functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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>