jQuery UI resizable

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>