jQuery UI 可调整大小 destroy() 方法(1)

📌 相关文章

📜 jQuery UI 可调整大小 destroy() 方法(1)

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

jQuery UI 可调整大小 destroy() 方法

简介

jQuery UI 是一款非常受欢迎的 JavaScript 库，它为 HTML 元素提供了丰富的交互特性和可定制性。其中之一是可调整大小（resizable）函数，它允许用户改变元素的大小并适应屏幕的大小调整。

当然，有时候你需要暂时禁止这个功能，这就需要用到可调整大小的 destroy() 方法。

使用方法

调用 destroy() 方法后，将取消已添加的可调整大小的属性，并将元素恢复为原始状态。

$(selector).resizable("destroy");

其中，selector 为需要取消可调整大小功能的元素的选择器。

示例

<!DOCTYPE html>
<html>
<head>
   <title>jQuery UI 可调整大小 destroy() 方法</title>
   <link rel="stylesheet" href="https:/code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <style>
      #resizable {
         width: 150px;
         height: 150px;
         border: 1px solid #eee;
      }
   </style>
   <script>
      $( function() {
         $( "#resizable" ).resizable();
      } );
      function destroyResize() {
         $( "#resizable" ).resizable("destroy");
      }
   </script>
</head>
<body>
   <div id="resizable"></div>
   <button onclick="destroyResize()">取消可调整大小功能</button>
</body>
</html>

运行此代码，您将看到一个可调整大小的矩形。当您单击“取消可调整大小”按钮后，您将无法再调整矩形的大小。

总结

使用 jQuery UI 可调整大小 destroy() 方法可以方便地取消已添加到元素的可调整大小功能。这对于需要根据特定条件禁用该功能的应用程序非常有用。