Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

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