root/other-projects/tipple-android/i-greenstone-server-files/greenstone/webapps/greenstone3/interfaces/default/js/jquery-ui-1.8.15/docs/resizable.html @ 26899

Revision 26899, 31.4 KB (checked in by davidb, 7 years ago)

Tipple reborn after Chris's Summer of Code 2013

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<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">
37A simple jQuery UI Resizable.<br />
38</p>
39<pre>$(&quot;#resizable&quot;).resizable();
40</pre>
41<p></div><div id="source" class="tabs-container">
42</p>
43<pre>&lt;!DOCTYPE html&gt;
44&lt;html&gt;
45&lt;head&gt;
46  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
47  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot;&gt;&lt;/script&gt;
48  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
49  &lt;style type=&quot;text/css&quot;&gt;
50    #resizable { width: 100px; height: 100px; background: silver; }
51  &lt;/style&gt;
52  &lt;script&gt;
53  $(document).ready(function() {
54    $(&quot;#resizable&quot;).resizable();
55  });
56  &lt;/script&gt;
57&lt;/head&gt;
58&lt;body style="font-size:62.5%;"&gt;
59 
60&lt;div id=&quot;resizable&quot;&gt;&lt;/div&gt;
61
62&lt;/body&gt;
63&lt;/html&gt;
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
105var 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
147var 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
189var 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
231var 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
273var 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
315var 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
357var 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
399var 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
441var 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
483var 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
525var 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
567var 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
609var 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
652var 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
694var 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
736var 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
778var 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
820var 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
862var 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;resizecreate&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;resizestart&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;resize&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;resizestop&quot;, 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  &lt;div class=&quot;<strong>ui-resizable</strong>&quot;&gt;<br />
1181&#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 />
1182&#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 />
1183&#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 />
1184&lt;/div&gt;
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 &lt;div&gt;&lt;/div&gt;.
1188    </strong>
1189  </p>
1190
1191  </div>
1192</div>
1193
1194</p><!--
1195Pre-expand include size: 47687 bytes
1196Post-expand include size: 80197 bytes
1197Template argument size: 42354 bytes
1198Maximum: 2097152 bytes
1199-->
1200
1201<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3770-1!1!0!!en!2 and timestamp 20110801231352 -->
Note: See TracBrowser for help on using the browser.