登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

按钮（Button）

优质
小牛编辑
131浏览
2023-12-01

jQueryUI提供了button（）方法，用于将HTML元素（如按钮，输入和锚点）转换为可主题按钮，并自动管理鼠标移动，所有这些都由jQuery UI透明地管理。

为了对单选按钮进行分组，Button还提供了一个名为Buttonset的附加小部件。 通过选择容器元素（包含单选按钮）和调用.buttonset() 。

语法 (Syntax)

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

  • $(selector, context).button (options)方法

  • $(selector, context).button ("action", params)方法

$ (selector, context).button（选项）方法

button (options)方法声明应将HTML元素视为按钮。 options参数是一个对象，它指定按钮的行为和外观。

语法 (Syntax)

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

您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项，则您将使用逗号分隔它们，如下所示 -

$(selector, context).button({option1: value1, option2: value2..... });

下表列出了可与此方法一起使用的不同options -

Sr.No.选项和说明
1disabled

此选项取消激活该按钮设置为true 。 默认情况下，其值为false 。

Option - disabled

此选项取消激活该按钮设置为true 。 默认情况下，其值为false 。

Syntax

$( ".selector" ).button({ disabled: true });
2icons

此选项指定button: primary中将显示一个或两个图标button: primary左侧的button: primary图标，右侧的辅助图标。 主要图标由对象的primary属性标识， secondary图标由次要属性标识。 默认情况下，其值为primary: null, secondary: null 。

Option - icons

此选项指定button: primary中将显示一个或两个图标button: primary左侧的button: primary图标，右侧的辅助图标。 主要图标由对象的primary属性标识， secondary图标由次要属性标识。 默认情况下，其值为primary: null, secondary: null 。

Syntax

$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
3label

此选项指定要在覆盖自然标签的按钮上显示的文本。 如果省略，则显示元素的自然标签。 对于单选按钮和复选框，自然标签是与控件关联的 默认情况下，其值为null 。

Option - label

此选项指定要在覆盖自然标签的按钮上显示的文本。 如果省略，则显示元素的自然标签。 对于单选按钮和复选框，自然标签是与控件关联的 默认情况下，其值为null 。

Syntax

$( ".selector" ).button({ label: "custom label" });
4text

此选项指定是否在按钮上显示文本。 如果指定为false ，则仅当（并且仅当）icons选项指定至少一个图标时，才会禁止文本。 默认情况下，其值为true 。

Option - text

此选项指定是否在按钮上显示文本。 如果指定为false ，则仅当（并且仅当）icons选项指定至少一个图标时，才会禁止文本。 默认情况下，其值为true 。

Syntax

$( ".selector" ).button({ text: false });

默认功能

以下示例演示了按钮窗口小部件功能的简单示例，不向button()方法传递任何参数。

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

让我们将上述代码保存在HTML文件buttonexample.htm ，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。

此示例演示了可用于按钮的标记:按钮元素，提交类型的输入和锚点。

使用图标，文本和禁用

以下示例演示了JqueryUI的按钮功能中两个选项icons ， text和disabled的用法。

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

让我们将上述代码保存在HTML文件buttonexample.htm ，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。

在这里，您可以看到一个只有图标的按钮，一个带有两个图标的按钮和一个禁用按钮。

$ (selector, context).button（“action”，params）方法

button ("action", params)方法可以对按钮执行操作，例如禁用按钮。 该操作在第一个参数中指定为字符串（例如，“禁用”以禁用按钮）。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No.行动和描述
1destroy

此操作完全删除元素的按钮功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy

此操作完全删除元素的按钮功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

$( ".selector" ).button("destroy");
2disable

此操作会禁用元素的按钮功能。 此方法不接受任何参数。

Action - disable

此操作会禁用元素的按钮功能。 此方法不接受任何参数。

Syntax

$( ".selector" ).button("disable");
3enable

此操作启用元素的按钮功能。 此方法不接受任何参数。

Action - enable

此操作启用元素的按钮功能。 此方法不接受任何参数。

Syntax

$( ".selector" ).button("enable");
4option( optionName )

此操作检索optionName指定的选项的值。 其中optionName是一个String。

Action - option( optionName )

此操作检索optionName指定的选项的值。 其中optionName是一个String。

Syntax

var isDisabled = $( ".selector" ).button( "option", "disabled" );
5option

此操作检索包含表示当前按钮选项哈希的键/值对的对象。

Action - option

此操作检索包含表示当前按钮选项哈希的键/值对的对象。

Syntax

$( ".selector" ).button("option");
6option( optionName, value )

此操作设置与指定的optionName关联的按钮选项的值。

Action - option( optionName, value )

此操作设置与指定的optionName关联的按钮选项的值。 其中optionName是要设置的选项的名称， value是要为该选项设置的值。

Syntax

$( ".selector" ).button( "option", "disabled", true );
7option( options )

此操作为按钮设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Action - option( options )

此操作为按钮设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Syntax

$( ".selector" ).button( "option", { disabled: true } );
8refresh

此操作会刷新按钮的显示。 当程序处理按钮并且显示器不一定对应于内部状态时，这很有用。 此方法不接受任何参数。

Action - refresh

此操作会刷新按钮的显示。 当程序处理按钮并且显示器不一定对应于内部状态时，这很有用。 此方法不接受任何参数。

Syntax

$( ".selector" ).button("refresh");
9widget

此操作返回包含button元素的jQuery对象。 此方法不接受任何参数。

Action - widget

此操作返回包含button元素的jQuery对象。 此方法不接受任何参数。

Syntax

$( ".selector" ).button("widget");

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了destroy()和disable()方法的用法。

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

让我们将上面的代码保存在HTML文件buttonexample.htm ，并在支持javascript的标准浏览器中打开它

按钮上的事件管理

除了我们在前面部分中看到的按钮（选项）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No.事件方法和描述
1create(event, ui)

创建按钮时会触发此事件。 其中event是Event类型， ui是Object类型。

Event - create(event, ui)

创建按钮元素时会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

$( ".selector" ).button({
   create: function( event, ui ) {}
});

例子 (Example)

以下示例演示了按钮窗口小部件功能的事件方法用法。 此示例演示了事件create的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

让我们将上述代码保存在HTML文件buttonexample.htm ，并在支持javascript的标准浏览器中打开它

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn