source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/docs/resizable.html@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

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