|
0
|
1
|
|
|
2 <ul class="UIAPIPlugin-toc">
|
|
|
3 <li><a href="#overview">Overview</a></li>
|
|
|
4 <li><a href="#options">Options</a></li>
|
|
|
5 <li><a href="#events">Events</a></li>
|
|
|
6 <li><a href="#methods">Methods</a></li>
|
|
|
7 <li><a href="#theming">Theming</a></li>
|
|
|
8 </ul>
|
|
|
9 <div class="UIAPIPlugin">
|
|
|
10 <h1>jQuery UI Resizable</h1>
|
|
|
11 <div id="overview">
|
|
|
12 <h2 class="top-header">Overview</h2>
|
|
|
13 <div id="overview-main">
|
|
|
14 <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>
|
|
|
15 <p>All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields:</p>
|
|
|
16 <ul>
|
|
|
17 <li><b>ui.helper</b> - a jQuery object containing the helper element</li>
|
|
|
18 <li><b>ui.originalPosition</b> - {top, left} before resizing started</li>
|
|
|
19 <li><b>ui.originalSize</b> - {width, height} before resizing started</li>
|
|
|
20 <li><b>ui.position</b> - {top, left} current position</li>
|
|
|
21 <li><b>ui.size</b> - {width, height} current size</li>
|
|
|
22 </ul>
|
|
|
23 </div>
|
|
|
24 <div id="overview-dependencies">
|
|
|
25 <h3>Dependencies</h3>
|
|
|
26 <ul>
|
|
|
27 <li>UI Core</li>
|
|
|
28 <li>UI Widget</li>
|
|
|
29 <li>UI Mouse</li>
|
|
|
30 </ul>
|
|
|
31 </div>
|
|
|
32 <div id="overview-example">
|
|
|
33 <h3>Example</h3>
|
|
|
34 <div id="overview-example" class="example">
|
|
|
35 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
|
|
|
36 <p><div id="demo" class="tabs-container" rel="250">
|
|
|
37 A simple jQuery UI Resizable.<br />
|
|
|
38 </p>
|
|
|
39 <pre>$("#resizable").resizable();
|
|
|
40 </pre>
|
|
|
41 <p></div><div id="source" class="tabs-container">
|
|
|
42 </p>
|
|
|
43 <pre><!DOCTYPE html>
|
|
|
44 <html>
|
|
|
45 <head>
|
|
|
46 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
|
|
|
47 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
|
|
48 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
|
|
|
49 <style type="text/css">
|
|
|
50 #resizable { width: 100px; height: 100px; background: silver; }
|
|
|
51 </style>
|
|
|
52 <script>
|
|
|
53 $(document).ready(function() {
|
|
|
54 $("#resizable").resizable();
|
|
|
55 });
|
|
|
56 </script>
|
|
|
57 </head>
|
|
|
58 <body style="font-size:62.5%;">
|
|
|
59
|
|
|
60 <div id="resizable"></div>
|
|
|
61
|
|
|
62 </body>
|
|
|
63 </html>
|
|
|
64 </pre>
|
|
|
65 <p></div>
|
|
|
66 </p><p></div>
|
|
|
67 </div>
|
|
|
68 </div>
|
|
|
69 <div id="options">
|
|
|
70 <h2 class="top-header">Options</h2>
|
|
|
71 <ul class="options-list">
|
|
|
72
|
|
|
73 <li class="option" id="option-disabled">
|
|
|
74 <div class="option-header">
|
|
|
75 <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
|
|
|
76 <dl>
|
|
|
77 <dt class="option-type-label">Type:</dt>
|
|
|
78 <dd class="option-type">Boolean</dd>
|
|
|
79
|
|
|
80 <dt class="option-default-label">Default:</dt>
|
|
|
81 <dd class="option-default">false</dd>
|
|
|
82
|
|
|
83 </dl>
|
|
|
84 </div>
|
|
|
85 <div class="option-description">
|
|
|
86 <p>Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable.</p>
|
|
|
87 </div>
|
|
|
88 <div class="option-examples">
|
|
|
89 <h4>Code examples</h4>
|
|
|
90 <dl class="option-examples-list">
|
|
|
91
|
|
|
92 <dt>
|
|
|
93 Initialize a resizable with the <code>disabled</code> option specified.
|
|
|
94 </dt>
|
|
|
95 <dd>
|
|
|
96 <pre><code>$( ".selector" ).resizable({ disabled: true });</code></pre>
|
|
|
97 </dd>
|
|
|
98
|
|
|
99
|
|
|
100 <dt>
|
|
|
101 Get or set the <code>disabled</code> option, after init.
|
|
|
102 </dt>
|
|
|
103 <dd>
|
|
|
104 <pre><code>//getter
|
|
|
105 var disabled = $( ".selector" ).resizable( "option", "disabled" );
|
|
|
106 //setter
|
|
|
107 $( ".selector" ).resizable( "option", "disabled", true );</code></pre>
|
|
|
108 </dd>
|
|
|
109
|
|
|
110 </dl>
|
|
|
111 </div>
|
|
|
112 </li>
|
|
|
113
|
|
|
114
|
|
|
115 <li class="option" id="option-alsoResize">
|
|
|
116 <div class="option-header">
|
|
|
117 <h3 class="option-name"><a href="#option-alsoResize">alsoResize</a></h3>
|
|
|
118 <dl>
|
|
|
119 <dt class="option-type-label">Type:</dt>
|
|
|
120 <dd class="option-type">Selector, jQuery, Element</dd>
|
|
|
121
|
|
|
122 <dt class="option-default-label">Default:</dt>
|
|
|
123 <dd class="option-default">false</dd>
|
|
|
124
|
|
|
125 </dl>
|
|
|
126 </div>
|
|
|
127 <div class="option-description">
|
|
|
128 <p>Resize these elements synchronous when resizing.</p>
|
|
|
129 </div>
|
|
|
130 <div class="option-examples">
|
|
|
131 <h4>Code examples</h4>
|
|
|
132 <dl class="option-examples-list">
|
|
|
133
|
|
|
134 <dt>
|
|
|
135 Initialize a resizable with the <code>alsoResize</code> option specified.
|
|
|
136 </dt>
|
|
|
137 <dd>
|
|
|
138 <pre><code>$( ".selector" ).resizable({ alsoResize: '.other' });</code></pre>
|
|
|
139 </dd>
|
|
|
140
|
|
|
141
|
|
|
142 <dt>
|
|
|
143 Get or set the <code>alsoResize</code> option, after init.
|
|
|
144 </dt>
|
|
|
145 <dd>
|
|
|
146 <pre><code>//getter
|
|
|
147 var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
|
|
|
148 //setter
|
|
|
149 $( ".selector" ).resizable( "option", "alsoResize", '.other' );</code></pre>
|
|
|
150 </dd>
|
|
|
151
|
|
|
152 </dl>
|
|
|
153 </div>
|
|
|
154 </li>
|
|
|
155
|
|
|
156
|
|
|
157 <li class="option" id="option-animate">
|
|
|
158 <div class="option-header">
|
|
|
159 <h3 class="option-name"><a href="#option-animate">animate</a></h3>
|
|
|
160 <dl>
|
|
|
161 <dt class="option-type-label">Type:</dt>
|
|
|
162 <dd class="option-type">Boolean</dd>
|
|
|
163
|
|
|
164 <dt class="option-default-label">Default:</dt>
|
|
|
165 <dd class="option-default">false</dd>
|
|
|
166
|
|
|
167 </dl>
|
|
|
168 </div>
|
|
|
169 <div class="option-description">
|
|
|
170 <p>Animates to the final size after resizing.</p>
|
|
|
171 </div>
|
|
|
172 <div class="option-examples">
|
|
|
173 <h4>Code examples</h4>
|
|
|
174 <dl class="option-examples-list">
|
|
|
175
|
|
|
176 <dt>
|
|
|
177 Initialize a resizable with the <code>animate</code> option specified.
|
|
|
178 </dt>
|
|
|
179 <dd>
|
|
|
180 <pre><code>$( ".selector" ).resizable({ animate: true });</code></pre>
|
|
|
181 </dd>
|
|
|
182
|
|
|
183
|
|
|
184 <dt>
|
|
|
185 Get or set the <code>animate</code> option, after init.
|
|
|
186 </dt>
|
|
|
187 <dd>
|
|
|
188 <pre><code>//getter
|
|
|
189 var animate = $( ".selector" ).resizable( "option", "animate" );
|
|
|
190 //setter
|
|
|
191 $( ".selector" ).resizable( "option", "animate", true );</code></pre>
|
|
|
192 </dd>
|
|
|
193
|
|
|
194 </dl>
|
|
|
195 </div>
|
|
|
196 </li>
|
|
|
197
|
|
|
198
|
|
|
199 <li class="option" id="option-animateDuration">
|
|
|
200 <div class="option-header">
|
|
|
201 <h3 class="option-name"><a href="#option-animateDuration">animateDuration</a></h3>
|
|
|
202 <dl>
|
|
|
203 <dt class="option-type-label">Type:</dt>
|
|
|
204 <dd class="option-type">Integer, String</dd>
|
|
|
205
|
|
|
206 <dt class="option-default-label">Default:</dt>
|
|
|
207 <dd class="option-default">'slow'</dd>
|
|
|
208
|
|
|
209 </dl>
|
|
|
210 </div>
|
|
|
211 <div class="option-description">
|
|
|
212 <p>Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.</p>
|
|
|
213 </div>
|
|
|
214 <div class="option-examples">
|
|
|
215 <h4>Code examples</h4>
|
|
|
216 <dl class="option-examples-list">
|
|
|
217
|
|
|
218 <dt>
|
|
|
219 Initialize a resizable with the <code>animateDuration</code> option specified.
|
|
|
220 </dt>
|
|
|
221 <dd>
|
|
|
222 <pre><code>$( ".selector" ).resizable({ animateDuration: 500 });</code></pre>
|
|
|
223 </dd>
|
|
|
224
|
|
|
225
|
|
|
226 <dt>
|
|
|
227 Get or set the <code>animateDuration</code> option, after init.
|
|
|
228 </dt>
|
|
|
229 <dd>
|
|
|
230 <pre><code>//getter
|
|
|
231 var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
|
|
|
232 //setter
|
|
|
233 $( ".selector" ).resizable( "option", "animateDuration", 500 );</code></pre>
|
|
|
234 </dd>
|
|
|
235
|
|
|
236 </dl>
|
|
|
237 </div>
|
|
|
238 </li>
|
|
|
239
|
|
|
240
|
|
|
241 <li class="option" id="option-animateEasing">
|
|
|
242 <div class="option-header">
|
|
|
243 <h3 class="option-name"><a href="#option-animateEasing">animateEasing</a></h3>
|
|
|
244 <dl>
|
|
|
245 <dt class="option-type-label">Type:</dt>
|
|
|
246 <dd class="option-type">String</dd>
|
|
|
247
|
|
|
248 <dt class="option-default-label">Default:</dt>
|
|
|
249 <dd class="option-default">'swing'</dd>
|
|
|
250
|
|
|
251 </dl>
|
|
|
252 </div>
|
|
|
253 <div class="option-description">
|
|
|
254 <p>Easing effect for animating.</p>
|
|
|
255 </div>
|
|
|
256 <div class="option-examples">
|
|
|
257 <h4>Code examples</h4>
|
|
|
258 <dl class="option-examples-list">
|
|
|
259
|
|
|
260 <dt>
|
|
|
261 Initialize a resizable with the <code>animateEasing</code> option specified.
|
|
|
262 </dt>
|
|
|
263 <dd>
|
|
|
264 <pre><code>$( ".selector" ).resizable({ animateEasing: 'swing' });</code></pre>
|
|
|
265 </dd>
|
|
|
266
|
|
|
267
|
|
|
268 <dt>
|
|
|
269 Get or set the <code>animateEasing</code> option, after init.
|
|
|
270 </dt>
|
|
|
271 <dd>
|
|
|
272 <pre><code>//getter
|
|
|
273 var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
|
|
|
274 //setter
|
|
|
275 $( ".selector" ).resizable( "option", "animateEasing", 'swing' );</code></pre>
|
|
|
276 </dd>
|
|
|
277
|
|
|
278 </dl>
|
|
|
279 </div>
|
|
|
280 </li>
|
|
|
281
|
|
|
282
|
|
|
283 <li class="option" id="option-aspectRatio">
|
|
|
284 <div class="option-header">
|
|
|
285 <h3 class="option-name"><a href="#option-aspectRatio">aspectRatio</a></h3>
|
|
|
286 <dl>
|
|
|
287 <dt class="option-type-label">Type:</dt>
|
|
|
288 <dd class="option-type">Boolean, Float</dd>
|
|
|
289
|
|
|
290 <dt class="option-default-label">Default:</dt>
|
|
|
291 <dd class="option-default">false</dd>
|
|
|
292
|
|
|
293 </dl>
|
|
|
294 </div>
|
|
|
295 <div class="option-description">
|
|
|
296 <p>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.</p>
|
|
|
297 </div>
|
|
|
298 <div class="option-examples">
|
|
|
299 <h4>Code examples</h4>
|
|
|
300 <dl class="option-examples-list">
|
|
|
301
|
|
|
302 <dt>
|
|
|
303 Initialize a resizable with the <code>aspectRatio</code> option specified.
|
|
|
304 </dt>
|
|
|
305 <dd>
|
|
|
306 <pre><code>$( ".selector" ).resizable({ aspectRatio: .75 });</code></pre>
|
|
|
307 </dd>
|
|
|
308
|
|
|
309
|
|
|
310 <dt>
|
|
|
311 Get or set the <code>aspectRatio</code> option, after init.
|
|
|
312 </dt>
|
|
|
313 <dd>
|
|
|
314 <pre><code>//getter
|
|
|
315 var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
|
|
|
316 //setter
|
|
|
317 $( ".selector" ).resizable( "option", "aspectRatio", .75 );</code></pre>
|
|
|
318 </dd>
|
|
|
319
|
|
|
320 </dl>
|
|
|
321 </div>
|
|
|
322 </li>
|
|
|
323
|
|
|
324
|
|
|
325 <li class="option" id="option-autoHide">
|
|
|
326 <div class="option-header">
|
|
|
327 <h3 class="option-name"><a href="#option-autoHide">autoHide</a></h3>
|
|
|
328 <dl>
|
|
|
329 <dt class="option-type-label">Type:</dt>
|
|
|
330 <dd class="option-type">Boolean</dd>
|
|
|
331
|
|
|
332 <dt class="option-default-label">Default:</dt>
|
|
|
333 <dd class="option-default">false</dd>
|
|
|
334
|
|
|
335 </dl>
|
|
|
336 </div>
|
|
|
337 <div class="option-description">
|
|
|
338 <p>If set to true, automatically hides the handles except when the mouse hovers over the element.</p>
|
|
|
339 </div>
|
|
|
340 <div class="option-examples">
|
|
|
341 <h4>Code examples</h4>
|
|
|
342 <dl class="option-examples-list">
|
|
|
343
|
|
|
344 <dt>
|
|
|
345 Initialize a resizable with the <code>autoHide</code> option specified.
|
|
|
346 </dt>
|
|
|
347 <dd>
|
|
|
348 <pre><code>$( ".selector" ).resizable({ autoHide: true });</code></pre>
|
|
|
349 </dd>
|
|
|
350
|
|
|
351
|
|
|
352 <dt>
|
|
|
353 Get or set the <code>autoHide</code> option, after init.
|
|
|
354 </dt>
|
|
|
355 <dd>
|
|
|
356 <pre><code>//getter
|
|
|
357 var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
|
|
|
358 //setter
|
|
|
359 $( ".selector" ).resizable( "option", "autoHide", true );</code></pre>
|
|
|
360 </dd>
|
|
|
361
|
|
|
362 </dl>
|
|
|
363 </div>
|
|
|
364 </li>
|
|
|
365
|
|
|
366
|
|
|
367 <li class="option" id="option-cancel">
|
|
|
368 <div class="option-header">
|
|
|
369 <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
|
|
|
370 <dl>
|
|
|
371 <dt class="option-type-label">Type:</dt>
|
|
|
372 <dd class="option-type">Selector</dd>
|
|
|
373
|
|
|
374 <dt class="option-default-label">Default:</dt>
|
|
|
375 <dd class="option-default">':input,option'</dd>
|
|
|
376
|
|
|
377 </dl>
|
|
|
378 </div>
|
|
|
379 <div class="option-description">
|
|
|
380 <p>Prevents resizing if you start on elements matching the selector.</p>
|
|
|
381 </div>
|
|
|
382 <div class="option-examples">
|
|
|
383 <h4>Code examples</h4>
|
|
|
384 <dl class="option-examples-list">
|
|
|
385
|
|
|
386 <dt>
|
|
|
387 Initialize a resizable with the <code>cancel</code> option specified.
|
|
|
388 </dt>
|
|
|
389 <dd>
|
|
|
390 <pre><code>$( ".selector" ).resizable({ cancel: ':input,option' });</code></pre>
|
|
|
391 </dd>
|
|
|
392
|
|
|
393
|
|
|
394 <dt>
|
|
|
395 Get or set the <code>cancel</code> option, after init.
|
|
|
396 </dt>
|
|
|
397 <dd>
|
|
|
398 <pre><code>//getter
|
|
|
399 var cancel = $( ".selector" ).resizable( "option", "cancel" );
|
|
|
400 //setter
|
|
|
401 $( ".selector" ).resizable( "option", "cancel", ':input,option' );</code></pre>
|
|
|
402 </dd>
|
|
|
403
|
|
|
404 </dl>
|
|
|
405 </div>
|
|
|
406 </li>
|
|
|
407
|
|
|
408
|
|
|
409 <li class="option" id="option-containment">
|
|
|
410 <div class="option-header">
|
|
|
411 <h3 class="option-name"><a href="#option-containment">containment</a></h3>
|
|
|
412 <dl>
|
|
|
413 <dt class="option-type-label">Type:</dt>
|
|
|
414 <dd class="option-type">String, Element, Selector</dd>
|
|
|
415
|
|
|
416 <dt class="option-default-label">Default:</dt>
|
|
|
417 <dd class="option-default">false</dd>
|
|
|
418
|
|
|
419 </dl>
|
|
|
420 </div>
|
|
|
421 <div class="option-description">
|
|
|
422 <p>Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.</p>
|
|
|
423 </div>
|
|
|
424 <div class="option-examples">
|
|
|
425 <h4>Code examples</h4>
|
|
|
426 <dl class="option-examples-list">
|
|
|
427
|
|
|
428 <dt>
|
|
|
429 Initialize a resizable with the <code>containment</code> option specified.
|
|
|
430 </dt>
|
|
|
431 <dd>
|
|
|
432 <pre><code>$( ".selector" ).resizable({ containment: 'parent' });</code></pre>
|
|
|
433 </dd>
|
|
|
434
|
|
|
435
|
|
|
436 <dt>
|
|
|
437 Get or set the <code>containment</code> option, after init.
|
|
|
438 </dt>
|
|
|
439 <dd>
|
|
|
440 <pre><code>//getter
|
|
|
441 var containment = $( ".selector" ).resizable( "option", "containment" );
|
|
|
442 //setter
|
|
|
443 $( ".selector" ).resizable( "option", "containment", 'parent' );</code></pre>
|
|
|
444 </dd>
|
|
|
445
|
|
|
446 </dl>
|
|
|
447 </div>
|
|
|
448 </li>
|
|
|
449
|
|
|
450
|
|
|
451 <li class="option" id="option-delay">
|
|
|
452 <div class="option-header">
|
|
|
453 <h3 class="option-name"><a href="#option-delay">delay</a></h3>
|
|
|
454 <dl>
|
|
|
455 <dt class="option-type-label">Type:</dt>
|
|
|
456 <dd class="option-type">Integer</dd>
|
|
|
457
|
|
|
458 <dt class="option-default-label">Default:</dt>
|
|
|
459 <dd class="option-default">0</dd>
|
|
|
460
|
|
|
461 </dl>
|
|
|
462 </div>
|
|
|
463 <div class="option-description">
|
|
|
464 <p>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.</p>
|
|
|
465 </div>
|
|
|
466 <div class="option-examples">
|
|
|
467 <h4>Code examples</h4>
|
|
|
468 <dl class="option-examples-list">
|
|
|
469
|
|
|
470 <dt>
|
|
|
471 Initialize a resizable with the <code>delay</code> option specified.
|
|
|
472 </dt>
|
|
|
473 <dd>
|
|
|
474 <pre><code>$( ".selector" ).resizable({ delay: 20 });</code></pre>
|
|
|
475 </dd>
|
|
|
476
|
|
|
477
|
|
|
478 <dt>
|
|
|
479 Get or set the <code>delay</code> option, after init.
|
|
|
480 </dt>
|
|
|
481 <dd>
|
|
|
482 <pre><code>//getter
|
|
|
483 var delay = $( ".selector" ).resizable( "option", "delay" );
|
|
|
484 //setter
|
|
|
485 $( ".selector" ).resizable( "option", "delay", 20 );</code></pre>
|
|
|
486 </dd>
|
|
|
487
|
|
|
488 </dl>
|
|
|
489 </div>
|
|
|
490 </li>
|
|
|
491
|
|
|
492
|
|
|
493 <li class="option" id="option-distance">
|
|
|
494 <div class="option-header">
|
|
|
495 <h3 class="option-name"><a href="#option-distance">distance</a></h3>
|
|
|
496 <dl>
|
|
|
497 <dt class="option-type-label">Type:</dt>
|
|
|
498 <dd class="option-type">Integer</dd>
|
|
|
499
|
|
|
500 <dt class="option-default-label">Default:</dt>
|
|
|
501 <dd class="option-default">1</dd>
|
|
|
502
|
|
|
503 </dl>
|
|
|
504 </div>
|
|
|
505 <div class="option-description">
|
|
|
506 <p>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.</p>
|
|
|
507 </div>
|
|
|
508 <div class="option-examples">
|
|
|
509 <h4>Code examples</h4>
|
|
|
510 <dl class="option-examples-list">
|
|
|
511
|
|
|
512 <dt>
|
|
|
513 Initialize a resizable with the <code>distance</code> option specified.
|
|
|
514 </dt>
|
|
|
515 <dd>
|
|
|
516 <pre><code>$( ".selector" ).resizable({ distance: 20 });</code></pre>
|
|
|
517 </dd>
|
|
|
518
|
|
|
519
|
|
|
520 <dt>
|
|
|
521 Get or set the <code>distance</code> option, after init.
|
|
|
522 </dt>
|
|
|
523 <dd>
|
|
|
524 <pre><code>//getter
|
|
|
525 var distance = $( ".selector" ).resizable( "option", "distance" );
|
|
|
526 //setter
|
|
|
527 $( ".selector" ).resizable( "option", "distance", 20 );</code></pre>
|
|
|
528 </dd>
|
|
|
529
|
|
|
530 </dl>
|
|
|
531 </div>
|
|
|
532 </li>
|
|
|
533
|
|
|
534
|
|
|
535 <li class="option" id="option-ghost">
|
|
|
536 <div class="option-header">
|
|
|
537 <h3 class="option-name"><a href="#option-ghost">ghost</a></h3>
|
|
|
538 <dl>
|
|
|
539 <dt class="option-type-label">Type:</dt>
|
|
|
540 <dd class="option-type">Boolean</dd>
|
|
|
541
|
|
|
542 <dt class="option-default-label">Default:</dt>
|
|
|
543 <dd class="option-default">false</dd>
|
|
|
544
|
|
|
545 </dl>
|
|
|
546 </div>
|
|
|
547 <div class="option-description">
|
|
|
548 <p>If set to true, a semi-transparent helper element is shown for resizing.</p>
|
|
|
549 </div>
|
|
|
550 <div class="option-examples">
|
|
|
551 <h4>Code examples</h4>
|
|
|
552 <dl class="option-examples-list">
|
|
|
553
|
|
|
554 <dt>
|
|
|
555 Initialize a resizable with the <code>ghost</code> option specified.
|
|
|
556 </dt>
|
|
|
557 <dd>
|
|
|
558 <pre><code>$( ".selector" ).resizable({ ghost: true });</code></pre>
|
|
|
559 </dd>
|
|
|
560
|
|
|
561
|
|
|
562 <dt>
|
|
|
563 Get or set the <code>ghost</code> option, after init.
|
|
|
564 </dt>
|
|
|
565 <dd>
|
|
|
566 <pre><code>//getter
|
|
|
567 var ghost = $( ".selector" ).resizable( "option", "ghost" );
|
|
|
568 //setter
|
|
|
569 $( ".selector" ).resizable( "option", "ghost", true );</code></pre>
|
|
|
570 </dd>
|
|
|
571
|
|
|
572 </dl>
|
|
|
573 </div>
|
|
|
574 </li>
|
|
|
575
|
|
|
576
|
|
|
577 <li class="option" id="option-grid">
|
|
|
578 <div class="option-header">
|
|
|
579 <h3 class="option-name"><a href="#option-grid">grid</a></h3>
|
|
|
580 <dl>
|
|
|
581 <dt class="option-type-label">Type:</dt>
|
|
|
582 <dd class="option-type">Array</dd>
|
|
|
583
|
|
|
584 <dt class="option-default-label">Default:</dt>
|
|
|
585 <dd class="option-default">false</dd>
|
|
|
586
|
|
|
587 </dl>
|
|
|
588 </div>
|
|
|
589 <div class="option-description">
|
|
|
590 <p>Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]</p>
|
|
|
591 </div>
|
|
|
592 <div class="option-examples">
|
|
|
593 <h4>Code examples</h4>
|
|
|
594 <dl class="option-examples-list">
|
|
|
595
|
|
|
596 <dt>
|
|
|
597 Initialize a resizable with the <code>grid</code> option specified.
|
|
|
598 </dt>
|
|
|
599 <dd>
|
|
|
600 <pre><code>$( ".selector" ).resizable({ grid: [50, 50] });</code></pre>
|
|
|
601 </dd>
|
|
|
602
|
|
|
603
|
|
|
604 <dt>
|
|
|
605 Get or set the <code>grid</code> option, after init.
|
|
|
606 </dt>
|
|
|
607 <dd>
|
|
|
608 <pre><code>//getter
|
|
|
609 var grid = $( ".selector" ).resizable( "option", "grid" );
|
|
|
610 //setter
|
|
|
611 $( ".selector" ).resizable( "option", "grid", [50, 50] );</code></pre>
|
|
|
612 </dd>
|
|
|
613
|
|
|
614 </dl>
|
|
|
615 </div>
|
|
|
616 </li>
|
|
|
617
|
|
|
618
|
|
|
619 <li class="option" id="option-handles">
|
|
|
620 <div class="option-header">
|
|
|
621 <h3 class="option-name"><a href="#option-handles">handles</a></h3>
|
|
|
622 <dl>
|
|
|
623 <dt class="option-type-label">Type:</dt>
|
|
|
624 <dd class="option-type">String, Object</dd>
|
|
|
625
|
|
|
626 <dt class="option-default-label">Default:</dt>
|
|
|
627 <dd class="option-default">'e, s, se'</dd>
|
|
|
628
|
|
|
629 </dl>
|
|
|
630 </div>
|
|
|
631 <div class="option-description">
|
|
|
632 <p>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.
|
|
|
633 </p><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>
|
|
|
634 </div>
|
|
|
635 <div class="option-examples">
|
|
|
636 <h4>Code examples</h4>
|
|
|
637 <dl class="option-examples-list">
|
|
|
638
|
|
|
639 <dt>
|
|
|
640 Initialize a resizable with the <code>handles</code> option specified.
|
|
|
641 </dt>
|
|
|
642 <dd>
|
|
|
643 <pre><code>$( ".selector" ).resizable({ handles: 'n, e, s, w' });</code></pre>
|
|
|
644 </dd>
|
|
|
645
|
|
|
646
|
|
|
647 <dt>
|
|
|
648 Get or set the <code>handles</code> option, after init.
|
|
|
649 </dt>
|
|
|
650 <dd>
|
|
|
651 <pre><code>//getter
|
|
|
652 var handles = $( ".selector" ).resizable( "option", "handles" );
|
|
|
653 //setter
|
|
|
654 $( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );</code></pre>
|
|
|
655 </dd>
|
|
|
656
|
|
|
657 </dl>
|
|
|
658 </div>
|
|
|
659 </li>
|
|
|
660
|
|
|
661
|
|
|
662 <li class="option" id="option-helper">
|
|
|
663 <div class="option-header">
|
|
|
664 <h3 class="option-name"><a href="#option-helper">helper</a></h3>
|
|
|
665 <dl>
|
|
|
666 <dt class="option-type-label">Type:</dt>
|
|
|
667 <dd class="option-type">String</dd>
|
|
|
668
|
|
|
669 <dt class="option-default-label">Default:</dt>
|
|
|
670 <dd class="option-default">false</dd>
|
|
|
671
|
|
|
672 </dl>
|
|
|
673 </div>
|
|
|
674 <div class="option-description">
|
|
|
675 <p>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.</p>
|
|
|
676 </div>
|
|
|
677 <div class="option-examples">
|
|
|
678 <h4>Code examples</h4>
|
|
|
679 <dl class="option-examples-list">
|
|
|
680
|
|
|
681 <dt>
|
|
|
682 Initialize a resizable with the <code>helper</code> option specified.
|
|
|
683 </dt>
|
|
|
684 <dd>
|
|
|
685 <pre><code>$( ".selector" ).resizable({ helper: 'ui-state-highlight' });</code></pre>
|
|
|
686 </dd>
|
|
|
687
|
|
|
688
|
|
|
689 <dt>
|
|
|
690 Get or set the <code>helper</code> option, after init.
|
|
|
691 </dt>
|
|
|
692 <dd>
|
|
|
693 <pre><code>//getter
|
|
|
694 var helper = $( ".selector" ).resizable( "option", "helper" );
|
|
|
695 //setter
|
|
|
696 $( ".selector" ).resizable( "option", "helper", 'ui-state-highlight' );</code></pre>
|
|
|
697 </dd>
|
|
|
698
|
|
|
699 </dl>
|
|
|
700 </div>
|
|
|
701 </li>
|
|
|
702
|
|
|
703
|
|
|
704 <li class="option" id="option-maxHeight">
|
|
|
705 <div class="option-header">
|
|
|
706 <h3 class="option-name"><a href="#option-maxHeight">maxHeight</a></h3>
|
|
|
707 <dl>
|
|
|
708 <dt class="option-type-label">Type:</dt>
|
|
|
709 <dd class="option-type">Integer</dd>
|
|
|
710
|
|
|
711 <dt class="option-default-label">Default:</dt>
|
|
|
712 <dd class="option-default">null</dd>
|
|
|
713
|
|
|
714 </dl>
|
|
|
715 </div>
|
|
|
716 <div class="option-description">
|
|
|
717 <p>This is the maximum height the resizable should be allowed to resize to.</p>
|
|
|
718 </div>
|
|
|
719 <div class="option-examples">
|
|
|
720 <h4>Code examples</h4>
|
|
|
721 <dl class="option-examples-list">
|
|
|
722
|
|
|
723 <dt>
|
|
|
724 Initialize a resizable with the <code>maxHeight</code> option specified.
|
|
|
725 </dt>
|
|
|
726 <dd>
|
|
|
727 <pre><code>$( ".selector" ).resizable({ maxHeight: 300 });</code></pre>
|
|
|
728 </dd>
|
|
|
729
|
|
|
730
|
|
|
731 <dt>
|
|
|
732 Get or set the <code>maxHeight</code> option, after init.
|
|
|
733 </dt>
|
|
|
734 <dd>
|
|
|
735 <pre><code>//getter
|
|
|
736 var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
|
|
|
737 //setter
|
|
|
738 $( ".selector" ).resizable( "option", "maxHeight", 300 );</code></pre>
|
|
|
739 </dd>
|
|
|
740
|
|
|
741 </dl>
|
|
|
742 </div>
|
|
|
743 </li>
|
|
|
744
|
|
|
745
|
|
|
746 <li class="option" id="option-maxWidth">
|
|
|
747 <div class="option-header">
|
|
|
748 <h3 class="option-name"><a href="#option-maxWidth">maxWidth</a></h3>
|
|
|
749 <dl>
|
|
|
750 <dt class="option-type-label">Type:</dt>
|
|
|
751 <dd class="option-type">Integer</dd>
|
|
|
752
|
|
|
753 <dt class="option-default-label">Default:</dt>
|
|
|
754 <dd class="option-default">null</dd>
|
|
|
755
|
|
|
756 </dl>
|
|
|
757 </div>
|
|
|
758 <div class="option-description">
|
|
|
759 <p>This is the maximum width the resizable should be allowed to resize to.</p>
|
|
|
760 </div>
|
|
|
761 <div class="option-examples">
|
|
|
762 <h4>Code examples</h4>
|
|
|
763 <dl class="option-examples-list">
|
|
|
764
|
|
|
765 <dt>
|
|
|
766 Initialize a resizable with the <code>maxWidth</code> option specified.
|
|
|
767 </dt>
|
|
|
768 <dd>
|
|
|
769 <pre><code>$( ".selector" ).resizable({ maxWidth: 250 });</code></pre>
|
|
|
770 </dd>
|
|
|
771
|
|
|
772
|
|
|
773 <dt>
|
|
|
774 Get or set the <code>maxWidth</code> option, after init.
|
|
|
775 </dt>
|
|
|
776 <dd>
|
|
|
777 <pre><code>//getter
|
|
|
778 var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
|
|
|
779 //setter
|
|
|
780 $( ".selector" ).resizable( "option", "maxWidth", 250 );</code></pre>
|
|
|
781 </dd>
|
|
|
782
|
|
|
783 </dl>
|
|
|
784 </div>
|
|
|
785 </li>
|
|
|
786
|
|
|
787
|
|
|
788 <li class="option" id="option-minHeight">
|
|
|
789 <div class="option-header">
|
|
|
790 <h3 class="option-name"><a href="#option-minHeight">minHeight</a></h3>
|
|
|
791 <dl>
|
|
|
792 <dt class="option-type-label">Type:</dt>
|
|
|
793 <dd class="option-type">Integer</dd>
|
|
|
794
|
|
|
795 <dt class="option-default-label">Default:</dt>
|
|
|
796 <dd class="option-default">10</dd>
|
|
|
797
|
|
|
798 </dl>
|
|
|
799 </div>
|
|
|
800 <div class="option-description">
|
|
|
801 <p>This is the minimum height the resizable should be allowed to resize to.</p>
|
|
|
802 </div>
|
|
|
803 <div class="option-examples">
|
|
|
804 <h4>Code examples</h4>
|
|
|
805 <dl class="option-examples-list">
|
|
|
806
|
|
|
807 <dt>
|
|
|
808 Initialize a resizable with the <code>minHeight</code> option specified.
|
|
|
809 </dt>
|
|
|
810 <dd>
|
|
|
811 <pre><code>$( ".selector" ).resizable({ minHeight: 150 });</code></pre>
|
|
|
812 </dd>
|
|
|
813
|
|
|
814
|
|
|
815 <dt>
|
|
|
816 Get or set the <code>minHeight</code> option, after init.
|
|
|
817 </dt>
|
|
|
818 <dd>
|
|
|
819 <pre><code>//getter
|
|
|
820 var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
|
|
|
821 //setter
|
|
|
822 $( ".selector" ).resizable( "option", "minHeight", 150 );</code></pre>
|
|
|
823 </dd>
|
|
|
824
|
|
|
825 </dl>
|
|
|
826 </div>
|
|
|
827 </li>
|
|
|
828
|
|
|
829
|
|
|
830 <li class="option" id="option-minWidth">
|
|
|
831 <div class="option-header">
|
|
|
832 <h3 class="option-name"><a href="#option-minWidth">minWidth</a></h3>
|
|
|
833 <dl>
|
|
|
834 <dt class="option-type-label">Type:</dt>
|
|
|
835 <dd class="option-type">Integer</dd>
|
|
|
836
|
|
|
837 <dt class="option-default-label">Default:</dt>
|
|
|
838 <dd class="option-default">10</dd>
|
|
|
839
|
|
|
840 </dl>
|
|
|
841 </div>
|
|
|
842 <div class="option-description">
|
|
|
843 <p>This is the minimum width the resizable should be allowed to resize to.</p>
|
|
|
844 </div>
|
|
|
845 <div class="option-examples">
|
|
|
846 <h4>Code examples</h4>
|
|
|
847 <dl class="option-examples-list">
|
|
|
848
|
|
|
849 <dt>
|
|
|
850 Initialize a resizable with the <code>minWidth</code> option specified.
|
|
|
851 </dt>
|
|
|
852 <dd>
|
|
|
853 <pre><code>$( ".selector" ).resizable({ minWidth: 75 });</code></pre>
|
|
|
854 </dd>
|
|
|
855
|
|
|
856
|
|
|
857 <dt>
|
|
|
858 Get or set the <code>minWidth</code> option, after init.
|
|
|
859 </dt>
|
|
|
860 <dd>
|
|
|
861 <pre><code>//getter
|
|
|
862 var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
|
|
|
863 //setter
|
|
|
864 $( ".selector" ).resizable( "option", "minWidth", 75 );</code></pre>
|
|
|
865 </dd>
|
|
|
866
|
|
|
867 </dl>
|
|
|
868 </div>
|
|
|
869 </li>
|
|
|
870
|
|
|
871 </ul>
|
|
|
872 </div>
|
|
|
873 <div id="events">
|
|
|
874 <h2 class="top-header">Events</h2>
|
|
|
875 <ul class="events-list">
|
|
|
876
|
|
|
877 <li class="event" id="event-create">
|
|
|
878 <div class="event-header">
|
|
|
879 <h3 class="event-name"><a href="#event-create">create</a></h3>
|
|
|
880 <dl>
|
|
|
881 <dt class="event-type-label">Type:</dt>
|
|
|
882 <dd class="event-type">resizecreate</dd>
|
|
|
883 </dl>
|
|
|
884 </div>
|
|
|
885 <div class="event-description">
|
|
|
886 <p>This event is triggered when resizable is created.</p>
|
|
|
887 </div>
|
|
|
888 <div class="event-examples">
|
|
|
889 <h4>Code examples</h4>
|
|
|
890 <dl class="event-examples-list">
|
|
|
891
|
|
|
892 <dt>
|
|
|
893 Supply a callback function to handle the <code>create</code> event as an init option.
|
|
|
894 </dt>
|
|
|
895 <dd>
|
|
|
896 <pre><code>$( ".selector" ).resizable({
|
|
|
897 create: function(event, ui) { ... }
|
|
|
898 });</code></pre>
|
|
|
899 </dd>
|
|
|
900
|
|
|
901
|
|
|
902 <dt>
|
|
|
903 Bind to the <code>create</code> event by type: <code>resizecreate</code>.
|
|
|
904 </dt>
|
|
|
905 <dd>
|
|
|
906 <pre><code>$( ".selector" ).bind( "resizecreate", function(event, ui) {
|
|
|
907 ...
|
|
|
908 });</code></pre>
|
|
|
909 </dd>
|
|
|
910
|
|
|
911 </dl>
|
|
|
912 </div>
|
|
|
913 </li>
|
|
|
914
|
|
|
915
|
|
|
916 <li class="event" id="event-start">
|
|
|
917 <div class="event-header">
|
|
|
918 <h3 class="event-name"><a href="#event-start">start</a></h3>
|
|
|
919 <dl>
|
|
|
920 <dt class="event-type-label">Type:</dt>
|
|
|
921 <dd class="event-type">resizestart</dd>
|
|
|
922 </dl>
|
|
|
923 </div>
|
|
|
924 <div class="event-description">
|
|
|
925 <p>This event is triggered at the start of a resize operation.</p>
|
|
|
926 </div>
|
|
|
927 <div class="event-examples">
|
|
|
928 <h4>Code examples</h4>
|
|
|
929 <dl class="event-examples-list">
|
|
|
930
|
|
|
931 <dt>
|
|
|
932 Supply a callback function to handle the <code>start</code> event as an init option.
|
|
|
933 </dt>
|
|
|
934 <dd>
|
|
|
935 <pre><code>$( ".selector" ).resizable({
|
|
|
936 start: function(event, ui) { ... }
|
|
|
937 });</code></pre>
|
|
|
938 </dd>
|
|
|
939
|
|
|
940
|
|
|
941 <dt>
|
|
|
942 Bind to the <code>start</code> event by type: <code>resizestart</code>.
|
|
|
943 </dt>
|
|
|
944 <dd>
|
|
|
945 <pre><code>$( ".selector" ).bind( "resizestart", function(event, ui) {
|
|
|
946 ...
|
|
|
947 });</code></pre>
|
|
|
948 </dd>
|
|
|
949
|
|
|
950 </dl>
|
|
|
951 </div>
|
|
|
952 </li>
|
|
|
953
|
|
|
954
|
|
|
955 <li class="event" id="event-resize">
|
|
|
956 <div class="event-header">
|
|
|
957 <h3 class="event-name"><a href="#event-resize">resize</a></h3>
|
|
|
958 <dl>
|
|
|
959 <dt class="event-type-label">Type:</dt>
|
|
|
960 <dd class="event-type">resize</dd>
|
|
|
961 </dl>
|
|
|
962 </div>
|
|
|
963 <div class="event-description">
|
|
|
964 <p>This event is triggered during the resize, on the drag of the resize handler.</p>
|
|
|
965 </div>
|
|
|
966 <div class="event-examples">
|
|
|
967 <h4>Code examples</h4>
|
|
|
968 <dl class="event-examples-list">
|
|
|
969
|
|
|
970 <dt>
|
|
|
971 Supply a callback function to handle the <code>resize</code> event as an init option.
|
|
|
972 </dt>
|
|
|
973 <dd>
|
|
|
974 <pre><code>$( ".selector" ).resizable({
|
|
|
975 resize: function(event, ui) { ... }
|
|
|
976 });</code></pre>
|
|
|
977 </dd>
|
|
|
978
|
|
|
979
|
|
|
980 <dt>
|
|
|
981 Bind to the <code>resize</code> event by type: <code>resize</code>.
|
|
|
982 </dt>
|
|
|
983 <dd>
|
|
|
984 <pre><code>$( ".selector" ).bind( "resize", function(event, ui) {
|
|
|
985 ...
|
|
|
986 });</code></pre>
|
|
|
987 </dd>
|
|
|
988
|
|
|
989 </dl>
|
|
|
990 </div>
|
|
|
991 </li>
|
|
|
992
|
|
|
993
|
|
|
994 <li class="event" id="event-stop">
|
|
|
995 <div class="event-header">
|
|
|
996 <h3 class="event-name"><a href="#event-stop">stop</a></h3>
|
|
|
997 <dl>
|
|
|
998 <dt class="event-type-label">Type:</dt>
|
|
|
999 <dd class="event-type">resizestop</dd>
|
|
|
1000 </dl>
|
|
|
1001 </div>
|
|
|
1002 <div class="event-description">
|
|
|
1003 <p>This event is triggered at the end of a resize operation.</p>
|
|
|
1004 </div>
|
|
|
1005 <div class="event-examples">
|
|
|
1006 <h4>Code examples</h4>
|
|
|
1007 <dl class="event-examples-list">
|
|
|
1008
|
|
|
1009 <dt>
|
|
|
1010 Supply a callback function to handle the <code>stop</code> event as an init option.
|
|
|
1011 </dt>
|
|
|
1012 <dd>
|
|
|
1013 <pre><code>$( ".selector" ).resizable({
|
|
|
1014 stop: function(event, ui) { ... }
|
|
|
1015 });</code></pre>
|
|
|
1016 </dd>
|
|
|
1017
|
|
|
1018
|
|
|
1019 <dt>
|
|
|
1020 Bind to the <code>stop</code> event by type: <code>resizestop</code>.
|
|
|
1021 </dt>
|
|
|
1022 <dd>
|
|
|
1023 <pre><code>$( ".selector" ).bind( "resizestop", function(event, ui) {
|
|
|
1024 ...
|
|
|
1025 });</code></pre>
|
|
|
1026 </dd>
|
|
|
1027
|
|
|
1028 </dl>
|
|
|
1029 </div>
|
|
|
1030 </li>
|
|
|
1031
|
|
|
1032 </ul>
|
|
|
1033 </div>
|
|
|
1034 <div id="methods">
|
|
|
1035 <h2 class="top-header">Methods</h2>
|
|
|
1036 <ul class="methods-list">
|
|
|
1037
|
|
|
1038 <li class="method" id="method-destroy">
|
|
|
1039 <div class="method-header">
|
|
|
1040 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
|
|
|
1041 <dl>
|
|
|
1042 <dt class="method-signature-label">Signature:</dt>
|
|
|
1043 <dd class="method-signature">.resizable( "destroy"
|
|
|
1044
|
|
|
1045
|
|
|
1046
|
|
|
1047
|
|
|
1048
|
|
|
1049
|
|
|
1050
|
|
|
1051 )</dd>
|
|
|
1052 </dl>
|
|
|
1053 </div>
|
|
|
1054 <div class="method-description">
|
|
|
1055 <p>Remove the resizable functionality completely. This will return the element back to its pre-init state.</p>
|
|
|
1056 </div>
|
|
|
1057 </li>
|
|
|
1058
|
|
|
1059
|
|
|
1060 <li class="method" id="method-disable">
|
|
|
1061 <div class="method-header">
|
|
|
1062 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
|
|
|
1063 <dl>
|
|
|
1064 <dt class="method-signature-label">Signature:</dt>
|
|
|
1065 <dd class="method-signature">.resizable( "disable"
|
|
|
1066
|
|
|
1067
|
|
|
1068
|
|
|
1069
|
|
|
1070
|
|
|
1071
|
|
|
1072
|
|
|
1073 )</dd>
|
|
|
1074 </dl>
|
|
|
1075 </div>
|
|
|
1076 <div class="method-description">
|
|
|
1077 <p>Disable the resizable.</p>
|
|
|
1078 </div>
|
|
|
1079 </li>
|
|
|
1080
|
|
|
1081
|
|
|
1082 <li class="method" id="method-enable">
|
|
|
1083 <div class="method-header">
|
|
|
1084 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
|
|
|
1085 <dl>
|
|
|
1086 <dt class="method-signature-label">Signature:</dt>
|
|
|
1087 <dd class="method-signature">.resizable( "enable"
|
|
|
1088
|
|
|
1089
|
|
|
1090
|
|
|
1091
|
|
|
1092
|
|
|
1093
|
|
|
1094
|
|
|
1095 )</dd>
|
|
|
1096 </dl>
|
|
|
1097 </div>
|
|
|
1098 <div class="method-description">
|
|
|
1099 <p>Enable the resizable.</p>
|
|
|
1100 </div>
|
|
|
1101 </li>
|
|
|
1102
|
|
|
1103
|
|
|
1104 <li class="method" id="method-option">
|
|
|
1105 <div class="method-header">
|
|
|
1106 <h3 class="method-name"><a href="#method-option">option</a></h3>
|
|
|
1107 <dl>
|
|
|
1108 <dt class="method-signature-label">Signature:</dt>
|
|
|
1109 <dd class="method-signature">.resizable( "option"
|
|
|
1110
|
|
|
1111 , optionName
|
|
|
1112
|
|
|
1113 , <span class="optional">[</span>value<span class="optional">] </span>
|
|
|
1114
|
|
|
1115
|
|
|
1116
|
|
|
1117 )</dd>
|
|
|
1118 </dl>
|
|
|
1119 </div>
|
|
|
1120 <div class="method-description">
|
|
|
1121 <p>Get or set any resizable option. If no value is specified, will act as a getter.</p>
|
|
|
1122 </div>
|
|
|
1123 </li>
|
|
|
1124
|
|
|
1125
|
|
|
1126 <li class="method" id="method-option">
|
|
|
1127 <div class="method-header">
|
|
|
1128 <h3 class="method-name"><a href="#method-option">option</a></h3>
|
|
|
1129 <dl>
|
|
|
1130 <dt class="method-signature-label">Signature:</dt>
|
|
|
1131 <dd class="method-signature">.resizable( "option"
|
|
|
1132
|
|
|
1133 , options
|
|
|
1134
|
|
|
1135
|
|
|
1136
|
|
|
1137
|
|
|
1138
|
|
|
1139 )</dd>
|
|
|
1140 </dl>
|
|
|
1141 </div>
|
|
|
1142 <div class="method-description">
|
|
|
1143 <p>Set multiple resizable options at once by providing an options object.</p>
|
|
|
1144 </div>
|
|
|
1145 </li>
|
|
|
1146
|
|
|
1147
|
|
|
1148 <li class="method" id="method-widget">
|
|
|
1149 <div class="method-header">
|
|
|
1150 <h3 class="method-name"><a href="#method-widget">widget</a></h3>
|
|
|
1151 <dl>
|
|
|
1152 <dt class="method-signature-label">Signature:</dt>
|
|
|
1153 <dd class="method-signature">.resizable( "widget"
|
|
|
1154
|
|
|
1155
|
|
|
1156
|
|
|
1157
|
|
|
1158
|
|
|
1159
|
|
|
1160
|
|
|
1161 )</dd>
|
|
|
1162 </dl>
|
|
|
1163 </div>
|
|
|
1164 <div class="method-description">
|
|
|
1165 <p>Returns the .ui-resizable element.</p>
|
|
|
1166 </div>
|
|
|
1167 </li>
|
|
|
1168
|
|
|
1169
|
|
|
1170 </ul>
|
|
|
1171 </div>
|
|
|
1172 <div id="theming">
|
|
|
1173 <h2 class="top-header">Theming</h2>
|
|
|
1174 <p>The jQuery UI Resizable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
|
|
|
1175 </p>
|
|
|
1176 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.resizable.css stylesheet that can be modified. These classes are highlighed in bold below.
|
|
|
1177 </p>
|
|
|
1178
|
|
|
1179 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
|
|
|
1180 <div class="<strong>ui-resizable</strong>"><br />
|
|
|
1181    <div style="-moz-user-select: none;" unselectable="on" class="<strong>ui-resizable-handle ui-resizable-e</strong>"></div><br />
|
|
|
1182    <div style="-moz-user-select: none;" unselectable="on" class="<strong>ui-resizable-handle ui-resizable-s</strong>"></div><br />
|
|
|
1183    <div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="<strong>ui-resizable-handle ui-resizable-se</strong> ui-icon ui-icon-gripsmall-diagonal-se"></div><br />
|
|
|
1184 </div>
|
|
|
1185 <p class="theme-note">
|
|
|
1186 <strong>
|
|
|
1187 Note: This is a sample of markup generated by the resizable plugin, not markup you should use to create a resizable. The only markup needed for that is <div></div>.
|
|
|
1188 </strong>
|
|
|
1189 </p>
|
|
|
1190
|
|
|
1191 </div>
|
|
|
1192 </div>
|
|
|
1193
|
|
|
1194 </p><!--
|
|
|
1195 Pre-expand include size: 47634 bytes
|
|
|
1196 Post-expand include size: 79001 bytes
|
|
|
1197 Template argument size: 41937 bytes
|
|
|
1198 Maximum: 2097152 bytes
|
|
|
1199 -->
|
|
|
1200
|
|
|
1201 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3770-1!1!0!!en!2 and timestamp 20110315182908 -->
|
