HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

JqueryUI - Resizable 调整大小方法

jQueryUI 提供了 resizable() 方法来调整任何 DOM 元素的大小。 这种方法简化了元素的大小调整，否则需要时间和 HTML 中的大量编码。 resizable() 方法在要调整大小的项目的右下角显示一个图标。

语法

resizable() 方法有两种使用方式 −

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

resizable (options) 方法声明可以调整 HTML 元素的大小。 options 参数是一个对象，指定调整大小时涉及的元素的行为。

语法

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

您可以在使用 Javascript 对象时一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −

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

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

序号 选项 & 说明
1 alsoResize

此选项属于 Selector、jQuery 或任何 DOM Element 类型。 它表示在调整原始对象大小时也调整大小的元素。 默认情况下，它的值为 false。

Option - alsoResize

此选项属于 Selector、jQuery 或任何 DOM Element 类型。 它表示在调整原始对象大小时也调整大小的元素。 默认情况下，它的值为 false。

这可以是类型 −

  • Selector − 此类型表示要从 DOM 文档中选择用于调整大小的 DOM 元素。

  • jQuery − 将为页面上的每个可调整大小的元素调用回调函数。 如果调整元素的大小，此函数应返回 true。

  • Element − 文档对象模型 (DOM) 中的一个元素。

语法

$( ".selector" ).resizable({ alsoResize: "#identifier" });
2 animate

当设置为 true 时，此选项用于在释放鼠标按钮时在调整大小时启用视觉效果。 默认值为 false（无效）。

Option - animate

当设置为 true 时，此选项用于在释放鼠标按钮时在调整大小时启用视觉效果。 默认值为 false（无效）。

语法

$( ".selector" ).resizable({ animate: true });
3 animateDuration

此选项用于设置调整大小效果的持续时间（以毫秒为单位）。 此选项仅在 animate 选项为 true 时使用。 默认情况下，它的值为"slow"。

Option - animateDuration

此选项用于设置调整大小效果的持续时间（以毫秒为单位）。 此选项仅在 animate 选项为 true 时使用。 默认情况下，它的值为"slow"。

这可以是类型 −

  • Number − 这指定以毫秒为单位的持续时间

  • String − 这将指定命名的持续时间，例如 "slow" 或 "fast"

语法

$( ".selector" ).resizable({ animateDuration: "fast" });
4 animateEasing

此选项用于指定在使用 animate 选项时要应用的 easing。 默认情况下，它的值为 "swing"。

Option - animateEasing

此选项用于指定在使用 animate 选项时要应用的 easing。 默认情况下，它的值为 "swing"。

缓动函数指定动画在动画中的不同点处进行的速度。

语法

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
5 aspectRatio

此选项用于指示是否保持项目的纵横比（高度和宽度）。 默认情况下，它的值为 false。

Option - aspectRatio

此选项用于指示是否保持项目的纵横比（高度和宽度）。 默认情况下，它的值为 false。

这可以是类型 −

  • Boolean − 如果将该值设置为 true，元素将保持其原始纵横比。

  • Number − 这指定元素在调整大小时保持特定的纵横比。

语法

$( ".selector" ).resizable({ aspectRatio: true });
6 autoHide

此选项用于隐藏放大图标或手柄，除非鼠标悬停在项目上。 默认情况下，它的值为 false。

Option - autoHide

此选项用于隐藏放大图标或手柄，除非鼠标悬停在项目上。 默认情况下，它的值为 false。

语法

$( ".selector" ).resizable({ autoHide: true });
7 cancel

此选项用于防止调整指定元素的大小。 默认情况下，它的值为 input,textarea,button,select,option。

Option - cancel

此选项用于防止调整指定元素的大小。 默认情况下，它的值为 input,textarea,button,select,option。

语法

$( ".selector" ).resizable({ cancel: ".cancel" });
8 containment

此选项用于限制指定元素或区域内元素的大小调整。 默认情况下，它的值为 false。

Option - containment

此选项用于限制指定元素或区域内元素的大小调整。 默认情况下，它的值为 false。

这可以是类型 −

  • Selector − 此类型表示可调整大小的元素将仅包含在选择器找到的列表中的第一项中。

  • Element − 此类型表示任何 DOM 元素。 可调整大小的元素将包含在此元素的边界框内。

  • String − 此类型的可能值为 - parent 和 document。

语法

$( ".selector" ).resizable({ containment: "parent" });
9 delay

此选项用于以毫秒为单位设置容差或延迟。 此后将开始调整大小或位移。 默认情况下，它的值为 0。

Option - delay

此选项用于以毫秒为单位设置容差或延迟。 此后将开始调整大小或位移。 默认情况下，它的值为 0。

语法

$( ".selector" ).resizable({ delay: 150 });
10 disabled

当设置为 true 时，此选项会禁用调整大小机制。 鼠标不再调整元素的大小，直到启用该机制，使用可调整大小（"enable"）。 默认情况下，它的值为 false。

Option - disabled

当设置为 true 时，此选项会禁用调整大小机制。 鼠标不再调整元素的大小，直到启用该机制，使用可调整大小（"enable"）。 默认情况下，它的值为 false。

语法

$( ".selector" ).resizable({ disabled: true });
11 distance

使用此选项，仅当鼠标移动一段距离（像素）时才开始调整大小。 默认情况下，它的值为 1 像素。 这有助于防止在单击元素时意外调整大小。

Option - distance

使用此选项，仅当鼠标移动一段距离（像素）时才开始调整大小。 默认情况下，它的值为 1 像素。 这有助于防止在单击元素时意外调整大小。

语法

$( ".selector" ).resizable({ distance: 30 });
12 ghost

此选项设置为 true 时，会显示一个半透明的辅助元素以调整大小。 释放鼠标时，将删除此幽灵项目。 默认情况下，它的值为 false。

Option - ghost

此选项设置为 true 时，会显示一个半透明的辅助元素以调整大小。 释放鼠标时，将删除此幽灵项目。 默认情况下，它的值为 false。

语法

$( ".selector" ).resizable({ ghost: true });
13 grid

该选项的类型为数组[x, y]，表示元素在鼠标移动过程中水平和垂直扩展的像素数。 默认情况下，它的值为 false。

Option - grid

该选项的类型为数组[x, y]，表示元素在鼠标移动过程中水平和垂直扩展的像素数。 默认情况下，它的值为 false。

语法

$( ".selector" ).resizable({ grid: [ 20, 10 ] });
14 handles

该选项是一个字符串，指示元素的哪些边或角可以调整大小。 默认情况下，它的值为 e, s, se。

Option - handles

该选项是一个字符串，指示元素的哪些边或角可以调整大小。 可能的值是:n,e, s, 和 w 用于四个边，ne, se, nw, 和 sw 代表四个角。字母 n、e、s、 和 w 代表四个基点（北、南、东和西）。

默认情况下，它的值为 e, s, se。

语法

$( ".selector" ).resizable({ handles: "n, e, s, w" });
15 helper

此选项用于添加 CSS 类以设置要调整大小的元素的样式。 当元素被调整大小时，一个新的 <div> 元素被创建，这是被缩放的元素（ui-resizable-helper 类）。 调整大小完成后，将调整原始元素的大小并且 <div> 元素消失。 默认情况下，它的值为 false。

Option - helper

此选项用于添加 CSS 类以设置要调整大小的元素的样式。 当元素被调整大小时，一个新的 <div> 元素被创建，这是被缩放的元素（ui-resizable-helper 类）。 调整大小完成后，将调整原始元素的大小并且 <div> 元素消失。 默认情况下，它的值为 false。

语法

$( ".selector" ).resizable({ helper: "resizable-helper" });
16 maxHeight

此选项用于设置应允许调整大小的最大高度。 默认情况下，它的值为 null。

Option - maxHeight

此选项用于设置应允许调整大小的最大高度。 默认情况下，它的值为 null。

语法

$( ".selector" ).resizable({ maxHeight: 300 });
17 maxWidth

此选项用于设置应允许调整大小的最大宽度。 默认情况下，它的值为 null。

Option - maxWidth

此选项用于设置应允许调整大小的最大宽度。 默认情况下，它的值为 null。

语法

$( ".selector" ).resizable({ maxWidth: 300 });
18 minHeight

此选项用于设置应允许调整大小的最小高度。 默认情况下，它的值为 10。

Option - minHeight

此选项用于设置应允许调整大小的最小高度。 默认情况下，它的值为 10。

语法

$( ".selector" ).resizable({ minHeight: 150 });
19 minWidth

此选项用于设置应允许调整大小的最小宽度。 默认情况下，它的值为 10。

Option - minWidth

此选项用于设置应允许调整大小的最小宽度。 默认情况下，它的值为 10。

这可以是类型 −

语法

$( ".selector" ).resizable({ minWidth: 150 });

以下部分将向您展示几个调整大小功能的工作示例。

默认功能

以下示例演示了一个可调整大小功能的简单示例，不向 resizable() 方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #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>

让我们将上面的代码保存在一个 HTML 文件 resizeexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

拖动方形边框以调整大小。

animate 和 ghost 的使用

下面的例子演示了animate和ghost两个选项在JqueryUI的resize函数中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #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>

让我们将上面的代码保存在一个 HTML 文件 resizeexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

拖动方形边框调整大小并查看动画和重影选项的效果。

containment、minHeight 和 minWidth 的使用

下面的例子演示了containment、minHeight和minWidth三个选项在JqueryUI的resize函数中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left; 
            width: 150px; height: 150px; } 
         #resizable-4, #container { padding: 0.5em; }  
      </style>

      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>

   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div> 
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 resizeexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

拖动方形边框可调整大小，不能超出主容器调整大小。

delay、distance 和 autoHide 的使用

下面的例子演示了三个选项delay、distance和autoHide 在JqueryUI的resize函数中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .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>

让我们将上面的代码保存在一个 HTML 文件 resizeexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

拖动方形边框调整大小，您会注意到 −

  • 第一个方框在延迟 1000 毫秒后调整大小，

  • 第二个方框在鼠标移动 40px 后开始调整大小。

  • 将鼠标悬停在第三个方框上，会出现放大图标。

alsoResize 的使用

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #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!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 resizeexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

拖动方形边框调整大小，您会注意到第二个方框也随着第一个方框调整大小。

AspectRatio、Grid的使用

以下示例演示了选项 aspectRatio 和grid 在JqueryUI 的 resize 函数中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10 / 3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 resizeexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

拖动方形边框调整大小，第一个方框调整大小为 10 / 3 的纵横比，第二个调整大小为 [50,20] 的网格。

$ (selector, context).resizable ("action", params) 方法

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

语法

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

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

序号 操作 & 说明
1 destroy

此操作完全破坏了元素的可调整大小功能。 这会将元素返回到其预初始化状态。

Action - destroy

此操作完全破坏了元素的可调整大小功能。 这会将元素返回到其预初始化状态。此方法不接受任何参数。

语法

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

此操作禁用元素的调整大小功能。 此方法不接受任何参数。

Action - disable

此操作禁用元素的调整大小功能。 此方法不接受任何参数。

语法

 $( ".selector" ).resizable("disable");
3 enable

此操作启用元素的调整大小功能。 此方法不接受任何参数。

Action - enable

此操作启用元素的调整大小功能。 此方法不接受任何参数。

语法

$( ".selector" ).resizable("enable");
4 option( optionName )

此操作检索指定的 optionName 的值。 此选项对应于与可调整大小（选项）一起使用的选项之一。

Action - option( optionName )

此操作检索指定的 optionName 的值。 此选项对应于与可调整大小（选项）一起使用的选项之一。

语法

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
5 option()

获取一个对象，该对象包含代表当前可调整大小的选项散列的键/值对。 这不接受任何参数。

Action - option()

获取一个对象，该对象包含代表当前可调整大小的选项散列的键/值对。 这不接受任何参数。

语法

 
var options = $( ".selector" ).resizable( "option" );
6 option(optionName, value )

此操作使用指定的 optionName 设置可调整大小选项的值。 此选项对应于与可调整大小（选项）一起使用的选项之一。

Action - option( optionName, value )

此操作使用指定的 optionName 设置可调整大小选项的值。 此选项对应于与可调整大小（选项）一起使用的选项之一。

语法

 
$( ".selector" ).resizable( "option", "disabled", true );
7 option( options )

此操作为可调整大小设置一个或多个选项。

Action - option( options )

此操作为可调整大小设置一个或多个选项。

语法

 
$( ".selector" ).resizable( "option", { disabled: true } );
8 widget()

此操作返回一个包含可调整大小元素的 jQuery 对象。 此方法不接受任何参数。

Action - widget()

此操作返回一个包含可调整大小元素的 jQuery 对象。 此方法不接受任何参数。

语法

 
var widget = $( ".selector" ).resizable( "widget" );

示例

现在让我们看一个使用上表中的操作的示例。 以下示例演示了 destroy() 和 disable() 方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #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>

让我们将上面的代码保存在一个 HTML 文件 resizeexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −

您无法调整第一个方框的大小，因为它已禁用，第二个方框已被销毁。

可调整大小元素的事件管理

除了我们在前面部分看到的可调整大小（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −

序号 事件方法 & 说明
1 create(event, ui)

创建可调整大小的元素时会触发此事件。

Event - create(event, ui)

创建可调整大小的元素时会触发此事件。 其中event是Event类型，ui是Object类型。

语法

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 resize(event, ui)

当拖动可调整大小元素的处理程序时触发此事件。

Event - resize(event, ui)

当拖动可调整大小元素的处理程序时触发此事件。 其中event是Event类型，ui是Object类型。 ui 的可能值是 −

  • element − 表示可调整大小元素的 jQuery 对象。

  • helper − 表示正在调整大小的助手的 jQuery 对象。

  • originalElement − 表示包装前的原始元素的 jQuery 对象。

  • originalPosition − 调整大小之前表示为 {left, top } 的位置。

  • originalSize − 在调整大小之前表示为 { width, height } 的大小。

  • position − 当前位置表示为 {left, top }。

  • size − 当前大小表示为 { width, height }。

语法

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
3 start(event, ui)

此事件在调整大小操作开始时触发。

Event - start(event, ui)

此事件在调整大小操作开始时触发。 其中event是Event类型，ui是Object类型。 ui 的可能值是 −

  • element − 表示可调整大小元素的 jQuery 对象。

  • helper − 表示正在调整大小的助手的 jQuery 对象。

  • originalElement − 表示包装前的原始元素的 jQuery 对象。

  • originalPosition − 调整大小之前表示为 {left, top } 的位置。

  • originalSize − 在调整大小之前表示为 { width, height } 的大小。

  • position − 当前位置表示为 {left, top }。

  • size − 当前大小表示为 { width, height }。

语法

$( ".selector" ).resizable({
 start: function( event, ui ) {}
});
4 stop(event, ui)

此事件在调整大小操作结束时触发。

Event - stop(event, ui)

此事件在调整大小操作结束时触发。 其中event是Event类型，ui是Object类型。 ui 的可能值是 −

  • element − 表示可调整大小元素的 jQuery 对象。

  • helper − 表示正在调整大小的助手的 jQuery 对象。

  • originalElement − 表示包装前的原始元素的 jQuery 对象。

  • originalPosition − 调整大小之前表示为 {left, top } 的位置。

  • originalSize − 在调整大小之前表示为 { width, height } 的大小。

  • position − 当前位置表示为 {left, top }。

  • size − 当前大小表示为 { width,height }。

语法

$( ".selector" ).resizable({
stop: function( event, ui ) {}
});

示例

以下示例演示了调整功能期间事件方法的用法。 此示例演示事件 create 和 resize 的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px; 
         padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 resizeexample.htm 中，并在支持 javascript 的标准浏览器中打开它，应该会看到以下输出 −

拖动方框，您将看到在调整大小事件中显示的输出。

❮ 上一节 下一节 ❯