-
Notifications
You must be signed in to change notification settings - Fork 75
/
Copy pathresizable.xml
executable file
·249 lines (246 loc) · 13 KB
/
resizable.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<?xml version="1.0"?>
<entry name="resizable" type="widget" widget-element="resizable element" event-prefix="resize">
<title>Resizable Widget</title>
<desc>Change the size of an element using the mouse.</desc>
<longdesc>
<p>The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.</p>
<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<ul>
<li><code>ui-resizable</code>: The resizable element. During a resize, the <code>ui-resizable-resizing</code> class is added. When the <a href="#option-autoHide"><code>autoHide</code> option</a> is set, the <code>ui-resizable-autohide</code> class is added.</li>
<li><code>ui-resizable-handle</code>: One of the handles of the resizable, specified using the <a href="#option-handles"><code>handles</code> option</a>. Each handle will also have a <code>ui-resizable-{direction}</code> class according to its position.</li>
<li><code>ui-resizable-ghost</code>: When using the <a href="#option-ghost"><code>ghost</code> option</a>, this class is applied to the ghost helper element.</li>
<li><code>ui-resizable-helper</code>: When the <a href="#option-animate"><code>animate</code> option</a> is used, but the <a href="#option-helper"><code>helper</code> option</a> isn't specified, this class is added to the generated helper.</li>
</ul>
<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
<li><a href="/jQuery.widget/">Widget Factory</a></li>
<li><a href="/mouse/">Mouse Interaction</a></li>
</ul>
</longdesc>
<note id="functional-css"/>
<added>1.0</added>
<options>
<option name="alsoResize" default="false" example-value='"#mirror"'>
<desc>One or more elements to resize synchronously with the resizable element.</desc>
<type name="Selector"/>
<type name="jQuery"/>
<type name="Element"/>
</option>
<option name="animate" type="Boolean" default="false" example-value='true'>
<desc>Animates to the final size after resizing.</desc>
</option>
<option name="animateDuration" default='"slow"' example-value='"fast"'>
<desc>How long to animate when using the <a href="#option-animate"><code>animate</code></a> option.</desc>
<type name="Number">
<desc>Duration in milliseconds.</desc>
</type>
<type name="String">
<desc>A named duration, such as <code>"slow"</code> or <code>"fast"</code>.</desc>
</type>
</option>
<option name="animateEasing" type="String" default='"swing"' example-value='"easeOutBounce"'>
<desc>Which <a href="/easings/">easing</a> to apply when using the <a href="#option-animate"><code>animate</code></a> option.</desc>
</option>
<option name="aspectRatio" default="false" example-value='true'>
<desc>Whether the element should be constrained to a specific aspect ratio.</desc>
<type name="Boolean">
<desc>When set to <code>true</code>, the element will maintain its original aspect ratio.</desc>
</type>
<type name="Number">
<desc>Force the element to maintain a specific aspect ratio during resizing.</desc>
</type>
</option>
<option name="autoHide" type="Boolean" default="false" example-value='true'>
<desc>Whether the handles should hide when the user is not hovering over the element.</desc>
</option>
<option name="cancel" default='"input,textarea,button,select,option"' example-value='".cancel"'>
<desc>Prevents resizing from starting on specified elements.</desc>
<type name="Selector">
<desc>A selector specifying elements for which resizing is canceled.</desc>
</type>
<type name="Function">
<desc>A function that can return true to cancel resizing. The function receives the event object.</desc>
</type>
</option>
<option name="containment" default="false" example-value='"parent"'>
<desc>Constrains resizing to within the bounds of the specified element or region.</desc>
<type name="Selector">
<desc>The resizable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.</desc>
</type>
<type name="Element">
<desc>The resizable element will be contained to the bounding box of this element.</desc>
</type>
<type name="String">
<desc>Possible values: <code>"parent"</code> and <code>"document"</code>.</desc>
</type>
</option>
<option name="classes" type="Object">
<default>{
"ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se"
}</default>
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="delay" type="Number" default="0" example-value='150'>
<deprecated>1.12</deprecated>
<desc>Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.</desc>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="distance" type="Number" default="1" example-value='30'>
<deprecated>1.12</deprecated>
<desc>Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.</desc>
</option>
<option name="ghost" type="Boolean" default="false" example-value='true'>
<desc>If set to <code>true</code>, a semi-transparent helper element is shown for resizing.</desc>
</option>
<option name="grid" type="Array" default="false" example-value='[ 20, 10 ]'>
<desc>Snaps the resizing element to a grid, every x and y pixels. Array values: <code>[ x, y ]</code>.</desc>
</option>
<option name="handles" default='"e, s, se"' example-value='"n, e, s, w"'>
<desc>Which handles can be used for resizing.</desc>
<type name="String">
<desc>A comma delimited list of any of the following: n, e, s, w, ne, se, sw, nw, all. The necessary handles will be auto-generated by the plugin.</desc>
</type>
<type name="Object">
<desc>
<p>The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.</p>
<p><em>Note: When generating your own handles, each handle must have the <code>ui-resizable-handle</code> class, as well as the appropriate <code>ui-resizable-{direction}</code> class, .e.g., <code>ui-resizable-s</code>.</em></p>
</desc>
</type>
</option>
<option name="helper" type="String" default="false" example-value='"resizable-helper"'>
<desc>A class name that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.</desc>
</option>
<option name="maxHeight" type="Number" default="null" example-value='300'>
<desc>The maximum height the resizable should be allowed to resize to.</desc>
</option>
<option name="maxWidth" type="Number" default="null" example-value='300'>
<desc>The maximum width the resizable should be allowed to resize to.</desc>
</option>
<option name="minHeight" type="Number" default="10" example-value='150'>
<desc>The minimum height the resizable should be allowed to resize to.</desc>
</option>
<option name="minWidth" type="Number" default="10" example-value='150'>
<desc>The minimum width the resizable should be allowed to resize to.</desc>
</option>
</options>
<events>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<event name="start">
<desc>This event is triggered at the start of a resize operation.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="element" type="jQuery">
<desc>The jQuery object representing the element to be resized</desc>
</property>
<property name="helper" type="jQuery">
<desc>The jQuery object representing the helper that's being resized</desc>
</property>
<property name="originalElement" type="jQuery">
<desc>The jQuery object representing the original element before it is wrapped</desc>
</property>
<property name="originalPosition" type="Object">
<desc>The position represented as <code>{ left, top }</code> before the resizable is resized</desc>
</property>
<property name="originalSize" type="Object">
<desc>The size represented as <code>{ width, height }</code> before the resizable is resized</desc>
</property>
<property name="position" type="Object">
<desc>The current position represented as <code>{ left, top }</code></desc>
</property>
<property name="size" type="Object">
<desc>The current size represented as <code>{ width, height }</code></desc>
</property>
</argument>
</event>
<event name="resize">
<desc>This event is triggered during the resize, on the drag of the resize handler.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="element" type="jQuery">
<desc>The jQuery object representing the element to be resized</desc>
</property>
<property name="helper" type="jQuery">
<desc>The jQuery object representing the helper that's being resized</desc>
</property>
<property name="originalElement" type="jQuery">
<desc>The jQuery object representing the original element before it is wrapped</desc>
</property>
<property name="originalPosition" type="Object">
<desc>The position represented as <code>{ left, top }</code> before the resizable is resized</desc>
</property>
<property name="originalSize" type="Object">
<desc>The size represented as <code>{ width, height }</code> before the resizable is resized</desc>
</property>
<property name="position" type="Object">
<desc>The current position represented as <code>{ left, top }</code>. The values may be changed to modify where the element will be positioned. Useful for custom resizing logic.</desc>
</property>
<property name="size" type="Object">
<desc>The current size represented as <code>{ width, height }</code>. The values may be changed to modify where the element will be positioned. Useful for custom resizing logic.</desc>
</property>
</argument>
<example>
<desc>Restrict height resizing to 30 pixel increments:</desc>
<code><![CDATA[
$( ".selector" ).resizable({
resize: function( event, ui ) {
ui.size.height = Math.round( ui.size.height / 30 ) * 30;
}
});
]]></code>
</example>
</event>
<event name="stop">
<desc>This event is triggered at the end of a resize operation.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="element" type="jQuery">
<desc>The jQuery object representing the element to be resized</desc>
</property>
<property name="helper" type="jQuery">
<desc>The jQuery object representing the helper that's being resized</desc>
</property>
<property name="originalElement" type="jQuery">
<desc>The jQuery object representing the original element before it is wrapped</desc>
</property>
<property name="originalPosition" type="Object">
<desc>The position represented as <code>{ left, top }</code> before the resizable is resized</desc>
</property>
<property name="originalSize" type="Object">
<desc>The size represented as <code>{ width, height }</code> before the resizable is resized</desc>
</property>
<property name="position" type="Object">
<desc>The current position represented as <code>{ left, top }</code></desc>
</property>
<property name="size" type="Object">
<desc>The current size represented as <code>{ width, height }</code></desc>
</property>
</argument>
</event>
</events>
<methods>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-instance.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<example>
<desc>A simple jQuery UI Resizable.</desc>
<css><![CDATA[
#resizable {
width: 100px;
height: 100px;
background: #ccc;
}]]></css>
<code><![CDATA[
$( "#resizable" ).resizable();
]]></code>
<html><![CDATA[
<div id="resizable"></div>
]]></html>
</example>
<category slug="interactions"/>
</entry>