jQueryUI提供resizable()方法来调整任何DOM元素的大小.这种方法简化了元素的大小调整,否则需要花费大量时间和HTML编码. resizable()方法在项目的右下角显示一个图标以调整大小.
resizable()方法可以使用两种形式 :
$(selector, context).resizable (options) 方法
$(selector, context).resizable ("action", params) 方法
resizable(options)方法声明可以调整HTML元素的大小. options 参数是一个对象,它指定调整大小时所涉及元素的行为.
$(selector, context).resizable (options);
您可以在使用Javascript对象时提供一个或多个选项.如果要提供多个选项,则使用逗号分隔它们,如下所示;
$(selector, context).resizable({option1: value1, option2: value2..... });
下表列出了可以使用的不同选项使用此方法 :
Sr.No. | 选项&描述 |
---|---|
1 | alsoResize 此选项的类型为 Selector , jQuery ,或任何DOM 元素.它表示在调整原始对象大小时也调整大小的元素.默认情况下,其值为 false . 选项 - alsoResize 此选项可以是 Selector , jQuery 或任何DOM Element 类型.它表示在调整原始对象大小时也调整大小的元素.默认情况下,其值为 false . 这可以是 :
语法 $(".selector").resizable({alsoResize:"#identifier"}); |
2 | animate 当设置为 true 时,此选项用于在释放鼠标按钮时调整大小时启用视觉效果.默认值为 false (无效果). 选项 - 动画 当设置为 true 时,此选项用于在释放鼠标按钮时调整大小时启用视觉效果.默认值为 false (无效果). 语法 $(".selector").resizable({animate:true}); |
3 | animateDuration 此选项用于设置调整大小效果的持续时间(以毫秒为单位).仅当动画 选项 - animateDuration 此选项用于设置调整大小效果的持续时间(以毫秒为单位).仅当 animate 选项为 true 时才使用此选项.默认情况下,其值为"慢". 这可以是 :
语法 $(".selector").resizable({animateDuration:"fast"}); |
4 | animateEasing 此选项用于指定在使用动画选项时应用哪个缓动.默认情况下,其值为"swing". 选项 - animateEasing 此选项用于指定在使用动画选项时应用哪个缓动.默认情况下,其值为"swing". 缓动函数指定动画在动画中不同点的进展速度. 语法 $(".selector").resizable({animateEasing:"easeOutBounce" }); |
5 | aspectRatio 此选项用于指示是否保持项目的宽高比(高度和宽度).默认情况下,其值为 false . 选项 - aspectRatio 此选项用于指示是否保持项目的宽高比(高度和宽度).默认情况下,其值为 false . 这可以是 :
语法 $(".selector").resizable({aspectRatio:true}); |
6 | autoHide 此选项用于隐藏放大图标或手柄,除非鼠标位于项目上方.默认情况下,其值为 false . 选项 - 自动隐藏 此选项用于隐藏放大图标或手柄,除非鼠标位于项目上方.默认情况下,其值为 false . 语法 $(".selector").resizable({autoHide:true}); |
7 | cancel 此选项用于防止调整指定元素的大小.默认情况下,其值为输入,文本区域,按钮,选择,选项. 选项 - 取消 此选项用于防止对指定元素进行大小调整.默认情况下,其值为输入,文本区域,按钮,选择,选项. 语法 $(".selector").resizable({cancel:".cancel"}); |
8 | containment 此选项用于限制指定元素或区域内元素的大小调整.默认情况下,其值为 false . 选项 - 包含 此选项用于限制指定元素或区域内元素的大小调整.默认情况下,其值为 false . 这可以是 :
语法 $(".selector").resizable({containment:"parent"}); |
9 | delay 此选项用于设置容差或延迟(以毫秒为单位).此后将开始调整大小或移位.默认情况下,其值为 0 . 选项 - 延迟 此选项用于设置容差或延迟(以毫秒为单位).此后将开始调整大小或移位.默认情况下,其值为 0 . 语法 $(".selector").resizable({delay:150}); |
10 | disabled 此选项在设置为 true 时禁用调整大小机制.鼠标不再调整元素大小,直到启用机制,使用可调整大小("启用").默认情况下,其值为 false . 选项 - 已停用 此选项在设置为 true 时禁用调整大小机制.鼠标不再调整元素大小,直到启用机制,使用可调整大小("启用").默认情况下,其值为 false . 语法 $(".selector").resizable({disabled:true}); |
11 | distance 使用此选项,仅在鼠标移动距离(像素)时才开始调整大小.默认情况下,其值 1像素.这有助于在点击元素时防止意外调整大小. 选项 - 距离 使用此选项,仅在鼠标移动距离(像素)时才开始调整大小.默认情况下,其值 1像素.这有助于在单击元素时防止意外调整大小. 语法 $(".selector").resizable({distance:30}); |
12 | ghost 此选项设置为 true 时,会显示一个半透明的辅助元素,用于调整大小.释放鼠标时将删除此重影项目.默认情况下,其值为 false . 选项 - 幽灵 此选项设置为 true 时,会显示一个半透明的辅助元素,用于调整大小.释放鼠标时将删除此重影项目.默认情况下,其值为 false . 语法 $(".selector").resizable({ghost:true}); |
13 | grid 此选项的类型为Array [x,y],表示元素在移动鼠标时水平和垂直展开的像素数.默认情况下,其值为 false . 选项 - 网格 此选项的类型为Array [x,y],表示元素在移动鼠标时水平和垂直扩展的像素数.默认情况下,其值为 false . 语法 $(".selector").resizable({grid:[20,10]}); |
14 | handles 此选项是一个字符串,指示可以调整元素的哪些边或角度.默认情况下,其值为 e,s,se . 选项 - 句柄 此选项是一个字符串,指示可以调整元素的哪些边或角度.可能的值是: n, 默认情况下,其值为 e,s,se . 语法 $(".selector").resizable({handles:"n,e,s,w"}); |
15 | helper 此选项用于添加CSS类以设置要调整大小的元素的样式.当元素调整大小时,新的< div>创建了一个元素,它是一个缩放的元素(ui-resizable-helper类).调整大小完成后,原始元素的大小和 选项 - 助手 此选项用于添加CSS类以设置要调整大小的元素的样式.当元素调整大小时,新的< div>创建了一个元素,它是一个缩放的元素(ui-resizable-helper类).调整大小完成后,原始元素的大小和 语法 $(".selector").resizable({helper:"resizable-helper"}); |
16 | maxHeight 此选项用于设置可调整大小应调整大小的最大高度.默认情况下,其值为 null . 选项 - maxHeight 此选项用于设置可调整大小的最大高度.默认情况下,其值为 null . 语法 $(".selector").resizable({maxHeight:300}); |
17 | maxWidth 此选项用于设置允许resizable调整大小的最大宽度.默认情况下,其值为 null . 选项 - maxWidth 此选项用于设置可调整大小应允许调整大小的最大宽度.默认情况下,其值为 null . 语法 $(".selector").areizable({maxWidth:300}); |
18 | minHeight 此选项用于设置可调整大小应调整大小的最小高度.默认情况下,其值 10 . 选项 - minHeight 此选项用于设置可调整大小应调整大小的最小高度.默认情况下,其值 10 . 语法 $(".selector").resizable({minHeight:150}); |
19 | minWidth 此选项用于设置应允许resizable调整大小的最小宽度.默认情况下,其值 10 . 选项 - minWidth 此选项用于设置可调整大小应允许调整大小的最小宽度.默认情况下,其值 10 . 这可以是 : 语法 $(".selector").resizable({minWidth:150}); |
以下部分将向您展示调整大小功能的一些工作示例.
以下示例演示了可调整大小功能的简单示例,没有参数 resizable()方法.
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://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:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #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>
让我们将上述代码保存在HTML文件 resizeexample.htm 中,并在支持javascript的标准浏览器中打开它,你应该看到以下输出.现在,您可以使用结果
以下示例演示了JqueryUI的resize函数中两个选项animate和ghost的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://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:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #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>
让我们将上述代码保存在HTML文件resizeexample.htm中,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。 现在,你可以玩结果
拖动方形边框以调整大小并查看动画和幻影选项的效果。
以下示例演示了JqueryUI的resize函数中三个选项containment,minHeight和minWidth的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://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:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #container-1 { width: 300px; height: 300px; } #resizable-4 {background-position: top left; width: 150px; height: 150px; } #resizable-4, #container { padding: 0.5em; } </style> <script> $(function() { $( "#resizable-4" ).resizable({ containment: "#container", minHeight: 70, minWidth: 100 }); }); </script> </head> <body> <div id = "container" class = "ui-widget-content"> <div id = "resizable-4" class = "ui-state-active"> <h3 class = "ui-widget-header"> Resize contained to this container </h3> </div> </div> </body> </html>
让我们将上述代码保存在HTML文件resizeexample.htm中,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果
拖动方形边框以调整大小,您无法在主容器之外调整大小。
以下示例演示了JqueryUI的resize函数中三个选项delay,distance和autoHide的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://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:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } .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>
让我们将上述代码保存在HTML文件resizeexample.htm中,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果
拖动方形边框以调整大小,您可以注意到这一点:
第一个方框在延迟1000ms后调整大小,
鼠标移动40px后,第二个方框开始调整大小。
将鼠标悬停在第三个方框上,出现放大图标。
以下示例演示了JqueryUI的resize函数中的optionResize的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://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:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #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!!</h3> </div><br> <div id = "resizable-9" class = "ui-widget-content"> <h3 class = "ui-widget-header">I also get resized!!</h3> </div> </body> </html>
让我们将上述代码保存在HTML文件resizeexample.htm中,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果
拖动方形边框以调整大小,您可以注意到第二个方框也随第一个方框调整大小。
以下示例演示了JqueryUI的resize函数中选项aspectRatio和grid的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://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:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } .square { width: 150px; height: 150px; border: 1px solid black; text-align: center; float: left; margin-left: 20px; margin-right: 20px; } </style> <script> $(function() { $( "#resizable-10" ).resizable({ aspectRatio: 10 / 3 }); $( "#resizable-11" ).resizable({ grid: [50,20] }); }); </script> </head> <body> <div id = "resizable-10" class = "square ui-widget-content"> <h3 class = "ui-widget-header"> Resize with aspectRatio of 10/3 </h3> </div> <div id = "resizable-11" class = "square ui-widget-content"> <h3 class = "ui-widget-header"> Snap me to the grid of [50,20] </h3> </div> </body> </html>
让我们将上述代码保存在HTML文件resizeexample.htm中,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果
拖动方形边框以调整大小,第一个方框调整大小,宽高比为10/3,第二个方框调整大小为[50,20]。
可调整大小("action",params)方法可以对可调整大小的元素执行操作,例如允许或阻止调整大小功能。 该操作在第一个参数中指定为字符串(例如,"禁用"以防止调整大小)。 请查看下表中可以传递的操作。
$(selector, context).resizable ("action", params);;
下表列出了可以与此方法一起使用的不同操作:
Sr.No. | Action & Description |
---|---|
1 | destroy 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"); |
2 | disable 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"); |
3 | enable 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"); |
4 | option( 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" ); |
5 | option() 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" ); |
6 | 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). 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 ); |
7 | option( 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 } ); |
8 | widget() 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()方法的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://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:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #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>
让我们将上面的代码保存在HTML文件resizeexample.htm中,并在支持javascript的标准浏览器中打开它,你应该看到以下输出
您无法调整第一个方框的大小,因为它已禁用,第二个方框被销毁。
除了我们在前面部分中看到的resizable(options)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下所列
Sr.No. | Event Method & Description |
---|---|
1 | create(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 ) {} }); |
2 | resize(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 −
Syntax $( ".selector" ).resizable({ resize: function( event, ui ) {} }); |
3 | start(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 −
Syntax $( ".selector" ).resizable({ start: function( event, ui ) {} }); |
4 | stop(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 −
Syntax $( ".selector" ).resizable({ stop: function( event, ui ) {} }); |
以下示例演示调整大小功能期间的事件方法用法。 此示例演示了使用事件创建和调整大小。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://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:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #resizable-14{ width: 150px; height: 150px; padding: 0.5em;text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $( "#resizable-14" ).resizable({ create: function( event, ui ) { $("#resizable-15").text ("I'm Created!!"); }, resize: function (event, ui) { $("#resizable-16").text ("top = " + ui.position.top + ", left = " + ui.position.left + ", width = " + ui.size.width + ", height = " + ui.size.height); } }); }); </script> </head> <body> <!-- HTML --> <div id = "resizable-14" class = "ui-widget-content"> <h3 class = "ui-widget-header">Resize !!</h3> </div><br> <span id = "resizable-15"></span><br> <span id = "resizable-16"></span> </body> </html>
让我们将上面的代码保存在HTML文件resizeexample.htm中,并在支持javascript的标准浏览器中打开它,应该看到以下输出
拖动方框,您将看到输出显示在resize事件上。