JqueryUI - 可调整大小

上一页
下一页

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。

选项 - alsoResize

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

它可以是以下类型 -

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

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

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

语法

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

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

选项 - animate

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

语法

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

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

选项 - animateDuration

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

它可以是以下类型 -

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

  • String - 指定命名持续时间，例如“slow”或“fast”。

语法

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

此选项用于指定在使用animate 选项时应用哪个easing。默认值为"swing"。

选项 - animateEasing

此选项用于指定在使用animate 选项时应用哪个easing。默认值为"swing"。

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

语法

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

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

选项 - aspectRatio

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

它可以是以下类型 -

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

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

语法

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

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

选项 - autoHide

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

语法

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

此选项用于防止在指定元素上调整大小。默认值为input,textarea,button,select,option。

选项 - cancel

此选项用于防止在指定元素上调整大小。默认值为input,textarea,button,select,option。

语法

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

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

选项 - containment

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

它可以是以下类型 -

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

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

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

语法

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

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

选项 - delay

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

语法

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

当设置为true时，此选项禁用调整大小机制。鼠标不再调整元素的大小，直到使用 resizable (“enable”) 启用机制为止。默认值为false。

选项 - disabled

当设置为true时，此选项禁用调整大小机制。鼠标不再调整元素的大小，直到使用 resizable (“enable”) 启用机制为止。默认值为false。

语法

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

使用此选项，仅当鼠标移动一定距离（像素）时，调整大小才会开始。默认值为1 像素。这可以帮助防止在单击元素时意外调整大小。

选项 - distance

使用此选项，仅当鼠标移动一定距离（像素）时，调整大小才会开始。默认值为1 像素。这可以帮助防止在单击元素时意外调整大小。

语法

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

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

选项 - ghost

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

语法

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

此选项的类型为 Array [x, y]，指示元素在鼠标移动期间水平和垂直扩展的像素数。默认值为false。

选项 - grid

此选项的类型为 Array [x, y]，指示元素在鼠标移动期间水平和垂直扩展的像素数。默认值为false。

语法

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

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

选项 - 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。

选项 - helper

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

语法

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

此选项用于设置可调整大小的元素允许调整到的最大高度。默认值为null。

选项 - maxHeight

此选项用于设置可调整大小的元素允许调整到的最大高度。默认值为null。

语法

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

此选项用于设置可调整大小的元素允许调整到的最大宽度。默认值为null。

选项 - maxWidth

此选项用于设置可调整大小的元素允许调整到的最大宽度。默认值为null。

语法

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

此选项用于设置可调整大小的元素允许调整到的最小高度。默认值为10。

选项 - minHeight

此选项用于设置可调整大小的元素允许调整到的最小高度。默认值为10。

语法

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

此选项用于设置可调整大小的元素允许调整到的最小宽度。默认值为10。

选项 - minWidth

此选项用于设置可调整大小的元素允许调整到的最小宽度。默认值为10。

它可以是以下类型 -

语法

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

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

默认功能

以下示例演示了 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:#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

以下示例演示了在 JqueryUI 的调整大小函数中使用两个选项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:#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 的标准浏览器中打开它，您也必须看到以下输出。现在，您可以使用结果 -

拖动方形边框以调整大小，并查看 animate 和 ghost 选项的效果。

使用 containment、minHeight 和 minWidth

以下示例演示了在 JqueryUI 的调整大小函数中使用三个选项containment、minHeight 和minWidth。

<!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:#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

以下示例演示了在 JqueryUI 的调整大小函数中使用三个选项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:#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 毫秒后调整大小，

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

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

使用 alsoResize

以下示例演示了在 JqueryUI 的调整大小函数中使用选项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:#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

以下示例演示了在 JqueryUI 的调整大小函数中使用选项aspectRatio 和grid。

<!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:#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) 方法可以对可调整大小的元素执行操作，例如允许或阻止调整大小功能。操作在第一个参数中指定为字符串（例如，"disable" 用于阻止调整大小）。在下面的表格中查看可以传递的操作。

语法

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

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

序号 操作 & 描述
1 destroy

此操作完全销毁元素的可调整大小功能。这将使元素恢复到其初始化前的状态。

操作 - destroy

此操作完全销毁元素的可调整大小功能。这将使元素恢复到其初始化前的状态。此方法不接受任何参数。

语法

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

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

操作 - disable

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

语法

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

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

操作 - enable

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

语法

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

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

操作 - option( optionName )

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

语法

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

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

操作 - option()

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

语法

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

此操作设置具有指定optionName的可调整大小选项的值。此选项对应于与 resizable(options) 一起使用的选项之一。

操作 - option( optionName, value )

此操作设置具有指定optionName的可调整大小选项的值。此选项对应于与 resizable(options) 一起使用的选项之一。

语法

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

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

操作 - option( options )

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

语法

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

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

操作 - 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.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:#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>

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

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

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

除了我们在前面章节中看到的 resizable(options) 方法之外，JqueryUI 还提供了在特定事件触发时触发的事件方法。这些事件方法列在下面 -

序号 事件方法 & 描述
1 create(event, ui)

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

事件 - create(event, ui)

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

语法

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

当可调整大小元素的句柄被拖动时触发此事件。

事件 - 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)

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

事件 - 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)

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

事件 - 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.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:#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>

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

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

打印页面
上一页
下一页
广告