目录
  1. WIKI教程
  2. 学习jQueryUI
  3. JqueryUI - 可调整大小( Resizable)

JqueryUI - 可调整大小( Resizable)

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

语法 (Syntax)

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

$（selector，context）.resizable（options）方法

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

语法 (Syntax)

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

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

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

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

Sr.No. 选项和说明
1 alsoResize

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

Option - alsoResize

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

这可以是 -

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

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

  • Element - 文档对象模型（DOM）中的元素。

Syntax 

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

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

Option - animate

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

Syntax 

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

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

Option - animateDuration

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

这可以是 -

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

  • String - 这会分配命名的持续时间，例如“slow”或“fast”。

Syntax 

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

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

Option - animateEasing

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

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

Syntax 

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

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

Option - aspectRatio

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

这可以是 -

  • Boolean - 此值如果设置为true ，则元素将保持其原始高宽比。

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

Syntax 

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

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

Option - autoHide

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

Syntax 

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

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

Option - cancel

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

Syntax 

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

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

Option - containment

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

这可以是 -

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

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

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

Syntax 

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

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

Option - delay

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

Syntax 

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

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

Option - disabled

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

Syntax 

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

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

Option - distance

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

Syntax 

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

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

Option - ghost

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

Syntax 

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

此选项的类型为Array [x，y]，表示元素在移动鼠标时水平和垂直扩展的像素数。 默认情况下，其值为false 。

Option - grid

此选项的类型为Array [x，y]，表示元素在移动鼠标时水平和垂直扩展的像素数。 默认情况下，其值为false 。

Syntax 

$( ".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 。

Syntax 

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

此选项用于添加CSS类以设置要调整大小的元素的样式。 调整元素大小时，会创建一个新的

元素，该元素是缩放的（ui-resizable-helper类）。
调整大小完成后，将调整原始元素的大小并使
元素消失。
默认情况下，其值为false 。

Option - helper

此选项用于添加CSS类以设置要调整大小的元素的样式。 调整元素大小时，会创建一个新的

元素，该元素是缩放的（ui-resizable-helper类）。
调整大小完成后，将调整原始元素的大小并使
元素消失。
默认情况下，其值为false 。

Syntax 

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

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

Option - maxHeight

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

Syntax 

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

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

Option - maxWidth

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

Syntax 

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

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

Option - minHeight

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

Syntax 

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

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

Option - minWidth

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

这可以是 -

Syntax 

$( ".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的标准浏览器中打开它，您应该看到以下输出。 现在，你可以玩结果 -

新页面打开

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

使用动画和幽灵

以下示例演示了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的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果 -

新页面打开

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

使用containment，minHeight和minWidth

以下示例演示了JqueryUI的resize函数中三个选项containment ， 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后调整大小，

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

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

使用alsoResize

以下示例演示了在alsoResize的resize函数中使用选项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，Grid

以下示例演示了aspectRatio的resize函数中选项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).resizable（“action”，params）方法

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

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No. 行动和描述
1 destroy

此操作会完全破坏元素的可调整大小的功能。 这将使元素返回到pre-init状态。

Action - destroy

此操作完全破坏了元素的可调整大小的功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Syntax 

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

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

Action - disable

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

Syntax 

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

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

Action - enable

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

Syntax 

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

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

Action - option( optionName )

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

Syntax 

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

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

Action - option()

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

Syntax 

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

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

Action - option( optionName, value )

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

Syntax 

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

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

Action - option( options )

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

Syntax 

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

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

Action - widget()

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

Syntax 

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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的标准浏览器中打开它，你应该看到以下输出 -

新页面打开

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

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

除了我们在前面部分中看到的resizable（options）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No. 事件方法和描述
1 create(event, ui)

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

Event - create(event, ui)

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

Syntax 

$( ".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}。

Syntax 

$( ".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}。

Syntax 

$( ".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}。

Syntax 

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

例子 (Example)

以下示例演示调整大小功能期间的事件方法用法。 此示例演示了使用事件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的标准浏览器中打开它，应该看到以下输出 -

新页面打开

拖动方框，您将看到输出显示在resize事件上。

<上一篇.JqueryUI - Droppable( Droppable)
JqueryUI - 可选( Selectable).下一篇>
↑回到顶部↑
WIKI教程 @2018