Categories
JqueryUI教程

jQuery UI resizable()方法

jQuery UI resizable()方法

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..... });

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

Option Description
alsoResize This option is of type selector, jQuery , or any DOM element. It represents elements that also resize when resizing the original object. By default its value is FALSE.
animate If you set this option to TRUE, it enables a visual effect during resizing when the mouse button is released. The default value is FALSE (no effect).
animateDuration This option specifies the duration of the resizing effect in millisecond. It is used only when animate option is true. By default its value is “slow”.
animateEasing This option specifies which easing should be applied when using the animate option. By default its value is “swing”.
aspectRatio This option indicates the aspect (height and width) ratio for the item. By default its value is false.
autoHide This option is used to hide the magnification icon or handles, except when the mouse is over the item. By default its value is false.
cancel This option is used to prevent resizing on specified elements. By default its value is input, textarea, button, select, option.
containment This option is used restrict the resizing of elements within a specified element or region. By default its value is false.
delay This option is used to set tolerance or delay in milliseconds. After that, resizing or displacement will begin. By default its value is 0.
disabled If you set this option to TRUE, it disables the resizing mechanism. The mouse no longer resizes elements, until the mechanism is enabled, using the resizable (“enable”). By default its value is false.
distance This option specifies that the resizing will start only when the mouse moves a distance(pixels). By default its value is 1 pixel. This can help prevent unintended resizing when clicking on an element.
ghost If you set this option to TRUE, a semi-transparent helper element is shown for resizing. This ghost item will be deleted when the mouse is released. By default its value is false.
grid This option is of type array [x, y], indicating the number of pixels that the element expands horizontally and vertically during movement of the mouse. By default its value is false.
handles This option is a character string that specifies which sides or angles of the element can be resized. By default its values are e, s, se.
helper This option is used to add a CSS class to style the element which you want to resize. When the element is resized a new <div> element is created, which is the one that is scaled (UI-resizable-helper class). Once the resize is complete, the original element is sized and the <div> element disappears. By default its value is false.
maxHeight This option is used to set the maximum height the resizable should be allowed to resize to. By default its value is NULL.
maxWidth This option is used to set the maximum width the resizable should be allowed to resize to. By default its value is NULL.
minHeight This option is used to set the minimum height the resizable should be allowed to resize to. By default its value is 10.
minWidth This option is used to set the minimum width the resizable should be allowed to resize to. By default its value is 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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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的resize函数中两个选项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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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);

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

Action Description
destroy This action is used to destroy the resizable functionality of an element completely. This will return the element back to its pre-init state.
disable This action is used to disable the resizing functionality of an element. This method does not accept any arguments.
enable This action is used to enable the resizing functionality of an element. This method does not accept any arguments.
option( optionName ) This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options).
option() This action is used to get an object containing key/value pairs representing the current resizable options hash. This action does not accept any arguments.
option(optionName, value ) This action sets the value of the resizable option with the specified optionName. This option corresponds to one of those used with resizable (options).
option( Options ) This action sets one or more options for the resizable.
widget() This action returns a jQuery object containing the resizable element. This method does not accept any arguments.

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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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>


error: 内容受到保护 !!