jQuery UI resizable

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

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

语法:

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

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

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

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

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

语法:

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

使用JavaScript对象时，可以使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示:

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

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

选项	说明
alsoResize	此选项的类型为选择器，jQuery或任何DOM元素。它表示在调整原始对象大小时也会调整大小的元素。默认情况下，其值为FALSE。
animate	如果将此选项设置为TRUE，则释放鼠标按钮时，它将在调整大小期间启用视觉效果。默认值为FALSE(无效)。
animateDuration	此选项指定调整大小效果的持续时间(以毫秒为单位)。仅在动画选项为true时使用。默认情况下，其值为"慢"。
animateEasing	此选项指定使用动画选项时应应用的缓动。默认情况下，其值为" swing"。
aspectRatio	此选项指示项目的纵横比(高度和宽度)。默认情况下，其值为false。
autoHide	此选项用于隐藏放大图标或手柄，除非鼠标悬停在该项目上。默认情况下，其值为false。
cancel	此选项用于防止调整指定元素的大小。默认情况下，其值为输入，文本区域，按钮，选择，选项。
containment	此选项用于限制在指定元素或区域内元素的大小调整。默认情况下，其值为false。
delay	此选项用于设置公差或延迟(以毫秒为单位)。之后，将开始调整大小或置换。默认情况下，其值为0。
disabled	如果将此选项设置为TRUE，它将禁用大小调整机制。鼠标不再使用可调整大小的("启用")来调整元素的大小，直到启用该机制为止。默认情况下，其值为false。
distance	此选项指定仅在鼠标移动距离(像素)时才开始调整大小。默认情况下，其值为1像素。这可以帮助防止在单击元素时意外调整大小。
ghost	如果将此选项设置为TRUE，将显示一个半透明的辅助元素，用于调整大小。释放鼠标时，此幻影项将被删除。默认情况下，其值为false。
grid	此选项的类型为数组[x，y]，指示元素在鼠标移动过程中水平和垂直扩展的像素数。默认情况下，其值为false。
handles	此选项是一个字符串，它指定可以调整元素的哪些边或角度的大小。默认情况下，其值为e，s，se。
helper	此选项用于添加CSS类来设置要调整大小的元素的样式。调整元素大小时，将创建一个新的元素，该元素将进行缩放(UI-resizable-helper类)。调整大小后，将调整原始元素的大小，并且元素消失。默认情况下，其值为false。
maxHeight	此选项用于设置可调整大小的最大高度。默认情况下，其值为NULL。
maxWidth	此选项用于设置可调整大小的最大宽度。默认情况下，其值为NULL。
minHeight	此选项用于设置应调整大小的最小高度。默认情况下，其值为10。
minWidth	此选项用于设置应调整大小的最小宽度。默认情况下，其值为10。

jQueryUI resizable()示例1

让我们举一个简单的示例来演示可调整大小的功能，不将任何参数传递给resizable()方法。

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

jQueryUI resizable()示例2

使用动画和重影:

以下示例显示了两种用法jQuery UI的调整大小功能中的选项动画和重影

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

jQuery UI resizable()示例3

delay，distance和autoHide的使用:

以下示例显示了在jQuery UI的调整大小功能中使用三个选项delay，distance和autoHide。

 <!doctype html>
 <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>jQuery UI Resizable functionality</title>
       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
       <style>
          .ui-widget-header {
             background:lightgreen;
             border: 1px solid #b9cd6d;
             color: red;
             font-weight: bold;
          }
          .ui-widget-content {
             background: lightgreen;
             border: 1px solid #DDDDDD;
             color: black;
          }
          .square {
             width: 150px;
             height: 150px;
             border: 1px solid black;
             text-align: center;
             float: left;
             margin-left: 20px;
             -right: 20px;
          }
       </style>
       <script>
          $(function() {
             $( "#resizable-5").resizable({
                delay: 1000
             });
             $( "#resizable-6").resizable({
                distance: 40
             });
             $( "#resizable-7").resizable({
                autoHide: true
             });
          });
       </script>
    </head>
    <body>
       <div id="resizable-5" class="square ui-widget-content">
          <h3 class="ui-widget-header">
             Resize starts after delay of 1000ms
          </h3>
       </div><br>
       <div id="resizable-6" class="square ui-widget-content">
          <h3 class="ui-widget-header">
             Resize starts at distance of 40px
          </h3>
       </div><br>
       <div id="resizable-7" class="square ui-widget-content">
          <h3 class="ui-widget-header">
             Hover over me to see the magnification icon!
          </h3>
       </div>
    </body>
 </html>

jQuery UI resizable()示例4

对AlsoResize的使用:

以下示例演示了对AlsoResize选项的使用。在jQuery UI的调整大小功能中。

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

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

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

语法:

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

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

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

jQueryUI resizable()示例5

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

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

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

jQuery UI Selectable

jQuery UI Droppable