/
resizable.xml
201 lines (196 loc) · 9.48 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
<?xml version="1.0"?>
<entry name="resizable" type="widget" widget-element="resizable element">
<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>
<p>All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object.</p>
</longdesc>
<note id="functional-css"/>
<added>1.0</added>
<options>
<option name="alsoResize" default='false'>
<desc>Resize these elements synchronous when resizing.</desc>
<type name="Selector" />
<type name="jQuery" />
<type name="Element" />
</option>
<option name="animate" default='false'>
<desc>Animates to the final size after resizing.</desc>
<type name="Boolean" />
</option>
<option name="animateDuration" default='"slow"'>
<desc>Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.</desc>
<type name="Number" />
<type name="String" />
</option>
<option name="animateEasing" default='"swing"'>
<desc>Easing effect for animating.</desc>
<type name="String" />
</option>
<option name="aspectRatio" default='false'>
<desc>If set to true, resizing is constrained by the original aspect ratio. Otherwise a custom aspect ratio can be specified, such as 9 / 16, or 0.5.</desc>
<type name="Boolean" />
<type name="Number" />
</option>
<option name="autoHide" default='false'>
<desc>If set to true, automatically hides the handles except when the mouse hovers over the element.</desc>
<type name="Boolean" />
</option>
<option name="cancel" default='":input,option"'>
<desc>Prevents resizing if you start on elements matching the selector.</desc>
<type name="Selector" />
</option>
<option name="containment" default='false'>
<desc>Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.</desc>
<type name="String" />
<type name="Element" />
<type name="Selector" />
</option>
<option name="delay" default='0'>
<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>
<type name="Number" />
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="distance" default='1'>
<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>
<type name="Number" />
</option>
<option name="ghost" default='false'>
<desc>If set to true, a semi-transparent helper element is shown for resizing.</desc>
<type name="Boolean" />
</option>
<option name="grid" default='false'>
<desc>Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]</desc>
<type name="Array" />
</option>
<option name="handles" default='"e, s, se"'>
<desc>
If specified as a string, should be a comma-split 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.
<p>If specified as an object, 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>
</desc>
<type name="String" />
<type name="Object" />
</option>
<option name="helper" default='false'>
<desc>This is the css class 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>
<type name="String" />
</option>
<option name="maxHeight" default='null'>
<desc>This is the maximum height the resizable should be allowed to resize to.</desc>
<type name="Number" />
</option>
<option name="maxWidth" default='null'>
<desc>This is the maximum width the resizable should be allowed to resize to.</desc>
<type name="Number" />
</option>
<option name="minHeight" default='10'>
<desc>This is the minimum height the resizable should be allowed to resize to.</desc>
<type name="Number" />
</option>
<option name="minWidth" default='10'>
<desc>This is the minimum width the resizable should be allowed to resize to.</desc>
<type name="Number" />
</option>
</options>
<events>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<event name="start" type="resizestart">
<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" type="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></desc>
</property>
<property name="size" type="Object">
<desc>The current size represented as <code>{ width, height }</code></desc>
</property>
</argument>
</event>
<event name="stop" type="resizestop">
<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-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: silver; }]]></css>
<code><![CDATA[$("#resizable").resizable();]]></code>
<html><![CDATA[
<div id="resizable"></div>
]]></html>
</example>
<category slug="interactions"/>
</entry>