Jquery UI教程

jQuery UI Button

jQuery UI button()方法用于转换HTML元素(如button,input等)。它使用以下命令将HTML元素转换为可主题化的按钮: 自动管理鼠标移动。它们全部由jQuery UI透明管理。
语法:
您可以以两种形式使用button()方法:
$(selector, context).button (options)
$(selector, context).button ("action", params)

第一个方法

button (options)方法指定将HTML元素视为按钮。这里的options参数是一个对象,它指定按钮的行为和外观。
语法:
$(selector, context).button (options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:
$(selector, context).button({option1: value1, option2: value2..... });
以下是可以与该方法一起使用的选项列表:
选项 说明
disabled 如果将此选项设置为true,它将禁用该按钮。默认情况下,其值为false。
icons 此选项指定在按钮上显示一个或两个图标: 左侧为主要图标,右侧为次要图标。主要图标由对象的主要属性标识,而次要图标则由对象标识次要属性。默认情况下,其主要和次要值设置为NULL。
label 此选项指定覆盖自然标签的按钮上显示的文本。对于单选按钮和复选框,自然标签是与控件关联的
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

icon,text和disabled的使用:
让我们举一个例子在jQueryUI的按钮功能中演示选项icon,text和disabled选项的用法。
<!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>

第二种方法

button({option1: value1, option2: value2..... })方法用于对按钮执行操作,例如禁用按钮,在第一个参数中指定为字符串(例如," disable"以禁用按钮)。
语法:
$(selector, context).button ("action", params);
以下是可与该方法一起使用的不同操作的列表:
动作 说明
disable 此操作用于完全删除元素的按钮功能,并强制元素返回其初始状态。此方法不接受任何参数。
disable 此操作用于禁用元素的按钮功能。此方法不接受任何参数。
enable 此操作用于启用元素的按钮功能。此方法不接受任何参数。
option(optionName) 此操作将检索optionName中指定的选项的值。这里的optionName是一个字符串。
option 此操作将检索一个对象,该对象包含表示当前按钮选项哈希的键/值对。
option(optionName,value) 此操作设置与指定的optionName关联的按钮选项的值。
option(options) 此操作为按钮设置一个或多个选项。这里的选项是要设置的选项-值对的映射。
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>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4