JQuery UI – resizable



·概述 resizable插件可以让选中的元素具有改变尺寸的功能。

官方示例地址：http://jqueryui.com/demos/resizable/

所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象

ui.helper – 表示当前被改变尺寸的元素的JQuery对象

ui.originalPosition – 表示未改变尺寸之前元素的位置{top,left}

ui.originalSize – 表示未改变尺寸之前元素的大小{width,height}

ui.position – 表示当前被改变尺寸的元素的坐标值对象{top,left}

ui.size – 表示当前被改变尺寸的元素的大小值对象{width,height}

·参数（参数名 : 参数类型 : 默认值）

alsoResize : Selector, jQuery, ElementDefault : false

当调整元素大小时，同步改变另一个（或一组）元素的大小。

初始：$(‘.selector’).resizable({ alsoResize: ‘.other’ });

获取：var alsoResize = $(‘.selector’).resizable(‘option’, ‘alsoResize’);

设置：$(‘.selector’).resizable(‘option’, ‘alsoResize’, ‘.other’);

animate : Boolean : false

在调整元素大小结束之后是否显示动画

初始：$(‘.selector’).resizable({ animate: true });

获取：var animate = $(‘.selector’).resizable(‘option’, ‘animate’);

设置：$(‘.selector’).resizable(‘option’, ‘animate’, true);

animateDuration : Integer, String : ‘slow’

动画效果的持续时间。（单位：毫秒）可选值：’slow’, ‘normal’, ‘fast’

初始：$(‘.selector’).resizable({ animateDuration: 500 });

获取：var animateDuration = $(‘.selector’).resizable(‘option’, ‘animateDuration’);

设置：$(‘.selector’).resizable(‘option’, ‘animateDuration’, 500);

animateEasing : String : ‘swing’   选择何种动画效果。

初始：$(‘.selector’).resizable({ animateEasing: ‘swing’ });

获取：var animateEasing = $(‘.selector’).resizable(‘option’, ‘animateEasing’);

设置：$(‘.selector’).resizable(‘option’, ‘animateEasing’, ‘swing’);

aspectRatio : Boolean, Float : false

如果设置为true，则元素的可调整尺寸受原来大小的限制。例如：9 / 16, or 0.5

初始：$(‘.selector’).resizable({ aspectRatio: .75 });

获取：var aspectRatio = $(‘.selector’).resizable(‘option’, ‘aspectRatio’);

设置：$(‘.selector’).resizable(‘option’, ‘aspectRatio’, .75);

autoHide : Boolean : false

如果设置为true，则默认隐藏掉可调整大小的手柄，除非鼠标移至元素上。

初始：$(‘.selector’).resizable({ autoHide: true });

获取：var autoHide = $(‘.selector’).resizable(‘option’, ‘autoHide’);

设置：$(‘.selector’).resizable(‘option’, ‘autoHide’, true);

cancel : Selector : ‘:input,option’

阻止resizable插件加载在与你匹配的元素上。

初始：$(‘.selector’).resizable({ cancel: ‘:input,option’ });

获取：var cancel = $(‘.selector’).resizable(‘option’, ‘cancel’);

设置：$(‘.selector’).resizable(‘option’, ‘cancel’, ‘:input,option’);

containment : String, Element, Selector : false

控制元素只能在某一个元素的大小之内改变。允许值：’parent’, ‘document’, DOM元素, 或一个选择器.

初始：$(‘.selector’).resizable({ containment: ‘parent’ });

获取：var containment = $(‘.selector’).resizable(‘option’, ‘containment’);

设置：$(‘.selector’).resizable(‘option’, ‘containment’, ‘parent’);

delay : Integer : 0

以毫秒为单位，当发生鼠标点击手柄改变大小，延迟多少毫秒后才激活事件。

初始：$(‘.selector’).resizable({ delay: 20 });

获取：var delay = $(‘.selector’).resizable(‘option’, ‘delay’);

设置：$(‘.selector’).resizable(‘option’, ‘delay’, 20);

distance : Integer : 1

以像素为单位，当发生鼠标点击手柄改变大小，延迟多少像素后才激活事件。

初始：$(‘.selector’).resizable({ distance: 20 });

获取：var distance = $(‘.selector’).resizable(‘option’, ‘distance’);

设置：$(‘.selector’).resizable(‘option’, ‘distance’, 20);

ghost : Boolean : false

如果设置为true，则在调整元素大小时，有一个半透明的辅助对象显示。

初始：$(‘.selector’).resizable({ ghost: true });

获取：var grid = $(‘.selector’).resizable(‘option’, ‘ghost’);

设置：$(‘.selector’).resizable(‘option’, ‘ghost’, true);

grid : Array : false

设置元素调整的大小随网格变化，允许的数据为：{x,y}

初始：$(‘.selector’).resizable({ grid: [50, 50] });

获取：var grid = $(‘.selector’).resizable(‘option’, ‘grid’);

设置：$(‘.selector’).resizable(‘option’, ‘grid’, [50, 50]);

handles : String, Object : ‘e, s, se’

设置resizable插件允许生成在元素的哪个边上，可选值：n, e, s, w, ne, se, sw, nw, all

初始：$(‘.selector’).resizable({ handles: ‘n, e, s, w’ });

获取：var handles = $(‘.selector’).resizable(‘option’, ‘handles’);

设置：$(‘.selector’).resizable(‘option’, ‘handles’, ‘n, e, s, w’);

helper : String : false

一个CSS类，当调整元素大小时，将被添加到辅助元素中，一但调整结束则恢复正常。

初始：$(‘.selector’).resizable({ helper: ‘ui-state-highlight’ });   获取：var helper = $(‘.selector’).resizable(‘option’, ‘helper’);   设置：$(‘.selector’).resizable(‘option’, ‘helper’, ‘ui-state-highlight’);

maxHeight : Integer : null

设置允许元素调整的最大高度。

初始：$(‘.selector’).resizable({ maxHeight: 300 });

获取：var maxHeight = $(‘.selector’).resizable(‘option’, ‘maxHeight’);

设置：$(‘.selector’).resizable(‘option’, ‘maxHeight’, 300);

maxWidth : Integer : null

设置允许元素调整的最大宽度。

初始：$(‘.selector’).resizable({ maxWidth: 250 });

获取：var maxWidth = $(‘.selector’).resizable(‘option’, ‘maxWidth’);

设置：$(‘.selector’).resizable(‘option’, ‘maxWidth’, 250);

minHeight : Integer : 10

设置允许元素调整的最小高度。

初始：$(‘.selector’).resizable({ minHeight: 150 });

获取：var minHeight = $(‘.selector’).resizable(‘option’, ‘minHeight’);

设置：$(‘.selector’).resizable(‘option’, ‘minHeight’, 150);

minWidth : Integer : 10

设置允许元素调整的最小宽度。

初始：$(‘.selector’).resizable({ minWidth: 75 });

获取：var minWidth = $(‘.selector’).resizable(‘option’, ‘minWidth’);

设置：$(‘.selector’).resizable(‘option’, ‘minWidth’, 75);

·事件

start

当元素调整动作开始时触发。

初始：$(‘.selector’).resizable({ start: function(event, ui) { … } });

绑定：$(‘.selector’).bind(‘resizestart’, function(event, ui) { … });

resize

当元素调整动作过程中触发。

初始：$(‘.selector’).resizable({ resize: function(event, ui) { … } });

绑定：$(‘.selector’).bind(‘resize’, function(event, ui) { … });

stop

当元素调整动作结束时触发。

初始：$(‘.selector’).resizable({ stop: function(event, ui) { … } });

绑定：$(‘.selector’).bind(‘resizestop’, function(event, ui) { … });

·方法

destory

从元素中移除拖拽功能。

用法：.droppable( ‘destroy’ )

disable

禁用元素的拖拽功能。

用法：.droppable( ‘disable’ )

enable

启用元素的拖拽功能。

用法：.droppable( ‘enable’ )

option

获取或设置元素的参数。

用法：.droppable( ‘option’ , optionName , [value] )

————————————————————————————————————

1. 概述
2. resizable插件可以让选中的元素具有改变尺寸的功能。
3. 官方示例地址：http://jqueryui.com/demos/resizable/
4. 所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象
5. ui.helper – 表示当前被改变尺寸的元素的JQuery对象
6. ui.originalPosition – 表示未改变尺寸之前元素的位置{top,left}
7. ui.originalSize – 表示未改变尺寸之前元素的大小{width,height}
8. ui.position – 表示当前被改变尺寸的元素的坐标值对象{top,left}
9. ui.size – 表示当前被改变尺寸的元素的大小值对象{width,height}
10. ·参数（参数名 : 参数类型 : 默认值）
11. alsoResize : Selector, jQuery, ElementDefault : false
12. 当调整元素大小时，同步改变另一个（或一组）元素的大小。
13. 初始：$(‘.selector’).resizable({ alsoResize: ‘.other’ });
14. 获取：var alsoResize = $(‘.selector’).resizable(‘option’, ‘alsoResize’);
15. 设置：$(‘.selector’).resizable(‘option’, ‘alsoResize’, ‘.other’);
16. animate : Boolean : false
17. 在调整元素大小结束之后是否显示动画
18. 初始：$(‘.selector’).resizable({ animate: true });
19. 获取：var animate = $(‘.selector’).resizable(‘option’, ‘animate’);
20. 设置：$(‘.selector’).resizable(‘option’, ‘animate’, true);
21. animateDuration : Integer, String : ‘slow’
22. 动画效果的持续时间。（单位：毫秒）可选值：’slow’, ‘normal’, ‘fast’
23. 初始：$(‘.selector’).resizable({ animateDuration: 500 });
24. 获取：var animateDuration = $(‘.selector’).resizable(‘option’, ‘animateDuration’);
25. 设置：$(‘.selector’).resizable(‘option’, ‘animateDuration’, 500);
26. animateEasing : String : ‘swing’
27. 选择何种动画效果。
28. 初始：$(‘.selector’).resizable({ animateEasing: ‘swing’ });
29. 获取：var animateEasing = $(‘.selector’).resizable(‘option’, ‘animateEasing’);
30. 设置：$(‘.selector’).resizable(‘option’, ‘animateEasing’, ‘swing’);
31. aspectRatio : Boolean, Float : false
32. 如果设置为true，则元素的可调整尺寸受原来大小的限制。例如：9 / 16, or 0.5
33. 初始：$(‘.selector’).resizable({ aspectRatio: .75 });
34. 获取：var aspectRatio = $(‘.selector’).resizable(‘option’, ‘aspectRatio’);
35. 设置：$(‘.selector’).resizable(‘option’, ‘aspectRatio’, .75);
36. autoHide : Boolean : false
37. 如果设置为true，则默认隐藏掉可调整大小的手柄，除非鼠标移至元素上。
38. 初始：$(‘.selector’).resizable({ autoHide: true });
39. 获取：var autoHide = $(‘.selector’).resizable(‘option’, ‘autoHide’);
40. 设置：$(‘.selector’).resizable(‘option’, ‘autoHide’, true);
41. cancel : Selector : ‘:input,option’
42. 阻止resizable插件加载在与你匹配的元素上。
43. 初始：$(‘.selector’).resizable({ cancel: ‘:input,option’ });
44. 获取：var cancel = $(‘.selector’).resizable(‘option’, ‘cancel’);
45. 设置：$(‘.selector’).resizable(‘option’, ‘cancel’, ‘:input,option’);
46. containment : String, Element, Selector : false
47. 控制元素只能在某一个元素的大小之内改变。允许值：’parent’, ‘document’, DOM元素, 或一个选择器.
48. 初始：$(‘.selector’).resizable({ containment: ‘parent’ });
49. 获取：var containment = $(‘.selector’).resizable(‘option’, ‘containment’);
50. 设置：$(‘.selector’).resizable(‘option’, ‘containment’, ‘parent’);
51. delay : Integer : 0
52. 以毫秒为单位，当发生鼠标点击手柄改变大小，延迟多少毫秒后才激活事件。
53. 初始：$(‘.selector’).resizable({ delay: 20 });
54. 获取：var delay = $(‘.selector’).resizable(‘option’, ‘delay’);
55. 设置：$(‘.selector’).resizable(‘option’, ‘delay’, 20);
56. distance : Integer : 1
57. 以像素为单位，当发生鼠标点击手柄改变大小，延迟多少像素后才激活事件。
58. 初始：$(‘.selector’).resizable({ distance: 20 });
59. 获取：var distance = $(‘.selector’).resizable(‘option’, ‘distance’);
60. 设置：$(‘.selector’).resizable(‘option’, ‘distance’, 20);
61. ghost : Boolean : false
62. 如果设置为true，则在调整元素大小时，有一个半透明的辅助对象显示。
63. 初始：$(‘.selector’).resizable({ ghost: true });
64. 获取：var grid = $(‘.selector’).resizable(‘option’, ‘ghost’);
65. 设置：$(‘.selector’).resizable(‘option’, ‘ghost’, true);
66. grid : Array : false
67. 设置元素调整的大小随网格变化，允许的数据为：{x,y}
68. 初始：$(‘.selector’).resizable({ grid: [50, 50] });
69. 获取：var grid = $(‘.selector’).resizable(‘option’, ‘grid’);
70. 设置：$(‘.selector’).resizable(‘option’, ‘grid’, [50, 50]);
71. handles : String, Object : ‘e, s, se’
72. 设置resizable插件允许生成在元素的哪个边上，可选值：n, e, s, w, ne, se, sw, nw, all
73. 初始：$(‘.selector’).resizable({ handles: ‘n, e, s, w’ });
74. 获取：var handles = $(‘.selector’).resizable(‘option’, ‘handles’);
75. 设置：$(‘.selector’).resizable(‘option’, ‘handles’, ‘n, e, s, w’);
76. helper : String : false
77. 一个CSS类，当调整元素大小时，将被添加到辅助元素中，一但调整结束则恢复正常。
78. 初始：$(‘.selector’).resizable({ helper: ‘ui-state-highlight’ });
79. 获取：var helper = $(‘.selector’).resizable(‘option’, ‘helper’);
80. 设置：$(‘.selector’).resizable(‘option’, ‘helper’, ‘ui-state-highlight’);
81. maxHeight : Integer : null
82. 设置允许元素调整的最大高度。
83. 初始：$(‘.selector’).resizable({ maxHeight: 300 });
84. 获取：var maxHeight = $(‘.selector’).resizable(‘option’, ‘maxHeight’);
85. 设置：$(‘.selector’).resizable(‘option’, ‘maxHeight’, 300);
86. maxWidth : Integer : null
87. 设置允许元素调整的最大宽度。
88. 初始：$(‘.selector’).resizable({ maxWidth: 250 });
89. 获取：var maxWidth = $(‘.selector’).resizable(‘option’, ‘maxWidth’);
90. 设置：$(‘.selector’).resizable(‘option’, ‘maxWidth’, 250);
91. minHeight : Integer : 10
92. 设置允许元素调整的最小高度。
93. 初始：$(‘.selector’).resizable({ minHeight: 150 });
94. 获取：var minHeight = $(‘.selector’).resizable(‘option’, ‘minHeight’);
95. 设置：$(‘.selector’).resizable(‘option’, ‘minHeight’, 150);
96. minWidth : Integer : 10
97. 设置允许元素调整的最小宽度。
98. 初始：$(‘.selector’).resizable({ minWidth: 75 });
99. 获取：var minWidth = $(‘.selector’).resizable(‘option’, ‘minWidth’);
100. 设置：$(‘.selector’).resizable(‘option’, ‘minWidth’, 75);
101. ·事件
102. start
103. 当元素调整动作开始时触发。
104. 初始：$(‘.selector’).resizable({ start: function(event, ui) { … } });
105. 绑定：$(‘.selector’).bind(‘resizestart’, function(event, ui) { … });
106. resize
107. 当元素调整动作过程中触发。
108. 初始：$(‘.selector’).resizable({ resize: function(event, ui) { … } });
109. 绑定：$(‘.selector’).bind(‘resize’, function(event, ui) { … });
110. stop
111. 当元素调整动作结束时触发。
112. 初始：$(‘.selector’).resizable({ stop: function(event, ui) { … } });
113. 绑定：$(‘.selector’).bind(‘resizestop’, function(event, ui) { … });
114. ·方法
115. destory
116. 从元素中移除拖拽功能。
117. 用法：.droppable( ‘destroy’ )
118. disable
119. 禁用元素的拖拽功能。
120. 用法：.droppable( ‘disable’ )
121. enable
122. 启用元素的拖拽功能。
123. 用法：.droppable( ‘enable’ )
124. option
125. 获取或设置元素的参数。
126. 用法：.droppable( ‘option’ , optionName , [value] )