jQuery UI可调整大小

本文概述

第一种方法
jQueryUI resizable()示例1
jQueryUI resizable()示例2
jQuery UI resizable()示例3
jQuery UI resizable()示例4
第二种方法
jQueryUI resizable()示例5

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

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

句法：

你可以通过两种形式使用resizable()方法：

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

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

第一种方法

可调整大小的（选项）方法指定你可以调整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类来设置要调整大小的元素的样式。调整元素大小时, 将创建一个新的<div>元素, 该元素将进行缩放（UI-resizable-helper类）。调整大小后, 将调整原始元素的大小, 并且<div>元素消失。默认情况下, 其值为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的大小调整功能中两个选项animate和ghost的用法

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

使用延迟, 距离和自动隐藏：

以下示例显示了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：

下面的示例演示了jQuery UI的resize函数中option AlsoResize选项的用法。

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

立即测试

第二种方法

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

句法：

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

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

行动	描述
destroy	此操作用于完全破坏元素的可调整大小的功能。这将使元素返回其初始状态。
disable	此操作用于禁用元素的大小调整功能。此方法不接受任何参数。
enable	此操作用于启用元素的调整大小功能。此方法不接受任何参数。
option( optionName )	该操作检索指定的optionName的值。此选项对应于可调整大小的选项（选项）之一。
option()	此操作用于获取包含键/值对的对象, 该键/值对表示当前可调整大小的选项哈希。此操作不接受任何参数。
option(optionName, value )	此操作使用指定的optionName设置可调整大小的选项的值。此选项对应于可调整大小的选项（选项）之一。
option( Options )	此操作为可调整大小设置一个或多个选项。
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>

立即测试

本文概述

第一种方法

jQueryUI resizable()示例1

jQueryUI resizable()示例2

jQuery UI resizable()示例3

jQuery UI resizable()示例4

第二种方法

jQueryUI resizable()示例5

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

第一种方法

jQueryUI resizable()示例1

jQueryUI resizable()示例2

jQuery UI resizable()示例3

jQuery UI resizable()示例4

第二种方法

jQueryUI resizable()示例5

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发