JqueryUI教程

JqueryUI - 按钮

← 上一节 下一节 →

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

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

语法

button()方法可用于两种形式 :

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

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


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

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

语法

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


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

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


下表列出了可与此方法一起使用的不同选项 :

Sr.No.选项&描述
1disabled

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

选项 - 已停用

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

语法 

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

此选项指定在按钮中显示一个或两个图标:左侧是主图标，右侧是次要图标.主要图标由对象的 primary 属性标识， secondary 图标由secondary属性标识.默认情况下，其值为 primary:null，secondary:null .

选项 - 图标

此选项指定在按钮中显示一个或两个图标:左侧是主图标，右侧是次要图标.主要图标由对象的 primary 属性标识， secondary 图标由secondary属性标识.默认情况下，其值为 primary:null，secondary:null .

语法 

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

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

选项 - 标签

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

语法 

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

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

选项 - 文字

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

语法 

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

默认功能

以下示例演示了按钮小部件功能的简单示例，不将参数传递给按钮()方法.

<!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的按钮功能中两个选项图标，文本和禁用的用法.

<!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) 方法

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

Syntax

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

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

Sr.No.Action & Description
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)

创建按钮时会触发此事件.其中事件的类型为事件，而 ui 的类型为 Object .

事件 - 创建(事件，ui)

创建按钮元素时会触发此事件.其中事件的类型为事件，而 ui 的类型为 Object .

语法 

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

示例

以下示例演示按钮窗口小部件功能的事件方法用法.此示例演示了事件创建的使用.

<!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的标准浏览器中打开它，你还必须看到以下输出 :

← 上一节 下一节 →

相关菜鸟教程