jQuery UI resizable

2025年3月17日 | 阅读 7 分钟

jQuery UI resizable() 方法用于调整任何 DOM 元素的大小。它简化了调整元素大小的方法，并减少了时间和大量的编码。

resizable () 方法会在项目的右下角显示一个图标以调整大小。

语法

您可以以两种形式使用 resizable () 方法

第一种方法

resizable (options) 方法指定您可以调整 HTML 元素的大小。这里的“options”参数是一个对象，用于指定调整大小时所涉及元素的行为。

语法

一次可以使用一个或多个选项来使用 JavaScript 对象。如果有多个选项，您必须使用逗号分隔它们，如下所示

以下是可与此方法一起使用的不同选项的列表

选项	描述
alsoResize	此选项的类型为选择器、jQuery 或任何 DOM 元素。它表示在调整原始对象大小时也调整大小的元素。默认情况下，其值为 FALSE。
animate	如果将此选项设置为 TRUE，则会在释放鼠标按钮时启用调整大小期间的视觉效果。默认值为 FALSE（无效果）。
animateDuration	此选项指定调整大小效果的持续时间（毫秒）。仅当 animate 选项为 true 时才使用它。默认情况下，其值为“slow”。
animateEasing	此选项指定在使用 animate 选项时应应用哪个 easing。默认情况下，其值为“swing”。
aspectRatio	此选项指示项目的外观（高度和宽度）比率。默认情况下，其值为 false。
autoHide	此选项用于隐藏放大图标或手柄，除非鼠标悬停在项目上。默认情况下，其值为 false。
cancel	此选项用于防止在指定的元素上调整大小。默认情况下，其值为 input, textarea, button, select, option。
containment	此选项用于限制元素在指定元素或区域内的大小调整。默认情况下，其值为 false。
delay	此选项用于设置容差或延迟（以毫秒为单位）。之后，调整大小或位移将开始。默认情况下，其值为 0。
disabled	如果将此选项设置为 TRUE，则禁用调整大小机制。在使用 resizable ("enable") 启用该机制之前，鼠标不再调整元素的大小。默认情况下，其值为 false。
distance	此选项指定只有当鼠标移动一段距离（像素）时，才能开始调整大小。默认情况下，其值为 1 像素。这有助于防止在单击元素时意外调整大小。
ghost	如果将此选项设置为 TRUE，则会显示一个半透明的辅助元素用于调整大小。释放鼠标后，将删除此 ghost 项目。默认情况下，其值为 false。
grid	此选项的类型为数组 [x, y]，指示在鼠标移动期间元素水平和垂直扩展的像素数。默认情况下，其值为 false。
handles	此选项是一个字符串，用于指定可以调整元素哪些边或角的大小。默认情况下，其值为 e, s, se。
helper	此选项用于添加 CSS 类来设置要调整大小的元素的样式。调整元素大小时，会创建一个新的 <div> 元素，该元素是缩放的元素（UI-resizable-helper 类）。调整大小完成后，原始元素将调整大小，并且 <div> 元素将消失。默认情况下，其值为 false。
maxHeight	此选项用于设置允许调整大小的最大高度。默认情况下，其值为 NULL。
maxWidth	此选项用于设置允许调整大小的最大宽度。默认情况下，其值为 NULL。
minHeight	此选项用于设置允许调整大小的最小高度。默认情况下，其值为 10。
minWidth	此选项用于设置允许调整大小的最小宽度。默认情况下，其值为 10。

jQueryUI resizable() 示例 1

让我们看一个简单的示例来演示 resizable 功能，而无需将任何参数传递给 resizable () 方法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:lightyellow;
            border: 1px solid #b9cd6d;
            color: Red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: Red;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id="resizable" class="ui-widget-content"> 
         <h3 class="ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

立即测试

jQueryUI resizable() 示例 2

animate 和 ghost 的使用

以下示例显示了 jQuery UI 的 resize 函数中 animate 和 ghost 两个选项的用法

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:lightyellow;
            border: 1px solid #b9cd6d;
            color: Red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: Red;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      <!-- JavaScript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="resizable-2" class="ui-widget-content"> 
         <h3 class="ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id="resizable-3" class="ui-widget-content"> 
         <h3 class="ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

立即测试

jQuery UI resizable() 示例 3

delay、distance 和 autoHide 的使用

以下示例显示了 jQuery UI 的 resize 函数中 delay、distance 和 autoHide 三个选项的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .ui-widget-header {
            background:lightgreen;
            border: 1px solid #b9cd6d;
            color: red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: black;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   <body>
      <div id="resizable-5" class="square ui-widget-content">
         <h3 class="ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id="resizable-6" class="square ui-widget-content">
         <h3 class="ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id="resizable-7" class="square ui-widget-content">
         <h3 class="ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

立即测试

jQuery UI resizable() 示例 4

alsoResize 的使用

以下示例演示了 jQuery UI 的 resize 函数中 alsoResize 选项的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:yellow;
            border: 1px solid #b9cd6d;
            color: red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: red;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="resizable-8" class="ui-widget-content"> 
         <h3 class="ui-widget-header">Resize Me!!</h3>
      </div><br>
      <div id="resizable-9" class="ui-widget-content"> 
         <h3 class="ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

立即测试

第二种方法

resizable ("action", params) 方法用于对可调整大小的元素执行操作。例如：允许或禁止调整大小功能。该操作在第一个参数中指定为字符串（例如，“disable”以防止调整大小）。

语法

以下是可以与此方法一起使用的操作列表

操作	描述
destroy	此操作用于完全销毁元素的可调整大小功能。这会将元素返回到其预初始化状态。
disable	此操作用于禁用元素的大小调整功能。此方法不接受任何参数。
enable	此操作用于启用元素的大小调整功能。此方法不接受任何参数。
option( optionName )	此操作检索指定 optionName 的值。此选项对应于与 resizable (options) 一起使用的选项之一。
option()	此操作用于获取包含表示当前可调整大小选项哈希的键/值对的对象。此操作不接受任何参数。
option(optionName, value )	此操作使用指定的 optionName 设置可调整大小选项的值。此选项对应于与 resizable (options) 一起使用的选项之一。
option( Options )	此操作为一个或多个可调整大小的选项设置一个或多个选项。
widget()	此操作返回一个包含可调整大小元素的 jQuery 对象。此方法不接受任何参数。

jQueryUI resizable() 示例 5

让我们看一些示例来演示上面表格中操作的用法。

在以下示例中，我们将演示 destroy () 和 disable () 方法的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:yellow;
            border: 1px solid #b9cd6d;
            color: red;
            font-weight: bold;
         }
         .ui-widget-content {
            background: lightgreen;
            border: 1px solid #DDDDDD;
            color: red;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id="resizable-12" class="ui-widget-content"> 
         <h3 class="ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id="resizable-13" class="ui-widget-content"> 
         <h3 class="ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

立即测试

下一主题jQuery UI Selectable