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