jQuery UI 按钮 enable() 方法(1)

📌 相关文章

📜 jQuery UI 按钮 enable() 方法(1)

📅 最后修改于: 2023-12-03 15:16:45.864000 🧑 作者: Mango

jQuery UI 按钮 enable() 方法

简介

jQuery UI 是 jQuery 的一个扩展组件库，能够提供一些常用且易于使用的 UI 组件和交互效果。其中，按钮（button）组件是其重要组成部分之一，可以创建不同样式，不同功能的按钮。

jQuery UI 按钮组件提供了前端开发人员以 enable() 方法控制按钮的启用或禁用状态，使得用户在特定情况下能够更好地根据不同的状态做出不同的操作。

语法

语法格式如下：

$( ".selector" ).button( "enable" )

这里的 .selector 是你要选择的按钮元素的选择器字符串。

参数

该方法不接受任何参数。

返回值

该方法不返回任何值。

示例

示例1：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮 enable() 方法</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(document).ready(function(){
      $(".enable-button").click(function(){
        $("#my-button").button("enable");
      });
      
      $(".disable-button").click(function(){
        $("#my-button").button("disable");
      });
    });
  </script>
</head>
<body>
 
<div class="demo">

<!-- 创建一个按钮并设置 id 为 my-button -->
<button id="my-button">点击我</button>
 
<!-- 两个按钮，用于设置上面的按钮的可用与否 -->
<div class="button-row">
  <button class="enable-button">启用</button>
  <button class="disable-button">禁用</button>
</div>
 
</div>
 
<script>
$(function() {
  $( "#my-button" ).button();
});
</script>

</body>
</html>

以上程序展示了如何使用 jQuery UI 创建一个按钮，并通过按钮设置其他按钮的可用状态。通过调用 enable() 或 disable() 方法，能够让按钮变为可用或禁用。

示例2：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 按钮 enable() 方法</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(document).ready(function(){
      $(".enable-button").click(function(){
        $("#my-button").button("enable");
      });
      
      $(".disable-button").click(function(){
        $("#my-button").button("disable");
      });
    });
  </script>
</head>
<body>
 
<div class="demo">

<!-- 创建一个按钮并设置 id 为 my-button -->
<button id="my-button">点击我</button>
 
<!-- 两个按钮，用于设置上面的按钮的可用与否 -->
<div class="button-row">
  <button class="enable-button">启用</button>
  <button class="disable-button">禁用</button>
</div>
 
</div>
 
<script>
$(function() {
  $( "#my-button" ).button();
});
</script>

</body>
</html>

以上程序展示了如何使用 jQuery UI 的时候创建一个按钮，并通过调用该按钮上的 enable() 和 disable() 方法启用或禁用按钮。