| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>jQuery UI resizable documentation</title> |
| |
| <style> |
| body { |
| font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" |
| } |
| .gutter { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <script>{ |
| "title": |
| "Resizable Widget", |
| "excerpt": |
| "Change the size of an element using the mouse.", |
| "termSlugs": { |
| "category": [ |
| "interactions" |
| ] |
| } |
| }</script><article id="resizable1" class="entry widget"><h2 class="section-title"> |
| <span>Resizable Widget</span><span class="version-details">version added: 1.0</span> |
| </h2> |
| <div class="entry-wrapper"> |
| <p class="desc"><strong>Description: </strong>Change the size of an element using the mouse.</p> |
| <section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a> |
| </h2></header><div class="quick-nav-section"> |
| <h3>Options</h3> |
| <div><a href="#option-alsoResize">alsoResize</a></div> |
| <div><a href="#option-animate">animate</a></div> |
| <div><a href="#option-animateDuration">animateDuration</a></div> |
| <div><a href="#option-animateEasing">animateEasing</a></div> |
| <div><a href="#option-aspectRatio">aspectRatio</a></div> |
| <div><a href="#option-autoHide">autoHide</a></div> |
| <div><a href="#option-cancel">cancel</a></div> |
| <div><a href="#option-containment">containment</a></div> |
| <div><a href="#option-delay">delay</a></div> |
| <div><a href="#option-disabled">disabled</a></div> |
| <div><a href="#option-distance">distance</a></div> |
| <div><a href="#option-ghost">ghost</a></div> |
| <div><a href="#option-grid">grid</a></div> |
| <div><a href="#option-handles">handles</a></div> |
| <div><a href="#option-helper">helper</a></div> |
| <div><a href="#option-maxHeight">maxHeight</a></div> |
| <div><a href="#option-maxWidth">maxWidth</a></div> |
| <div><a href="#option-minHeight">minHeight</a></div> |
| <div><a href="#option-minWidth">minWidth</a></div> |
| </div> |
| <div class="quick-nav-section"> |
| <h3>Methods</h3> |
| <div><a href="#method-destroy">destroy</a></div> |
| <div><a href="#method-disable">disable</a></div> |
| <div><a href="#method-enable">enable</a></div> |
| <div><a href="#method-option">option</a></div> |
| <div><a href="#method-widget">widget</a></div> |
| </div> |
| <div class="quick-nav-section"> |
| <h3>Events</h3> |
| <div><a href="#event-create">create</a></div> |
| <div><a href="#event-resize">resize</a></div> |
| <div><a href="#event-start">start</a></div> |
| <div><a href="#event-stop">stop</a></div> |
| </div></section><div class="longdesc" id="entry-longdesc"> |
| <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> |
| |
| <h3>Dependencies</h3> |
| <ul> |
| <li><a href="/category/ui-core/">UI Core</a></li> |
| <li><a href="/jQuery.widget/">Widget Factory</a></li> |
| <li><a href="/mouse/">Mouse Interaction</a></li> |
| </ul> |
| </div> |
| <h3>Additional Notes:</h3> |
| <div class="longdesc"><ul><li> |
| This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point. |
| </li></ul></div> |
| <section id="options"><header><h2>Options</h2></header><div id="option-alsoResize" class="api-item first-item"> |
| <h3>alsoResize<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a> or <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> or <a href="http://api.jquery.com/Types/#Element">Element</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>One or more elements to resize synchronously with the resizable element.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>alsoResize</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ alsoResize: <span class="string">"#mirror"</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>alsoResize</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> alsoResize = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"alsoResize"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"alsoResize"</span>, <span class="string">"#mirror"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-animate" class="api-item"> |
| <h3>animate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>Animates to the final size after resizing.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>animate</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ animate: <span class="literal">true</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>animate</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> animate = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"animate"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"animate"</span>, <span class="literal">true</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-animateDuration" class="api-item"> |
| <h3>animateDuration<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>"slow"</code> |
| </div> |
| <div>How long to animate when using the <a href="#option-animate"><code>animate</code></a> option.</div> |
| <strong>Multiple types supported:</strong><ul> |
| <li> |
| <strong>Number</strong>: Duration in milliseconds.</li> |
| <li> |
| <strong>String</strong>: A named duration, such as <code>"slow"</code> or <code>"fast"</code>.</li> |
| </ul> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>animateDuration</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ animateDuration: <span class="string">"fast"</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>animateDuration</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> animateDuration = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"animateDuration"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"animateDuration"</span>, <span class="string">"fast"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-animateEasing" class="api-item"> |
| <h3>animateEasing<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>"swing"</code> |
| </div> |
| <div>Which <a href="/easings/">easing</a> to apply when using the <a href="#option-animate"><code>animate</code></a> option.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>animateEasing</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ animateEasing: <span class="string">"easeOutBounce"</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>animateEasing</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> animateEasing = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"animateEasing"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"animateEasing"</span>, <span class="string">"easeOutBounce"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-aspectRatio" class="api-item"> |
| <h3>aspectRatio<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#Number">Number</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>Whether the element should be constrained to a specific aspect ratio.</div> |
| <strong>Multiple types supported:</strong><ul> |
| <li> |
| <strong>Boolean</strong>: When set to <code>true</code>, the element will maintain its original aspect ratio.</li> |
| <li> |
| <strong>Number</strong>: Force the element to maintain a specific aspect ratio during resizing.</li> |
| </ul> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>aspectRatio</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ aspectRatio: <span class="literal">true</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>aspectRatio</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> aspectRatio = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"aspectRatio"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"aspectRatio"</span>, <span class="literal">true</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-autoHide" class="api-item"> |
| <h3>autoHide<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>Whether the handles should hide when the user is not hovering over the element.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>autoHide</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ autoHide: <span class="literal">true</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>autoHide</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> autoHide = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"autoHide"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"autoHide"</span>, <span class="literal">true</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-cancel" class="api-item"> |
| <h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>"input,textarea,button,select,option"</code> |
| </div> |
| <div>Prevents resizing from starting on specified elements.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>cancel</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ cancel: <span class="string">".cancel"</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>cancel</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cancel = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"cancel"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"cancel"</span>, <span class="string">".cancel"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-containment" class="api-item"> |
| <h3>containment<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a> or <a href="http://api.jquery.com/Types/#Element">Element</a> or <a href="http://api.jquery.com/Types/#String">String</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>Constrains resizing to within the bounds of the specified element or region.</div> |
| <strong>Multiple types supported:</strong><ul> |
| <li> |
| <strong>Selector</strong>: The resizable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.</li> |
| <li> |
| <strong>Element</strong>: The resizable element will be contained to the bounding box of this element.</li> |
| <li> |
| <strong>String</strong>: Possible values: <code>"parent"</code> and <code>"document"</code>.</li> |
| </ul> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>containment</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ containment: <span class="string">"parent"</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>containment</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> containment = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"containment"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"containment"</span>, <span class="string">"parent"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-delay" class="api-item"> |
| <h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>0</code> |
| </div> |
| <div>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.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>delay</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ delay: <span class="number">150</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>delay</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> delay = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"delay"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"delay"</span>, <span class="number">150</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-disabled" class="api-item"> |
| <h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>Disables the resizable if set to <code>true</code>.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>disabled</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ disabled: <span class="literal">true</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>disabled</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> disabled = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-distance" class="api-item"> |
| <h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>1</code> |
| </div> |
| <div>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.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>distance</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ distance: <span class="number">30</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>distance</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> distance = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"distance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"distance"</span>, <span class="number">30</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-ghost" class="api-item"> |
| <h3>ghost<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>If set to <code>true</code>, a semi-transparent helper element is shown for resizing.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>ghost</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ ghost: <span class="literal">true</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>ghost</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> ghost = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"ghost"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"ghost"</span>, <span class="literal">true</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-grid" class="api-item"> |
| <h3>grid<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Array">Array</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>Snaps the resizing element to a grid, every x and y pixels. Array values: <code>[ x, y ]</code>.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>grid</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ grid: [ <span class="number">20</span>, <span class="number">10</span> ] });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>grid</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> grid = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"grid"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"grid"</span>, [ <span class="number">20</span>, <span class="number">10</span> ] );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-handles" class="api-item"> |
| <h3>handles<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a> or <a href="http://api.jquery.com/Types/#Object">Object</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>"e, s, se"</code> |
| </div> |
| <div>Which handles can be used for resizing.</div> |
| <strong>Multiple types supported:</strong><ul> |
| <li> |
| <strong>String</strong>: A comma delimited 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.</li> |
| <li> |
| <strong>Object</strong>: |
| <p>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> |
| <p><em>Note: When generating your own handles, each handle must have the <code>ui-resizable-handle</code> class, as well as the appropriate <code>ui-resizable-{direction}</code> class, .e.g., <code>ui-resizable-s</code>.</em></p> |
| </li> |
| </ul> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>handles</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ handles: <span class="string">"n, e, s, w"</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>handles</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> handles = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"handles"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"handles"</span>, <span class="string">"n, e, s, w"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-helper" class="api-item"> |
| <h3>helper<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>false</code> |
| </div> |
| <div>A class name 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.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>helper</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ helper: <span class="string">"resizable-helper"</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>helper</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> helper = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"helper"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"helper"</span>, <span class="string">"resizable-helper"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-maxHeight" class="api-item"> |
| <h3>maxHeight<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>null</code> |
| </div> |
| <div>The maximum height the resizable should be allowed to resize to.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>maxHeight</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ maxHeight: <span class="number">300</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>maxHeight</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxHeight = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"maxHeight"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"maxHeight"</span>, <span class="number">300</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-maxWidth" class="api-item"> |
| <h3>maxWidth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>null</code> |
| </div> |
| <div>The maximum width the resizable should be allowed to resize to.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>maxWidth</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ maxWidth: <span class="number">300</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>maxWidth</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> maxWidth = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"maxWidth"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"maxWidth"</span>, <span class="number">300</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-minHeight" class="api-item"> |
| <h3>minHeight<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>10</code> |
| </div> |
| <div>The minimum height the resizable should be allowed to resize to.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>minHeight</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ minHeight: <span class="number">150</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>minHeight</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minHeight = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"minHeight"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"minHeight"</span>, <span class="number">150</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| <div id="option-minWidth" class="api-item"> |
| <h3>minWidth<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span> |
| </h3> |
| <div class="default"> |
| <strong>Default: </strong><code>10</code> |
| </div> |
| <div>The minimum width the resizable should be allowed to resize to.</div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the <code>minWidth</code> option specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({ minWidth: <span class="number">150</span> });</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Get or set the <code>minWidth</code> option, after initialization:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> minWidth = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"minWidth"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"minWidth"</span>, <span class="number">150</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-destroy"><div class="api-item first-item"> |
| <h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span> |
| </h3> |
| <div> |
| Removes the resizable functionality completely. This will return the element back to its pre-init state. |
| </div> |
| <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
| <div> |
| <strong>Code examples:</strong><p>Invoke the destroy method:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"destroy"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div></div> |
| <div id="method-disable"><div class="api-item"> |
| <h3>disable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span> |
| </h3> |
| <div> |
| Disables the resizable. |
| </div> |
| <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
| <div> |
| <strong>Code examples:</strong><p>Invoke the disable method:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"disable"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div></div> |
| <div id="method-enable"><div class="api-item"> |
| <h3>enable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span> |
| </h3> |
| <div> |
| Enables the resizable. |
| </div> |
| <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
| <div> |
| <strong>Code examples:</strong><p>Invoke the enable method:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"enable"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div></div> |
| <div id="method-option"> |
| <div class="api-item"> |
| <h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span> |
| </h3> |
| <div>Gets the value currently associated with the specified <code>optionName</code>.</div> |
| <ul><li> |
| <div><strong>optionName</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#String">String</a> |
| </div> |
| <div>The name of the option to get.</div> |
| </li></ul> |
| <div> |
| <strong>Code examples:</strong><p>Invoke the method:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div> |
| <div class="api-item"> |
| <h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span> |
| </h3> |
| <div>Gets an object containing key/value pairs representing the current resizable options hash.</div> |
| <ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul> |
| <div> |
| <strong>Code examples:</strong><p>Invoke the method:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div> |
| <div class="api-item"> |
| <h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span> |
| </h3> |
| <div>Sets the value of the resizable option associated with the specified <code>optionName</code>.</div> |
| <ul> |
| <li> |
| <div><strong>optionName</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#String">String</a> |
| </div> |
| <div>The name of the option to set.</div> |
| </li> |
| <li> |
| <div><strong>value</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>A value to set for the option.</div> |
| </li> |
| </ul> |
| <div> |
| <strong>Code examples:</strong><p>Invoke the method:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div> |
| <div class="api-item"> |
| <h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span> |
| </h3> |
| <div>Sets one or more options for the resizable.</div> |
| <ul><li> |
| <div><strong>options</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>A map of option-value pairs to set.</div> |
| </li></ul> |
| <div> |
| <strong>Code examples:</strong><p>Invoke the method:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable( <span class="string">"option"</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div> |
| </div> |
| <div id="method-widget"><div class="api-item"> |
| <h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span> |
| </h3> |
| <div> |
| Returns a <code>jQuery</code> object containing the resizable element. |
| </div> |
| <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
| <div> |
| <strong>Code examples:</strong><p>Invoke the widget method:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">".selector"</span> ).resizable( <span class="string">"widget"</span> );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-create" class="api-item first-item"> |
| <h3>create( event, ui )<span class="returns">Type: <code>resizecreate</code></span> |
| </h3> |
| <div> |
| Triggered when the resizable is created. |
| </div> |
| <ul> |
| <li> |
| <div><strong>event</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a> |
| </div> |
| <div></div> |
| </li> |
| <li> |
| <div><strong>ui</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div></div> |
| </li> |
| </ul> |
| <p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p> |
| <div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the create callback specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({</code></div></div><div class="container"><div class="line"><code> create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Bind an event listener to the resizecreate event:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"resizecreate"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div> |
| <div id="event-resize" class="api-item"> |
| <h3>resize( event, ui )<span class="returns">Type: <code>resize</code></span> |
| </h3> |
| <div>This event is triggered during the resize, on the drag of the resize handler.</div> |
| <ul> |
| <li> |
| <div><strong>event</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a> |
| </div> |
| <div></div> |
| </li> |
| <li> |
| <div><strong>ui</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div></div> |
| <ul> |
| <li> |
| <div><strong>element</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the element to be resized</div> |
| </li> |
| <li> |
| <div><strong>helper</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the helper that's being resized</div> |
| </li> |
| <li> |
| <div><strong>originalElement</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the original element before it is wrapped</div> |
| </li> |
| <li> |
| <div><strong>originalPosition</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The position represented as <code>{ left, top }</code> before the resizable is resized</div> |
| </li> |
| <li> |
| <div><strong>originalSize</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The size represented as <code>{ width, height }</code> before the resizable is resized</div> |
| </li> |
| <li> |
| <div><strong>position</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The current position represented as <code>{ left, top }</code> |
| </div> |
| </li> |
| <li> |
| <div><strong>size</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The current size represented as <code>{ width, height }</code> |
| </div> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| <div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the resize callback specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({</code></div></div><div class="container"><div class="line"><code> resize: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Bind an event listener to the resize event:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"resize"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div> |
| <div id="event-start" class="api-item"> |
| <h3>start( event, ui )<span class="returns">Type: <code>resizestart</code></span> |
| </h3> |
| <div>This event is triggered at the start of a resize operation.</div> |
| <ul> |
| <li> |
| <div><strong>event</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a> |
| </div> |
| <div></div> |
| </li> |
| <li> |
| <div><strong>ui</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div></div> |
| <ul> |
| <li> |
| <div><strong>element</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the element to be resized</div> |
| </li> |
| <li> |
| <div><strong>helper</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the helper that's being resized</div> |
| </li> |
| <li> |
| <div><strong>originalElement</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the original element before it is wrapped</div> |
| </li> |
| <li> |
| <div><strong>originalPosition</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The position represented as <code>{ left, top }</code> before the resizable is resized</div> |
| </li> |
| <li> |
| <div><strong>originalSize</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The size represented as <code>{ width, height }</code> before the resizable is resized</div> |
| </li> |
| <li> |
| <div><strong>position</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The current position represented as <code>{ left, top }</code> |
| </div> |
| </li> |
| <li> |
| <div><strong>size</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The current size represented as <code>{ width, height }</code> |
| </div> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| <div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the start callback specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({</code></div></div><div class="container"><div class="line"><code> start: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Bind an event listener to the resizestart event:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"resizestart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div> |
| <div id="event-stop" class="api-item"> |
| <h3>stop( event, ui )<span class="returns">Type: <code>resizestop</code></span> |
| </h3> |
| <div>This event is triggered at the end of a resize operation.</div> |
| <ul> |
| <li> |
| <div><strong>event</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a> |
| </div> |
| <div></div> |
| </li> |
| <li> |
| <div><strong>ui</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div></div> |
| <ul> |
| <li> |
| <div><strong>element</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the element to be resized</div> |
| </li> |
| <li> |
| <div><strong>helper</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the helper that's being resized</div> |
| </li> |
| <li> |
| <div><strong>originalElement</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> |
| </div> |
| <div>The jQuery object representing the original element before it is wrapped</div> |
| </li> |
| <li> |
| <div><strong>originalPosition</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The position represented as <code>{ left, top }</code> before the resizable is resized</div> |
| </li> |
| <li> |
| <div><strong>originalSize</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The size represented as <code>{ width, height }</code> before the resizable is resized</div> |
| </li> |
| <li> |
| <div><strong>position</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The current position represented as <code>{ left, top }</code> |
| </div> |
| </li> |
| <li> |
| <div><strong>size</strong></div> |
| <div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a> |
| </div> |
| <div>The current size represented as <code>{ width, height }</code> |
| </div> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| <div> |
| <strong>Code examples:</strong><p>Initialize the resizable with the stop callback specified:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).resizable({</code></div></div><div class="container"><div class="line"><code> stop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <p>Bind an event listener to the resizestop event:</p> |
| <div class="syntaxhighlighter javascript nogutter"> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"resizestop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| </div> |
| </div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0"> |
| <h4><span class="desc">A simple jQuery UI Resizable.</span></h4> |
| <div class="syntaxhighlighter xml "> |
| <table> |
| <tbody> |
| <tr> |
| <td class="gutter"> |
| |
| <div class="line n1">1</div> |
| |
| <div class="line n2">2</div> |
| |
| <div class="line n3">3</div> |
| |
| <div class="line n4">4</div> |
| |
| <div class="line n5">5</div> |
| |
| <div class="line n6">6</div> |
| |
| <div class="line n7">7</div> |
| |
| <div class="line n8">8</div> |
| |
| <div class="line n9">9</div> |
| |
| <div class="line n10">10</div> |
| |
| <div class="line n11">11</div> |
| |
| <div class="line n12">12</div> |
| |
| <div class="line n13">13</div> |
| |
| <div class="line n14">14</div> |
| |
| <div class="line n15">15</div> |
| |
| <div class="line n16">16</div> |
| |
| <div class="line n17">17</div> |
| |
| <div class="line n18">18</div> |
| |
| <div class="line n19">19</div> |
| |
| <div class="line n20">20</div> |
| |
| <div class="line n21">21</div> |
| |
| <div class="line n22">22</div> |
| |
| <div class="line n23">23</div> |
| |
| <div class="line n24">24</div> |
| |
| <div class="line n25">25</div> |
| |
| </td> |
| <td class="code"> |
| <pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>resizable demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="id">#resizable</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ccc</span>;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule">}</span> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"resizable"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#resizable"</span> ).resizable();</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <h4>Demo:</h4> |
| <div class="demo code-demo"></div> |
| </div></section> |
| </div></article> |
| |
| </body> |
| </html> |
