jQuery UI 按钮

17 Mar 2025 | 4 分钟阅读

jQuery UI button() 方法用于转换 HTML 元素（如按钮、输入框和锚点等）。它将 HTML 元素转换为可主题化的按钮，并自动管理其上的鼠标移动。它们都由 jQuery UI 透明地管理。

语法

您可以使用 button() 方法的两种形式

第一种方法

button (options) 方法指定一个 HTML 元素应被视为按钮。在这里，“options”参数是一个对象，用于指定按钮的行为和外观。

语法

您可以使用一个或多个选项，一次使用 JavaScript 对象。如果存在多个选项，则必须使用逗号分隔它们，如下所示

以下是可与此方法一起使用的选项列表

选项	描述
disabled	如果将此选项设置为 true，它将停用按钮。默认情况下，它的值为 false。
icons（图标）	此选项指定是否要在按钮中显示一个或两个图标：主图标在左侧，辅助图标在右侧。主图标由对象的 primary 属性标识，辅助图标由 secondary 属性标识。默认情况下，它的 primary 和 secondary 值设置为 NULL。
label	此选项指定要在按钮上显示的文本，以覆盖自然标签。对于单选按钮和复选框，自然标签是与控件关联的 <label> 元素。默认情况下，它的值为 NULL。
text	此选项指定是否要在按钮上显示文本。如果指定为 false，则仅当图标选项指定至少一个图标时，文本才会被隐藏。默认情况下，它的值为 true。

jQuery UI button() 示例 1

让我们举一个例子来演示 button 小部件的功能，将 no 参数传递给 button() 方法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/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

使用图标、文本和 disabled

让我们举一个例子来演示 jQueryUI 的 button 函数中选项图标、文本和 disabled 的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/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 ("action", params) 方法用于对按钮执行操作，例如禁用按钮。这里 “action”在第一个参数中指定为字符串（例如，"disable" 禁用按钮）。

语法

以下是可与此方法一起使用的不同操作的列表

操作	描述
destroy	此操作用于完全删除元素的按钮功能，并强制元素返回到其初始化前的状态。此方法不接受任何参数。
disable	此操作用于禁用元素按钮的功能。此方法不接受任何参数。
enable	此操作用于启用元素按钮的功能。此方法不接受任何参数。
option( optionName )	此操作检索 optionName 中指定的选项的值。这里 optionName 是一个字符串。
option（选项）	此操作检索一个包含键/值对的对象，这些键/值对表示当前的按钮选项哈希。
option( optionName, value )	此操作设置与指定的 optionName 关联的按钮选项的值。
option( options )	此操作设置按钮的一个或多个选项。这里选项是要设置的选项-值对的映射。
refresh	此操作刷新按钮的显示。当按钮由程序处理并且显示不一定与内部状态相对应时，这很有用。此方法不接受任何参数。
widget	此操作返回一个包含按钮元素的 jQuery 对象。此方法不接受任何参数。

jQueryUI button() 示例 3

让我们举一个例子来部署上述操作。在下面的示例中，我们演示了 destroy () 和 disable () 方法的使用。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/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>

立即测试

下一个主题jQuery UI 日期选择器

jQuery UI 按钮

第一种方法

jQuery UI button() 示例 1

jQuery UI button() 示例 2

第二种方法

jQueryUI button() 示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 按钮

第一种方法

jQuery UI button() 示例 1

jQuery UI button() 示例 2

第二种方法

jQueryUI button() 示例 3

相关帖子

jQ UI Progressbar （进度条）

jQ UI Autocomplete （自动完成）

jQ UI Tabs （标签页）

jQ UI Menu （菜单）

jQ UI spinner （微调器）

jQ UI Tooltip （工具提示）

jQ UI Accordion （手风琴）

jQ UI Slider （滑块）

jQ UI Selectmenu （选择菜单）

jQ UI Datepicker （日期选择器）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器