jQuery UI Button和Buttonset小部件
时间：2020-02-23 14:46:16 来源:igfitidea点击:
jQuery UI提供了两个名为Button和Buttonset Widget的小部件，用于创建主题化按钮。
我们可以使用这些小部件来增强按钮，输入，锚点等标准表单元素的外观。
这些小部件使用jQuery UI CSS框架来增强其外观。
按钮和按钮集
我们还可以使用Button小部件将单选按钮和复选框转换为主题按钮。
Buttonset小部件可用于将相关按钮分组为一组，例如将单选按钮分组。
我们可以分别使用buttonset()和button()方法访问Buttonset和Button小部件。
由于这些小部件组合到一个文件中，因此您可以在Button小部件中使用Buttonset来使用所有方法。
按钮小部件选项
在本节中，我们将讨论可用于自定义jQueryUI Button小部件的不同选项。
| Options | Usage | Description |
|---|---|---|
| disabled | $( ".selector"; ).button({,disabled: true}); | Disables the buttons it it is set to true. |
| icons | $( ".selector"; ).button({icons: { primary: "ui-icon-gear";, secondary: "ui-icon-triangle-1-s"; }}); | Specifies how icons are displayed, with or without text. By default, the primary icon is displayed on the left of the text and the secondary is displayed on its right. |
| label | $( ".selector"; ).button({label: "custom label";}); | Text displayed in the button. |
| text | $( ".selector"; ).button({text: false}); | Boolean value. Determines whether the text should display or not. the icons options should be enabled if its value is set to false. |
按钮小部件方法
在本节中，我们将研究jQueryUI Button小部件方法及其语法。
当您处理Button和Buttonset小部件时，这些方法非常有用。
| Methods | Usage | Description |
|---|---|---|
| destroy | $( ".selector"; ).button( "destroy"; ); | Removes the functionality completely. |
| disable | $( ".selector"; ).button( "disable"; ); | Disables the functionality |
| enable | $( ".selector"; ).button( "enable"; ); | Enables the functionality. |
| option | $( ".selector"; ).button( "option";, "disabled"; ) | Gets the current value associated with the specified optionName. |
| refresh | $( ".selector"; ).button( "refresh"; ); | Refresh the visual state. |
| widget | $( ".selector"; ).button( "widget"; ); | Returns a jQuery object containing the button widget. |
按钮小部件事件
jQuery UI中只有一个与按钮小部件关联的事件，即create事件。
| Event | Usage | Description |
|---|---|---|
| create( event, ui ) | $( ".selector"; ).button({,create: function( event, ui ) {}}); | Event is triggered when the button is created. |
实际中的按钮小部件
在本节中，我们将介绍Button和Buttonset小部件中可用的一些方法和选项。
简单按钮示例
以下示例演示了" button()"的默认功能。
在下面的示例中，您将看到如何为简单的按钮元素和锚元素创建主题按钮。
simplebutton.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("a, button")
.button()
.click(function(event) {
event.preventDefault();
});
});
</script>
</head>
<body>
<button>Simple button</button>
<a href="#">Simple Anchor</a>
</body>
</html>
您将在浏览器中看到以下输出。
简单按钮集示例
以下示例演示了buttonset()的用法。
simpleButtonset.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI ButtonSet</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#radio").buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="rad1" name="radio">
<label for="rad1">Cricket</label>
<input type="radio" id="rad3" name="radio" checked="checked">
<label for="rad3">KickBoxing</label>
<input type="radio" id="rad2" name="radio">
<label for="rad2">Football</label>
</div>
</form>
</body>
</html>
您将在浏览器中看到以下输出。
使用icons和nextoptions
以下示例演示了按钮小部件中可用的" icons"和" text"选项的用法。
buttonIcons.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("button:first").button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
</script>
</head>
<body>
<button>First button</button>
<button>Second button</button>
<button>Third Button</button>
</body>
</html>
您将在浏览器中看到以下输出。
因为我们将textoption的值设置为false，所以第一个和第三个按钮显示为无文本。
"主要"图标显示在左侧，"次要"图标显示在右侧。
