开发手册 欢迎您！
软件开发者资料库

JqueryUI - 可调整大小

JqueryUI可调整大小 - 从简单和简单的步骤学习JqueryUI从基本到高级概念，包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选择，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单， Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

jQueryUI提供resizable()方法来调整任何DOM元素的大小.这种方法简化了元素的大小调整，否则需要花费大量时间和HTML编码. resizable()方法在项目的右下角显示一个图标以调整大小.

语法

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

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

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


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

resizable(options)方法声明可以调整HTML元素的大小. options 参数是一个对象，它指定调整大小时所涉及元素的行为.

语法

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


您可以在使用Javascript对象时提供一个或多个选项.如果要提供多个选项，则使用逗号分隔它们，如下所示;

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


下表列出了可以使用的不同选项使用此方法 :

Sr.No.选项&描述
1alsoResize

此选项的类型为 Selector ， jQuery ，或任何DOM 元素.它表示在调整原始对象大小时也调整大小的元素.默认情况下，其值为 false .

选项 -  alsoResize

此选项可以是 Selector ， jQuery 或任何DOM Element 类型.它表示在调整原始对象大小时也调整大小的元素.默认情况下，其值为 false .

这可以是 :

  • 选择器 : 此类型表示从DOM文档中选择要调整大小的DOM元素.

  • jQuery : 将为页面上的每个可调整大小的元素调用回调函数.如果调整元素大小，此函数应返回 true .

  • 元素 : 文档对象模型(DOM)中的元素.

语法 

  $(".selector").resizable({alsoResize:"＃identifier"});
2animate

当设置为 true 时，此选项用于在释放鼠标按钮时调整大小时启用视觉效果.默认值为 false (无效果).

选项 - 动画

当设置为 true 时，此选项用于在释放鼠标按钮时调整大小时启用视觉效果.默认值为 false (无效果).

语法 

  $(".selector").resizable({animate:true});
3animateDuration

此选项用于设置调整大小效果的持续时间(以毫秒为单位).仅当动画
选项为 true 时才使用此选项.默认情况下，其值为"慢".

选项 -  animateDuration

此选项用于设置调整大小效果的持续时间(以毫秒为单位).仅当 animate 选项为 true 时才使用此选项.默认情况下，其值为"慢".

这可以是 :

  • 数字 : 这指定持续时间(以毫秒为单位)

  • String : 这会分配命名的持续时间，例如"慢"或"快".

语法 

  $(".selector").resizable({animateDuration:"fast"});
4animateEasing

此选项用于指定在使用动画选项时应用哪个缓动.默认情况下，其值为"swing".

选项 -  animateEasing

此选项用于指定在使用动画选项时应用哪个缓动.默认情况下，其值为"swing".

缓动函数指定动画在动画中不同点的进展速度.

语法 

  $(".selector").resizable({animateEasing:"easeOutBounce" });
5aspectRatio

此选项用于指示是否保持项目的宽高比(高度和宽度).默认情况下，其值为 false .

选项 -  aspectRatio

此选项用于指示是否保持项目的宽高比(高度和宽度).默认情况下，其值为 false .

这可以是 :

  • 布尔 : 此值如果设置为 true ，则元素将保持其原始宽高比.

  • 数字&减号;这指定了在调整大小期间保持特定宽高比的元素.

语法 

  $(".selector").resizable({aspectRatio:true});
6autoHide

此选项用于隐藏放大图标或手柄，除非鼠标位于项目上方.默认情况下，其值为 false .

选项 - 自动隐藏

此选项用于隐藏放大图标或手柄，除非鼠标位于项目上方.默认情况下，其值为 false .

语法 

  $(".selector").resizable({autoHide:true});
7cancel

此选项用于防止调整指定元素的大小.默认情况下，其值为输入，文本区域，按钮，选择，选项.

选项 - 取消

此选项用于防止对指定元素进行大小调整.默认情况下，其值为输入，文本区域，按钮，选择，选项.

语法 

  $(".selector").resizable({cancel:".cancel"});
8containment

此选项用于限制指定元素或区域内元素的大小调整.默认情况下，其值为 false .

选项 - 包含

此选项用于限制指定元素或区域内元素的大小调整.默认情况下，其值为 false .

这可以是 :

  • 选择器 : 此类型表示可调整大小的元素仅包含在选择器找到的列表中的第一个项目中.

  • 元素 : 此类型表示任何DOM元素.可调整大小的元素将包含在此元素的边界框中.

  • 字符串 : 此类型的可能值为 -   parent 和 document .

语法 

  $(".selector").resizable({containment:"parent"});
9delay

此选项用于设置容差或延迟(以毫秒为单位).此后将开始调整大小或移位.默认情况下，其值为 0 .

选项 - 延迟

此选项用于设置容差或延迟(以毫秒为单位).此后将开始调整大小或移位.默认情况下，其值为 0 .

语法 

  $(".selector").resizable({delay:150});
10disabled

此选项在设置为 true 时禁用调整大小机制.鼠标不再调整元素大小，直到启用机制，使用可调整大小("启用").默认情况下，其值为 false .

选项 - 已停用

此选项在设置为 true 时禁用调整大小机制.鼠标不再调整元素大小，直到启用机制，使用可调整大小("启用").默认情况下，其值为 false .

语法 

  $(".selector").resizable({disabled:true});
11distance

使用此选项，仅在鼠标移动距离(像素)时才开始调整大小.默认情况下，其值 1像素.这有助于在点击元素时防止意外调整大小.

选项 - 距离

使用此选项，仅在鼠标移动距离(像素)时才开始调整大小.默认情况下，其值 1像素.这有助于在单击元素时防止意外调整大小.

语法 

  $(".selector").resizable({distance:30});
12ghost

此选项设置为 true 时，会显示一个半透明的辅助元素，用于调整大小.释放鼠标时将删除此重影项目.默认情况下，其值为 false .

选项 - 幽灵

此选项设置为 true 时，会显示一个半透明的辅助元素，用于调整大小.释放鼠标时将删除此重影项目.默认情况下，其值为 false .

语法 

  $(".selector").resizable({ghost:true});
13grid

此选项的类型为Array [x，y]，表示元素在移动鼠标时水平和垂直展开的像素数.默认情况下，其值为 false .

选项 - 网格

此选项的类型为Array [x，y]，表示元素在移动鼠标时水平和垂直扩展的像素数.默认情况下，其值为 false .

语法 

  $(".selector").resizable({grid:[20,10]});
14handles

此选项是一个字符串，指示可以调整元素的哪些边或角度.默认情况下，其值为 e，s，se .

选项 - 句柄

此选项是一个字符串，指示可以调整元素的哪些边或角度.可能的值是: n，
e，s，和 w 四个方面，以及 ne，se，nw，和 sw 四角.字母 n，e，s，和 w
代表四个基本点(北，南，东和西).

默认情况下，其值为 e，s，se .

语法 

  $(".selector").resizable({handles:"n，e，s，w"});
15helper

此选项用于添加CSS类以设置要调整大小的元素的样式.当元素调整大小时，新的< div>创建了一个元素，它是一个缩放的元素(ui-resizable-helper类).调整大小完成后，原始元素的大小和
< div>元素消失了.默认情况下，其值为 false .

选项 - 助手

此选项用于添加CSS类以设置要调整大小的元素的样式.当元素调整大小时，新的< div>创建了一个元素，它是一个缩放的元素(ui-resizable-helper类).调整大小完成后，原始元素的大小和
< div>元素消失了.默认情况下，其值为 false .

语法 

  $(".selector").resizable({helper:"resizable-helper"});
16maxHeight

此选项用于设置可调整大小应调整大小的最大高度.默认情况下，其值为 null .

选项 -  maxHeight

此选项用于设置可调整大小的最大高度.默认情况下，其值为 null .

语法 

  $(".selector").resizable({maxHeight:300});
17maxWidth

此选项用于设置允许resizable调整大小的最大宽度.默认情况下，其值为 null .

选项 -  maxWidth

此选项用于设置可调整大小应允许调整大小的最大宽度.默认情况下，其值为 null .

语法 

  $(".selector").areizable({maxWidth:300});
18minHeight

此选项用于设置可调整大小应调整大小的最小高度.默认情况下，其值 10 .

选项 -  minHeight

此选项用于设置可调整大小应调整大小的最小高度.默认情况下，其值 10 .

语法 

  $(".selector").resizable({minHeight:150});
19minWidth

此选项用于设置应允许resizable调整大小的最小宽度.默认情况下，其值 10 .

选项 -  minWidth

此选项用于设置可调整大小应允许调整大小的最小宽度.默认情况下，其值 10 .

这可以是 :

语法 

  $(".selector").resizable({minWidth:150});

以下部分将向您展示调整大小功能的一些工作示例.

默认功能

以下示例演示了可调整大小功能的简单示例，没有参数 resizable()方法.

               jQuery UI Resizable functionality                                                                                   Pull my edges to resize me!!      
  


让我们将上述代码保存在HTML文件 resizeexample.htm 中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出.现在，您可以使用结果

使用 animate 和 ghost

以下示例演示了JqueryUI的resize函数中两个选项animate和ghost的用法。

               jQuery UI Resizable functionality                                                                                                  Pull my edges and Check the animation!!               

                I'm ghost!!          

让我们将上述代码保存在HTML文件resizeexample.htm中，并在支持javascript的标准浏览器中打开它，您还必须看到以下输出。 现在，你可以玩结果

拖动方形边框以调整大小并查看动画和幻影选项的效果。

使用containment，minHeight和minWidth

以下示例演示了JqueryUI的resize函数中三个选项containment，minHeight和minWidth的用法。

               jQuery UI Resizable functionality                                                                                 Resize contained to this container                               

让我们将上述代码保存在HTML文件resizeexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。 现在，你可以玩结果

拖动方形边框以调整大小，您无法在主容器之外调整大小。

使用延迟，距离和自动隐藏

以下示例演示了JqueryUI的resize函数中三个选项delay，distance和autoHide的用法。

               jQuery UI Resizable functionality                                                                              Resize starts after delay of 1000ms               
                           Resize starts at distance of 40px               
                           Hover over me to see the magnification icon!                  

让我们将上述代码保存在HTML文件resizeexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。 现在，你可以玩结果

拖动方形边框以调整大小，您可以注意到这一点:

  • 第一个方框在延迟1000ms后调整大小，

  • 鼠标移动40px后，第二个方框开始调整大小。

  • 将鼠标悬停在第三个方框上，出现放大图标。

使用alsoResize

以下示例演示了JqueryUI的resize函数中的optionResize的用法。

               jQuery UI Resizable functionality                                                                                   Resize!!      
                I also get resized!!          

让我们将上述代码保存在HTML文件resizeexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。 现在，你可以玩结果


拖动方形边框以调整大小，您可以注意到第二个方框也随第一个方框调整大小。

使用AspectRatio，Grid

以下示例演示了JqueryUI的resize函数中选项aspectRatio和grid的用法。

               jQuery UI Resizable functionality                                                                              Resize with aspectRatio of 10/3                                          Snap me to the grid of [50,20]                  

让我们将上述代码保存在HTML文件resizeexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。 现在，你可以玩结果


拖动方形边框以调整大小，第一个方框调整大小，宽高比为10/3，第二个方框调整大小为[50,20]。


$ (selector, context).resizable ("action", params) 函数

可调整大小（"action"，params）方法可以对可调整大小的元素执行操作，例如允许或阻止调整大小功能。 该操作在第一个参数中指定为字符串（例如，"禁用"以防止调整大小）。 请查看下表中可以传递的操作。

语法

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

下表列出了可以与此方法一起使用的不同操作:

Sr.No.Action & Description
1destroy

This action destroys the resizable functionality of an element completely. This will return the element back to its pre-init state.

Action - destroy

This action destroys the resizable fubctionality of an element completely. This will return the element back to its pre-init state. This method does not accept any arguments.

Syntax

 $( ".selector" ).resizable("destroy");
2disable

This action disables the resizing functionality of an element. This method does not accept any arguments.

Action - disable

This action disables the resizing functionality of an element. This method does not accept any arguments.

Syntax

 $( ".selector" ).resizable("disable");
3enable

This action enables the resizing functionality of an element. This method does not accept any arguments.

Action - enable

This action enables the resizing functionality of an element. This method does not accept any arguments.

Syntax

$( ".selector" ).resizable("enable");
4option( optionName )

This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options).

Action - option( optionName )

This action retrieves the value of the specified optionName. This option corresponds to one of those used with resizable (options).

Syntax

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
5option()

Gets an object containing key/value pairs representing the current resizable options hash. This does not accept any arguments.

Action - option()

Gets an object containing key/value pairs representing the current resizable options hash. This does not accept any arguments.

Syntax

 var options = $( ".selector" ).resizable( "option" );
6option(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).

Action - 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).

Syntax

 $( ".selector" ).resizable( "option", "disabled", true );
7option( options )

This action sets one or more options for the resizable.

Action - option( options )

This action sets one or more options for the resizable.

Syntax

 $( ".selector" ).resizable( "option", { disabled: true } );
8widget()

This action returns a jQuery object containing the resizable element. This method does not accept any arguments.

Action - widget()

This action returns a jQuery object containing the resizable element. This method does not accept any arguments.

Syntax

 var widget = $( ".selector" ).resizable( "widget" );

示例

现在让我们看一个使用上表中的操作的示例。 以下示例演示了destroy()和disable()方法的用法。

               jQuery UI Resizable functionality                                                                                   I'm disable!!      
                I'm Destroyed!!         

让我们将上面的代码保存在HTML文件resizeexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出


您无法调整第一个方框的大小，因为它已禁用，第二个方框被销毁。

可调整大小元素的事件管理

除了我们在前面部分中看到的resizable（options）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下所列

Sr.No.Event Method & Description
1create(event, ui)

This event is triggered when the resizable element is created.

Event - create(event, ui)

This event is triggered when the resizable element is created. Where event is of type Event, and ui is of typeObject.

Syntax

$( ".selector" ).resizable({create: function( event, ui ) {}});
2resize(event, ui)

This event is triggered when the handler of resizable element is dragged.

Event - resize(event, ui)

This event is triggered when the handler of resizable element is dragged. Where event is of type Event, and uiis of type Object. Possible values of ui are −

  • element − A jQuery object representing the resizable element.

  • helper − A jQuery object representing the helper that is being resized.

  • originalElement − The jQuery object representing the original element before it is wrapped.

  • originalPosition − The position represented as {left, top } before the resizable is resized.

  • originalSize − The size represented as { width, height } before the resizable is resized.

  • position − The current position represented as {left, top }.

  • size − The current size represented as { width, height }.

Syntax

$( ".selector" ).resizable({resize: function( event, ui ) {}});
3start(event, ui)

This event is triggered at the start of a resize operation.

Event - start(event, ui)

This event is triggered at the start of a resize operation. Where event is of type Event, and ui is of typeObject. Possible values of ui are −

  • element − A jQuery object representing the resizable element.

  • helper − A jQuery object representing the helper that is being resized.

  • originalElement − The jQuery object representing the original element before it is wrapped.

  • originalPosition − The position represented as {left, top } before the resizable is resized.

  • originalSize − The size represented as { width, height } before the resizable is resized.

  • position − The current position represented as {left, top }.

  • size − The current size represented as { width, height }.

Syntax

$( ".selector" ).resizable({ start: function( event, ui ) {}});
4stop(event, ui)

This event is triggered at the end of a resize operation.

Event - stop(event, ui)

This event is triggered at the end of a resize operation. Where event is of type Event, and ui is of typeObject. Possible values of ui are −

  • element − A jQuery object representing the resizable element.

  • helper − A jQuery object representing the helper that is being resized.

  • originalElement − The jQuery object representing the original element before it is wrapped.

  • originalPosition − The position represented as {left, top } before the resizable is resized.

  • originalSize − The size represented as { width, height } before the resizable is resized.

  • position − The current position represented as {left, top }.

  • size − The current size represented as { width,height }.

Syntax

$( ".selector" ).resizable({stop: function( event, ui ) {}});

示例

以下示例演示调整大小功能期间的事件方法用法。 此示例演示了使用事件创建和调整大小。

               jQuery UI Resizable functionality                                                                                      Resize !!      
      
         

让我们将上面的代码保存在HTML文件resizeexample.htm中，并在支持javascript的标准浏览器中打开它，应该看到以下输出


拖动方框，您将看到输出显示在resize事件上。