<< jQuery UI Droppable jQuery UI Selectable >>

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()方法。

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>
      
      <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>
      
      <script>
         $(function() {
            $( "#resizable-2").resizable({
               animate: true
            });
            $( "#resizable-3").resizable({
               ghost: true
            });
         });
      </script>
   </head>
   <body>
      
      <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>
      
      <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>
      
      <script>
         $(function() {
            $( "#resizable-8").resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9").resizable();
         });
      </script>
   </head>
   <body>
      
      <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>
      
      <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>
      
      <script>
         $(function() {
            $( "#resizable-12").resizable();
            $( "#resizable-12").resizable('disable');
            $( "#resizable-13").resizable();
            $( "#resizable-13").resizable('destroy');
         });
      </script>
   </head>
   <body>
      
      <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>

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< jQuery UI Droppable jQuery UI Selectable >>

昵称：邮箱：