jQuery UI按钮 jQueryUI按钮|jQueryUI

本文概述

第一种方法
jQuery UI button()示例1
jQuery UI button()示例2
第二种方法
jQueryUI button()示例3

jQuery UI button()方法用于转换HTML元素（如按钮, 输入和锚点等）。它将HTML元素转换为可主题化的按钮, 并自动管理鼠标的移动。它们全部由jQuery UI透明管理。
句法：
你可以以两种形式使用button()方法：

$(selector, context).button (options) Method

$(selector, context).button ("action", params) Method

第一种方法button（选项）方法指定将HTML元素视为按钮。这里的选项？参数是一个对象, 它指定按钮的行为和外观。
【jQuery UI按钮】句法：

$(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://img.readke.com/220430/000340E11-0.jpg"> < /script> < script src="http://img.readke.com/220430/000340D02-1.jpg"> < /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="http://www.srcmini.com/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://img.readke.com/220430/000340E11-0.jpg"> < /script> < script src="http://img.readke.com/220430/000340D02-1.jpg"> < /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://img.readke.com/220430/000340E11-0.jpg"> < /script> < script src="http://img.readke.com/220430/000340D02-1.jpg"> < /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>

立即测试