[Summary view] [Print] [Text view]

   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 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
 104  var 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
 146  var 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
 188  var 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
 230  var 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
 272  var 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
 314  var 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
 356  var 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
 398  var 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
 440  var 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
 482  var 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
 524  var 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
 566  var 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
 609  var 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
 651  var 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
 693  var 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
 735  var 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
 777  var 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
 819  var 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><!-- 
1069  Pre-expand include size: 41455 bytes
1070  Post-expand include size: 71826 bytes
1071  Template argument size: 40520 bytes
1072  Maximum: 2097152 bytes
1073  -->
1074  
1075  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3342-1!1!0!!en!2 and timestamp 20090604112213 -->