个性化阅读
专注于IT技术分析

jQuery UI按钮

点击下载

本文概述

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>

立即测试

赞(0)
未经允许不得转载:srcmini » jQuery UI按钮

评论 抢沙发

评论前必须登录!