本文概述
jQuery UI button()方法用于转换HTML元素(如按钮, 输入和锚点等)。它将HTML元素转换为可主题化的按钮, 并自动管理鼠标的移动。它们全部由jQuery UI透明管理。
句法:
你可以以两种形式使用button()方法:
$(selector, context).button (options) Method
$(selector, context).button ("action", params) Method
第一种方法
button(选项)方法指定将HTML元素视为按钮。这里的选项?参数是一个对象, 它指定按钮的行为和外观。
句法:
$(selector, context).button (options);
你可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项, 则必须使用逗号将它们分开, 如下所示:
$(selector, context).button({option1: value1, option2: value2..... });
以下是可用于此方法的选项列表:
选项 | 描述 |
---|---|
disabled | 如果将此选项设置为true, 它将禁用该按钮。默认情况下, 其值为false。 |
icons | 此选项指定要在按钮中显示一个或两个图标:左侧为主要图标, 右侧为次要图标。主要图标由对象的主要属性标识, 而次要图标则由辅助属性标识。默认情况下, 其主要和次要值设置为NULL。 |
label | 此选项指定覆盖自然标签的按钮上显示的文本。对于单选按钮和复选框, 自然标签是与控件关联的<label>元素。默认情况下, 其值为NULL。 |
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
使用图标, 文字和禁用:
让我们以一个示例来演示jQueryUI的按钮功能中选项图标, 文本和禁用的用法。
<!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>
立即测试
第二种方法
按钮(“操作”, 参数)方法用于对按钮执行操作, 例如禁用按钮。在这里吗?在第一个参数中指定为字符串(例如, “ disable”以禁用按钮)。
句法:
$(selector, context).button ("action", params);
以下是可与该方法一起使用的不同操作的列表:
行动 | 描述 |
---|---|
destroy | 此操作用于完全删除元素的按钮功能, 并强制元素返回其预初始化状态。此方法不接受任何参数。 |
disable | 此操作用于禁用元素的按钮功能。此方法不接受任何参数。 |
enable | 此操作用于启用元素的按钮功能。此方法不接受任何参数。 |
option( optionName ) | 此操作将检索optionName中指定的选项的值。这里的optionName是一个字符串。 |
option | 此操作将检索一个对象, 该对象包含表示当前按钮选项哈希的键/值对。 |
option( optionName, value ) | 此操作设置与指定的optionName关联的按钮选项的值。 |
option( options ) | 此操作为按钮设置一个或多个选项。这里的options是要设置的option-value对的映射。 |
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>
立即测试
评论前必须登录!
注册