JqueryUI - 可调整大小

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

句法

resizing ()方法可以以两种形式使用 -

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

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

句法

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

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

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

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

先生。 选项和说明
1 也调整大小

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

选项 - 同时调整大小

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

这可以是类型 -

  • 选择器- 此类型指示从 DOM 文档中选择 DOM 元素以调整大小。

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

  • 元素- 文档对象模型 (DOM) 中的元素。

句法

$( ".selector" ).resizable({ alsoResize: "#identifier" });
2 动画化

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

选项-动画

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

句法

$( ".selector" ).resizable({ animate: true });
3 动画持续时间

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

选项 - animateDuration

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

这可以是类型 -

  • Number - 这指定持续时间（以毫秒为单位）

  • String - 这指定命名的持续时间，例如“慢”或“快”。

句法

$( ".selector" ).resizable({ animateDuration: "fast" });
4 动画缓动

此选项用于指定在使用动画选项时应用哪种缓动。默认情况下它的值为"swing"。

选项 - animateEasing

此选项用于指定在使用动画选项时应用哪种缓动。默认情况下它的值为"swing"。

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

句法

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
5 纵横比

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

选项-aspectRatio

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

这可以是类型 -

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

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

句法

$( ".selector" ).resizable({ aspectRatio: true });
6 自动隐藏

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

选项 - 自动隐藏

This option is used to hide the magnification icon or handles, except when the mouse is over the item. By default its value is false.

Syntax

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

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

Option - cancel

This option is used to prevent resizing on specified elements. By default its value is input,textarea,button,select,option.

Syntax

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

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

Option - containment

This option is used restrict the resizing of elements within a specified element or region. By default its value is false.

This can be of type −

  • Selector − This type indicates that resizable element will be contained to only the first item in the list found by the selector.

  • Element − This type indicates any DOM element. The resizable element will be contained to the bounding box of this element.

  • String − Possible values for this type are - parent and document.

Syntax

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

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

Option - delay

This option is used to set tolerance or delay in milliseconds. Resizing or displacement will begin thereafter. By default its value is 0.

Syntax

$( ".selector" ).resizable({ delay: 150 });
10 残疾人

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

Option - disabled

This option disables the resizing mechanism when set to true. The mouse no longer resizes elements, until the mechanism is enabled, using the resizable ("enable"). By default its value is false.

Syntax

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

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

Option - distance

With this option, the resizing starts only when the mouse moves a distance(pixels). By default its value is 1 pixel. This can help prevent unintended resizing when clicking on an element.

Syntax

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

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

Option - ghost

This option when set to true, a semi-transparent helper element is shown for resizing. This ghost item will be deleted when the mouse is released. By default its value is false.

Syntax

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

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

Option - grid

This option is of type Array [x, y], indicating the number of pixels that the element expands horizontally and vertically during movement of the mouse. By default its value is false.

Syntax

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

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

Option - handles

This option is a character string indicating which sides or angles of the element can be resized. The possible values are: n, e, s, and w for the four sides, and ne, se, nw, and sw for the four corners. The letters n, e, s, and w represent the four cardinal points (North, South, East, and West).

By default its values are e, s, se.

Syntax

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

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

Option - helper

This option is used to add a CSS class to style the element to be resized. When the element is resized a new <div> element is created, which is the one that is scaled (ui-resizable-helper class). Once the resize is complete, the original element is sized and the <div> element disappears. By default its value is false.

Syntax

$( ".selector" ).resizable({ helper: "resizable-helper" });
16 最大高度

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

Option - maxHeight

This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is null.

Syntax

$( ".selector" ).resizable({ maxHeight: 300 });
17 号 最大宽度

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

Option - maxWidth

This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is null.

Syntax

$( ".selector" ).resizable({ maxWidth: 300 });
18 最小高度

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

Option - minHeight

This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10.

Syntax

$( ".selector" ).resizable({ minHeight: 150 });
19 最小宽度

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

Option - minWidth

This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 10.

This can be of type −

Syntax

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

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

默认功能

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

<!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 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

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

动画和幽灵的使用

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

<!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 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

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

使用包含、minHeight 和 minWidth

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

<!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 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

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

使用延迟、距离和自动隐藏

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

<!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 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

拖动方形边框来调整大小，您可以注意到 -

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

  • 鼠标移动 40 像素后，第二个方框开始调整大小。

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

使用alsoResize

下面的示例演示了JqueryUI 的调整大小功能中选项alsoResize的用法。

<!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、网格的使用

下面的例子演示了JqueryUI的调整大小功能中选项aspectRatio和grid的用法。

<!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).ressized("action", params) 方法

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

句法

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

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

先生。 动作与描述
1 破坏

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

Action - destroy

This action destroys the resizable fubctionality of an element completely. This will return the element back to its pre-init state. This method does not accept any arguments.

Syntax

 $( ".selector" ).resizable("destroy");
2 禁用

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

Action - disable

This action disables the resizing functionality of an element. This method does not accept any arguments.

Syntax

 $( ".selector" ).resizable("disable");
3 使能够

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

Action - enable

This action enables the resizing functionality of an element. This method does not accept any arguments.

Syntax

$( ".selector" ).resizable("enable");
4 选项（选项名称）

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

Action - option( optionName )

This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options).

Syntax

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
5 选项（）

获取一个对象，其中包含表示当前可调整大小的选项哈希的键/值对。这不接受任何论据。

Action - option()

Gets an object containing key/value pairs representing the current resizable options hash. This does not accept any arguments.

Syntax

 
var options = $( ".selector" ).resizable( "option" );
6 选项（选项名称，值）

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

Action - option( optionName, value )

This action sets the value of the resizable option with the specified optionName. This option corresponds to one of those used with resizable (options).

Syntax

 
$( ".selector" ).resizable( "option", "disabled", true );
7 选项（选项）

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

Action - option( options )

This action sets one or more options for the resizable.

Syntax

 
$( ".selector" ).resizable( "option", { disabled: true } );
8 小部件（）

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

Action - widget()

This action returns a jQuery object containing the resizable element. This method does not accept any arguments.

Syntax

 
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 创建（事件，用户界面）

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

Event - create(event, ui)

This event is triggered when the resizable element is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 调整大小（事件，用户界面）

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

Event - resize(event, ui)

This event is triggered when the handler of resizable element is dragged. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • element − A jQuery object representing the resizable element.

  • helper − A jQuery object representing the helper that is being resized.

  • originalElement − The jQuery object representing the original element before it is wrapped.

  • originalPosition − The position represented as {left, top } before the resizable is resized.

  • originalSize − The size represented as { width, height } before the resizable is resized.

  • position − The current position represented as {left, top }.

  • size − The current size represented as { width, height }.

Syntax

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
3 开始（事件，用户界面）

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

Event - start(event, ui)

This event is triggered at the start of a resize operation. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • element − A jQuery object representing the resizable element.

  • helper − A jQuery object representing the helper that is being resized.

  • originalElement − The jQuery object representing the original element before it is wrapped.

  • originalPosition − The position represented as {left, top } before the resizable is resized.

  • originalSize − The size represented as { width, height } before the resizable is resized.

  • position − The current position represented as {left, top }.

  • size − The current size represented as { width, height }.

Syntax

$( ".selector" ).resizable({
 start: function( event, ui ) {}
});
4 停止（事件，用户界面）

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

Event - stop(event, ui)

This event is triggered at the end of a resize operation. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • element − A jQuery object representing the resizable element.

  • helper − A jQuery object representing the helper that is being resized.

  • originalElement − The jQuery object representing the original element before it is wrapped.

  • originalPosition − The position represented as {left, top } before the resizable is resized.

  • originalSize − The size represented as { width, height } before the resizable is resized.

  • position − The current position represented as {left, top }.

  • size − The current size represented as { width,height }.

Syntax

$( ".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 的标准浏览器中打开它，应该会看到以下输出 -

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