You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by er...@apache.org on 2010/06/21 19:45:30 UTC
svn commit: r956651 [14/37] - in /ofbiz/branches/jquery: ./
framework/common/widget/ framework/images/webapp/images/jquery/plugins/
framework/images/webapp/images/jquery/plugins/datetimepicker/
framework/images/webapp/images/jquery/ui/ framework/images...
Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html?rev=956651&view=auto
==============================================================================
--- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html (added)
+++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html Mon Jun 21 17:45:18 2010
@@ -0,0 +1,1160 @@
+
+<ul class="UIAPIPlugin-toc">
+<li><a href="#overview">Overview</a></li>
+<li><a href="#options">Options</a></li>
+<li><a href="#events">Events</a></li>
+<li><a href="#methods">Methods</a></li>
+<li><a href="#theming">Theming</a></li>
+</ul>
+<div class="UIAPIPlugin">
+ <h1>jQuery UI Resizable</h1>
+ <div id="overview">
+ <h2 class="top-header">Overview</h2>
+ <div id="overview-main">
+ <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>
+<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>
+<ul>
+<li><b>ui.helper</b> - a jQuery object containing the helper element</li>
+<li><b>ui.originalPosition</b> - {top, left} before resizing started</li>
+<li><b>ui.originalSize</b> - {width, height} before resizing started</li>
+<li><b>ui.position</b> - {top, left} current position</li>
+<li><b>ui.size</b> - {width, height} current size</li>
+</ul>
+ </div>
+ <div id="overview-dependencies">
+ <h3>Dependencies</h3>
+ <ul>
+<li>UI Core</li>
+</ul>
+ </div>
+ <div id="overview-example">
+ <h3>Example</h3>
+ <div id="overview-example" class="example">
+<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
+<p><div id="demo" class="tabs-container" rel="250">
+A simple jQuery UI Resizable.<br />
+</p>
+<pre>$("#resizable").resizable();
+</pre>
+<p></div><div id="source" class="tabs-container">
+</p>
+<pre><!DOCTYPE html>
+<html>
+<head>
+ <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+ <script>
+ $(document).ready(function() {
+ $("#resizable").resizable();
+ });
+ </script>
+</head>
+<body style="font-size:62.5%;">
+
+<div id="resizable"></div>
+
+</body>
+</html>
+</pre>
+<p></div>
+</p><p></div>
+ </div>
+ </div>
+ <div id="options">
+ <h2 class="top-header">Options</h2>
+ <ul class="options-list">
+
+<li class="option" id="option-disabled">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>disabled</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ disabled: true });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>disabled</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var disabled = $( ".selector" ).resizable( "option", "disabled" );
+//setter
+$( ".selector" ).resizable( "option", "disabled", true );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-alsoResize">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-alsoResize">alsoResize</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Selector, jQuery, Element</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Resize these elements synchronous when resizing.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>alsoResize</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ alsoResize: '.other' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>alsoResize</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
+//setter
+$( ".selector" ).resizable( "option", "alsoResize", '.other' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-animate">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-animate">animate</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Animates to the final size after resizing.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>animate</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ animate: true });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>animate</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var animate = $( ".selector" ).resizable( "option", "animate" );
+//setter
+$( ".selector" ).resizable( "option", "animate", true );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-animateDuration">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-animateDuration">animateDuration</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer, String</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">'slow'</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>animateDuration</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ animateDuration: 500 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>animateDuration</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
+//setter
+$( ".selector" ).resizable( "option", "animateDuration", 500 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-animateEasing">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-animateEasing">animateEasing</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">String</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">'swing'</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Easing effect for animating.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>animateEasing</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ animateEasing: 'swing' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>animateEasing</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
+//setter
+$( ".selector" ).resizable( "option", "animateEasing", 'swing' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-aspectRatio">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-aspectRatio">aspectRatio</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean, Float</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <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>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>aspectRatio</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ aspectRatio: .75 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>aspectRatio</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
+//setter
+$( ".selector" ).resizable( "option", "aspectRatio", .75 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-autoHide">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-autoHide">autoHide</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>If set to true, automatically hides the handles except when the mouse hovers over the element.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>autoHide</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ autoHide: true });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>autoHide</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
+//setter
+$( ".selector" ).resizable( "option", "autoHide", true );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-cancel">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Selector</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">':input,option'</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Prevents resizing if you start on elements matching the selector.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>cancel</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ cancel: ':input,option' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>cancel</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var cancel = $( ".selector" ).resizable( "option", "cancel" );
+//setter
+$( ".selector" ).resizable( "option", "cancel", ':input,option' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-containment">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-containment">containment</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">String, Element, Selector</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>containment</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ containment: 'parent' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>containment</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var containment = $( ".selector" ).resizable( "option", "containment" );
+//setter
+$( ".selector" ).resizable( "option", "containment", 'parent' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-delay">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-delay">delay</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">0</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <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>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>delay</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ delay: 20 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>delay</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var delay = $( ".selector" ).resizable( "option", "delay" );
+//setter
+$( ".selector" ).resizable( "option", "delay", 20 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-distance">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-distance">distance</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">1</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <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>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>distance</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ distance: 20 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>distance</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var distance = $( ".selector" ).resizable( "option", "distance" );
+//setter
+$( ".selector" ).resizable( "option", "distance", 20 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-ghost">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-ghost">ghost</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>If set to true, a semi-transparent helper element is shown for resizing.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>ghost</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ ghost: true });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>ghost</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var ghost = $( ".selector" ).resizable( "option", "ghost" );
+//setter
+$( ".selector" ).resizable( "option", "ghost", true );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-grid">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-grid">grid</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Array</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>grid</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ grid: [50, 50] });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>grid</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var grid = $( ".selector" ).resizable( "option", "grid" );
+//setter
+$( ".selector" ).resizable( "option", "grid", [50, 50] );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-handles">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-handles">handles</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">String, Object</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">'e, s, se'</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <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.
+</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>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>handles</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ handles: 'n, e, s, w' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>handles</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var handles = $( ".selector" ).resizable( "option", "handles" );
+//setter
+$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-helper">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-helper">helper</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">String</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <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>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>helper</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ helper: 'ui-state-highlight' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>helper</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var helper = $( ".selector" ).resizable( "option", "helper" );
+//setter
+$( ".selector" ).resizable( "option", "helper", 'ui-state-highlight' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-maxHeight">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-maxHeight">maxHeight</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">null</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>This is the maximum height the resizable should be allowed to resize to.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>maxHeight</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ maxHeight: 300 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>maxHeight</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
+//setter
+$( ".selector" ).resizable( "option", "maxHeight", 300 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-maxWidth">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-maxWidth">maxWidth</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">null</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>This is the maximum width the resizable should be allowed to resize to.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>maxWidth</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ maxWidth: 250 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>maxWidth</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
+//setter
+$( ".selector" ).resizable( "option", "maxWidth", 250 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-minHeight">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-minHeight">minHeight</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">10</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>This is the minimum height the resizable should be allowed to resize to.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>minHeight</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ minHeight: 150 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>minHeight</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
+//setter
+$( ".selector" ).resizable( "option", "minHeight", 150 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-minWidth">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-minWidth">minWidth</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">10</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>This is the minimum width the resizable should be allowed to resize to.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a resizable with the <code>minWidth</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({ minWidth: 75 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>minWidth</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
+//setter
+$( ".selector" ).resizable( "option", "minWidth", 75 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+ </ul>
+ </div>
+ <div id="events">
+ <h2 class="top-header">Events</h2>
+ <ul class="events-list">
+
+<li class="event" id="event-start">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-start">start</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">resizestart</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered at the start of a resize operation.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>start</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({
+ start: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>start</code> event by type: <code>resizestart</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "resizestart", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-resize">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-resize">resize</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">resize</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered during the resize, on the drag of the resize handler.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>resize</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({
+ resize: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>resize</code> event by type: <code>resize</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "resize", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-stop">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-stop">stop</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">resizestop</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered at the end of a resize operation.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>stop</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).resizable({
+ stop: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>stop</code> event by type: <code>resizestop</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "resizestop", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+ </ul>
+ </div>
+ <div id="methods">
+ <h2 class="top-header">Methods</h2>
+ <ul class="methods-list">
+
+<li class="method" id="method-destroy">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.resizable( "destroy"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Remove the resizable functionality completely. This will return the element back to its pre-init state.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-disable">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-disable">disable</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.resizable( "disable"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Disable the resizable.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-enable">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-enable">enable</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.resizable( "enable"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Enable the resizable.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-option">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-option">option</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.resizable( "option"
+
+, optionName
+
+, <span class="optional">[</span>value<span class="optional">] </span>
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Get or set any resizable option. If no value is specified, will act as a getter.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-option">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-option">option</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.resizable( "option"
+
+, options
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Set multiple resizable options at once by providing an options object.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-widget">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-widget">widget</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.resizable( "widget"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Returns the .ui-resizable element.</p>
+ </div>
+</li>
+
+
+ </ul>
+ </div>
+ <div id="theming">
+ <h2 class="top-header">Theming</h2>
+ <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.
+</p>
+ <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.
+</p>
+
+ <h3>Sample markup with jQuery UI CSS Framework classes</h3>
+ <div class="<strong>ui-resizable</strong>"><br />
+   <div style="-moz-user-select: none;" unselectable="on" class="<strong>ui-resizable-handle ui-resizable-e</strong>"></div><br />
+   <div style="-moz-user-select: none;" unselectable="on" class="<strong>ui-resizable-handle ui-resizable-s</strong>"></div><br />
+   <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 />
+</div>
+ <p class="theme-note">
+ <strong>
+ 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>.
+ </strong>
+ </p>
+
+ </div>
+</div>
+
+</p><!--
+Pre-expand include size: 46166 bytes
+Post-expand include size: 77451 bytes
+Template argument size: 41766 bytes
+Maximum: 2097152 bytes
+-->
+
+<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3770-1!1!0!!en!2 and timestamp 20100520115457 -->
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html
------------------------------------------------------------------------------
svn:keywords = "Date Rev Author URL Id"
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/resizable.html
------------------------------------------------------------------------------
svn:mime-type = text/html
Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html?rev=956651&view=auto
==============================================================================
--- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html (added)
+++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html Mon Jun 21 17:45:18 2010
@@ -0,0 +1,807 @@
+
+<ul class="UIAPIPlugin-toc">
+<li><a href="#overview">Overview</a></li>
+<li><a href="#options">Options</a></li>
+<li><a href="#events">Events</a></li>
+<li><a href="#methods">Methods</a></li>
+<li><a href="#theming">Theming</a></li>
+</ul>
+<div class="UIAPIPlugin">
+ <h1>jQuery UI Selectable</h1>
+ <div id="overview">
+ <h2 class="top-header">Overview</h2>
+ <div id="overview-main">
+ <p>The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.</p>
+ </div>
+ <div id="overview-dependencies">
+ <h3>Dependencies</h3>
+ <ul>
+<li>UI Core</li>
+</ul>
+ </div>
+ <div id="overview-example">
+ <h3>Example</h3>
+ <div id="overview-example" class="example">
+<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
+<p><div id="demo" class="tabs-container" rel="">
+A simple jQuery UI Selectable.<br />
+</p>
+<pre>$("#selectable").selectable();
+</pre>
+<p></div><div id="source" class="tabs-container">
+</p>
+<pre><!DOCTYPE html>
+<html>
+<head>
+ <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+ <style type="text/css">
+#selectable .ui-selecting {
+ background: silver;
+}
+#selectable .ui-selected {
+ background: gray;
+}
+</style>
+
+ <script>
+ $(document).ready(function() {
+ $("#selectable").selectable();
+ });
+ </script>
+</head>
+<body style="font-size:62.5%;">
+
+<ul id="selectable">
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+</ul>
+
+</body>
+</html>
+</pre>
+<p></div>
+</p><p></div>
+ </div>
+ </div>
+ <div id="options">
+ <h2 class="top-header">Options</h2>
+ <ul class="options-list">
+
+<li class="option" id="option-disabled">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Disables (true) or enables (false) the selectable. Can be set when initialising (first creating) the selectable.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a selectable with the <code>disabled</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({ disabled: true });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>disabled</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var disabled = $( ".selector" ).selectable( "option", "disabled" );
+//setter
+$( ".selector" ).selectable( "option", "disabled", true );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-autoRefresh">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-autoRefresh">autoRefresh</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">true</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a selectable with the <code>autoRefresh</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({ autoRefresh: false });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>autoRefresh</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
+//setter
+$( ".selector" ).selectable( "option", "autoRefresh", false );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-cancel">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Selector</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">':input,option'</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Prevents selecting if you start on elements matching the selector.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a selectable with the <code>cancel</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({ cancel: ':input,option' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>cancel</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var cancel = $( ".selector" ).selectable( "option", "cancel" );
+//setter
+$( ".selector" ).selectable( "option", "cancel", ':input,option' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-delay">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-delay">delay</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">0</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a selectable with the <code>delay</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({ delay: 20 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>delay</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var delay = $( ".selector" ).selectable( "option", "delay" );
+//setter
+$( ".selector" ).selectable( "option", "delay", 20 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-distance">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-distance">distance</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Integer</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">0</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a selectable with the <code>distance</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({ distance: 20 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>distance</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var distance = $( ".selector" ).selectable( "option", "distance" );
+//setter
+$( ".selector" ).selectable( "option", "distance", 20 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-filter">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-filter">filter</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Selector</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">'*'</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>The matching child elements will be made selectees (able to be selected).</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a selectable with the <code>filter</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({ filter: 'li' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>filter</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var filter = $( ".selector" ).selectable( "option", "filter" );
+//setter
+$( ".selector" ).selectable( "option", "filter", 'li' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-tolerance">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">String</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">'touch'</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Possible values: 'touch', 'fit'.
+</p>
+<ul>
+<li><b>fit</b>: draggable overlaps the droppable entirely</li>
+<li><b>touch</b>: draggable overlaps the droppable any amount</li>
+</ul>
+<p></p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a selectable with the <code>tolerance</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({ tolerance: 'fit' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>tolerance</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
+//setter
+$( ".selector" ).selectable( "option", "tolerance", 'fit' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+ </ul>
+ </div>
+ <div id="events">
+ <h2 class="top-header">Events</h2>
+ <ul class="events-list">
+
+<li class="event" id="event-selected">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-selected">selected</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">selectableselected</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered at the end of the select operation, on each element added to the selection.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>selected</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({
+ selected: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>selected</code> event by type: <code>selectableselected</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "selectableselected", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-selecting">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-selecting">selecting</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">selectableselecting</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered during the select operation, on each element added to the selection.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>selecting</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({
+ selecting: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>selecting</code> event by type: <code>selectableselecting</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "selectableselecting", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-start">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-start">start</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">selectablestart</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered at the beginning of the select operation.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>start</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({
+ start: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>start</code> event by type: <code>selectablestart</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "selectablestart", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-stop">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-stop">stop</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">selectablestop</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered at the end of the select operation.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>stop</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({
+ stop: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>stop</code> event by type: <code>selectablestop</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "selectablestop", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-unselected">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-unselected">unselected</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">selectableunselected</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered at the end of the select operation, on each element removed from the selection.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>unselected</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({
+ unselected: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>unselected</code> event by type: <code>selectableunselected</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "selectableunselected", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-unselecting">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-unselecting">unselecting</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">selectableunselecting</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered during the select operation, on each element removed from the selection.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>unselecting</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).selectable({
+ unselecting: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>unselecting</code> event by type: <code>selectableunselecting</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "selectableunselecting", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+ </ul>
+ </div>
+ <div id="methods">
+ <h2 class="top-header">Methods</h2>
+ <ul class="methods-list">
+
+<li class="method" id="method-destroy">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.selectable( "destroy"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Remove the selectable functionality completely. This will return the element back to its pre-init state.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-disable">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-disable">disable</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.selectable( "disable"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Disable the selectable.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-enable">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-enable">enable</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.selectable( "enable"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Enable the selectable.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-option">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-option">option</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.selectable( "option"
+
+, optionName
+
+, <span class="optional">[</span>value<span class="optional">] </span>
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Get or set any selectable option. If no value is specified, will act as a getter.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-option">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-option">option</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.selectable( "option"
+
+, options
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Set multiple selectable options at once by providing an options object.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-widget">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-widget">widget</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.selectable( "widget"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Returns the .ui-selectable element.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-refresh">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.selectable( "refresh"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.</p>
+ </div>
+</li>
+
+ </ul>
+ </div>
+ <div id="theming">
+ <h2 class="top-header">Theming</h2>
+ <p>The jQuery UI Selectable 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.
+</p>
+ <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.selectable.css stylesheet that can be modified. These classes are highlighed in bold below.
+</p>
+
+ <h3>Sample markup with jQuery UI CSS Framework classes</h3>
+ <ul class="<strong>ui-selectable</strong>"><br />
+   <li class="<strong>ui-selectee</strong>"></li><br />
+   <li class="<strong>ui-selectee</strong>"></li><br />
+   <li class="<strong>ui-selectee</strong>"></li><br />
+</ul>
+ <p class="theme-note">
+ <strong>
+ Note: This is a sample of markup generated by the selectable plugin, not markup you should use to create a selectable. The only markup needed for that is <br /><ul><br />
+   <li></li><br />
+   <li></li><br />
+   <li></li><br />
+</ul>.
+ </strong>
+ </p>
+
+ </div>
+</div>
+
+</p><!--
+Pre-expand include size: 33182 bytes
+Post-expand include size: 51437 bytes
+Template argument size: 26605 bytes
+Maximum: 2097152 bytes
+-->
+
+<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3771-1!1!0!!en!2 and timestamp 20100520115458 -->
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html
------------------------------------------------------------------------------
svn:keywords = "Date Rev Author URL Id"
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/selectable.html
------------------------------------------------------------------------------
svn:mime-type = text/html
Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html?rev=956651&view=auto
==============================================================================
--- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html (added)
+++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html Mon Jun 21 17:45:18 2010
@@ -0,0 +1,144 @@
+
+<ul class="UIAPIPlugin-toc">
+<li><a href="#overview">Overview</a></li>
+<li><a href="#options">Arguments</a></li>
+</ul>
+<div class="UIAPIPlugin">
+ <h1>jQuery UI show</h1>
+ <div id="overview">
+ <h2 class="top-header">Overview</h2>
+ <div id="overview-main">
+ <div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/show?section=1" title="Edit section: show( effect, [options], [speed], [callback] )">edit</a>]</div><a name="show.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>show( effect, <span class="optional">[</span>options<span class="optional">]</span>, <span class="optional">[</span>speed<span class="optional">]</span>, <span class="optional">[</span>callback<span class="optional">]</span> )</h3>
+<p>The enhanced show method optionally accepts jQuery UI advanced effects.</p>
+<p>Uses a specific effect on an element to show the element if the first argument is a effect string.</p>
+ </div>
+ <div id="overview-dependencies">
+ <h3>Dependencies</h3>
+ <ul>
+<li>Effects Core</li>
+</ul>
+ </div>
+ <div id="overview-example">
+ <h3>Example</h3>
+ <div id="overview-example" class="example">
+<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
+<p><div id="demo" class="tabs-container" rel="170">
+Apply the effect slide if you click on the p to show a div.<br />
+</p>
+<pre>$("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
+ $("div").<strong class="selflink">show</strong>("slide", {}, 1000);
+ });
+</pre>
+<p></div><div id="source" class="tabs-container">
+</p>
+<pre><!DOCTYPE html>
+<html>
+<head>
+ <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+ <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
+<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
+<style type="text/css">
+ div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
+</style>
+ <script>
+ $(document).ready(function() {
+ $("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
+ $("div").<strong class="selflink">show</strong>("slide", {}, 1000);
+ });
+ });
+ </script>
+</head>
+<body style="font-size:62.5%;">
+
+<p>Click me</p><div></div>
+
+</body>
+</html>
+</pre>
+<p></div>
+</p><p></div>
+ </div>
+ </div>
+ <div id="options">
+ <h2 class="top-header">Arguments</h2>
+ <ul class="options-list">
+
+<li class="option" id="option-effect">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-effect">effect</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">String</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.</p>
+ </div>
+</li>
+
+
+<li class="option" id="option-options">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-options">options</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Hash</dd>
+
+ <dt class="option-optional-label">Optional</dt>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>A object/hash including specific options for the effect.</p>
+ </div>
+</li>
+
+
+<li class="option" id="option-speed">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-speed">speed</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">String, Number</dd>
+
+ <dt class="option-optional-label">Optional</dt>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
+ </div>
+</li>
+
+
+<li class="option" id="option-callback">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-callback">callback</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Function</dd>
+
+ <dt class="option-optional-label">Optional</dt>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>A function that is called after the effect is completed.</p>
+ </div>
+</li>
+
+ </ul>
+ </div>
+</div>
+
+</p><!--
+Pre-expand include size: 6354 bytes
+Post-expand include size: 8760 bytes
+Template argument size: 5486 bytes
+Maximum: 2097152 bytes
+-->
+
+<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2613-1!1!0!!en!2 and timestamp 20100519132310 -->
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html
------------------------------------------------------------------------------
svn:keywords = "Date Rev Author URL Id"
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/show.html
------------------------------------------------------------------------------
svn:mime-type = text/html
Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html?rev=956651&view=auto
==============================================================================
--- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html (added)
+++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html Mon Jun 21 17:45:18 2010
@@ -0,0 +1,821 @@
+
+<ul class="UIAPIPlugin-toc">
+<li><a href="#overview">Overview</a></li>
+<li><a href="#options">Options</a></li>
+<li><a href="#events">Events</a></li>
+<li><a href="#methods">Methods</a></li>
+<li><a href="#theming">Theming</a></li>
+</ul>
+<div class="UIAPIPlugin">
+ <h1>jQuery UI Slider</h1>
+ <div id="overview">
+ <h2 class="top-header">Overview</h2>
+ <div id="overview-main">
+ <p>The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.</p>
+<p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):
+</p><p>The slider widget will create handle elements with the class 'ui-slider-handle' on initialization. You can specify custom handle elements by creating and appending the elements and adding the 'ui-slider-handle' class before init. It will only create the number of handles needed to match the length of value/values. For example, if you specify 'values: [1, 5, 18]' and create one custom handle, the plugin will create the other two.
+</p>
+<ul>
+ <li><b>ui.handle</b>: DOMElement - the current focused handle
+ <li><b>ui.value</b>: Integer - the current handle's value
+</ul>
+ </div>
+ <div id="overview-dependencies">
+ <h3>Dependencies</h3>
+ <ul>
+<li>UI Core</li>
+<li>UI Widget</li>
+<li>UI Mouse</li>
+</ul>
+ </div>
+ <div id="overview-example">
+ <h3>Example</h3>
+ <div id="overview-example" class="example">
+<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
+<p><div id="demo" class="tabs-container" rel="">
+A simple jQuery UI Slider.<br />
+</p>
+<pre>$("#slider").slider();
+</pre>
+<p></div><div id="source" class="tabs-container">
+</p>
+<pre><!DOCTYPE html>
+<html>
+<head>
+ <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+ <style type="text/css">
+ #slider { margin: 10px; }
+ </style>
+ <script>
+ $(document).ready(function() {
+ $("#slider").slider();
+ });
+ </script>
+</head>
+<body style="font-size:62.5%;">
+
+<div id="slider"></div>
+
+</body>
+</html>
+</pre>
+<p></div>
+</p><p></div>
+ </div>
+ </div>
+ <div id="options">
+ <h2 class="top-header">Options</h2>
+ <ul class="options-list">
+
+<li class="option" id="option-disabled">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Disables (true) or enables (false) the slider. Can be set when initialising (first creating) the slider.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>disabled</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ disabled: true });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>disabled</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var disabled = $( ".selector" ).slider( "option", "disabled" );
+//setter
+$( ".selector" ).slider( "option", "disabled", true );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-animate">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-animate">animate</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean, String, Number</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>animate</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ animate: true });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>animate</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var animate = $( ".selector" ).slider( "option", "animate" );
+//setter
+$( ".selector" ).slider( "option", "animate", true );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-max">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-max">max</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Number</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">100</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>The maximum value of the slider.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>max</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ max: 7 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>max</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var max = $( ".selector" ).slider( "option", "max" );
+//setter
+$( ".selector" ).slider( "option", "max", 7 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-min">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-min">min</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Number</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">0</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>The minimum value of the slider.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>min</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ min: -7 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>min</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var min = $( ".selector" ).slider( "option", "min" );
+//setter
+$( ".selector" ).slider( "option", "min", -7 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-orientation">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-orientation">orientation</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">String</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">'horizontal'</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>orientation</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ orientation: 'vertical' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>orientation</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var orientation = $( ".selector" ).slider( "option", "orientation" );
+//setter
+$( ".selector" ).slider( "option", "orientation", 'vertical' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-range">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-range">range</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Boolean, String</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">false</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>range</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ range: 'min' });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>range</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var range = $( ".selector" ).slider( "option", "range" );
+//setter
+$( ".selector" ).slider( "option", "range", 'min' );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-step">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-step">step</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Number</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">1</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>step</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ step: 5 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>step</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var step = $( ".selector" ).slider( "option", "step" );
+//setter
+$( ".selector" ).slider( "option", "step", 5 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-value">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-value">value</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Number</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">0</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>value</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ value: 37 });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>value</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var value = $( ".selector" ).slider( "option", "value" );
+//setter
+$( ".selector" ).slider( "option", "value", 37 );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="option" id="option-values">
+ <div class="option-header">
+ <h3 class="option-name"><a href="#option-values">values</a></h3>
+ <dl>
+ <dt class="option-type-label">Type:</dt>
+ <dd class="option-type">Array</dd>
+
+ <dt class="option-default-label">Default:</dt>
+ <dd class="option-default">null</dd>
+
+ </dl>
+ </div>
+ <div class="option-description">
+ <p>This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.</p>
+ </div>
+ <div class="option-examples">
+ <h4>Code examples</h4>
+ <dl class="option-examples-list">
+
+<dt>
+ Initialize a slider with the <code>values</code> option specified.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({ values: [1,5,9] });</code></pre>
+</dd>
+
+
+<dt>
+ Get or set the <code>values</code> option, after init.
+</dt>
+<dd>
+<pre><code>//getter
+var values = $( ".selector" ).slider( "option", "values" );
+//setter
+$( ".selector" ).slider( "option", "values", [1,5,9] );</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+ </ul>
+ </div>
+ <div id="events">
+ <h2 class="top-header">Events</h2>
+ <ul class="events-list">
+
+<li class="event" id="event-start">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-start">start</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">slidestart</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered when the user starts sliding.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>start</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({
+ start: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>start</code> event by type: <code>slidestart</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "slidestart", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-slide">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-slide">slide</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">slide</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.
+</p><p>Return false in order to prevent a slide, based on ui.value.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>slide</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({
+ slide: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>slide</code> event by type: <code>slide</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "slide", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-change">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-change">change</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">slidechange</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered on slide stop, or if the value is changed programmatically (by the <code>value</code> method). Takes arguments event and ui. Use event.orginalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>change</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({
+ change: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>change</code> event by type: <code>slidechange</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "slidechange", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+
+<li class="event" id="event-stop">
+ <div class="event-header">
+ <h3 class="event-name"><a href="#event-stop">stop</a></h3>
+ <dl>
+ <dt class="event-type-label">Type:</dt>
+ <dd class="event-type">slidestop</dd>
+ </dl>
+ </div>
+ <div class="event-description">
+ <p>This event is triggered when the user stops sliding.</p>
+ </div>
+ <div class="event-examples">
+ <h4>Code examples</h4>
+ <dl class="event-examples-list">
+
+<dt>
+ Supply a callback function to handle the <code>stop</code> event as an init option.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).slider({
+ stop: function(event, ui) { ... }
+});</code></pre>
+</dd>
+
+
+<dt>
+ Bind to the <code>stop</code> event by type: <code>slidestop</code>.
+</dt>
+<dd>
+<pre><code>$( ".selector" ).bind( "slidestop", function(event, ui) {
+ ...
+});</code></pre>
+</dd>
+
+ </dl>
+ </div>
+</li>
+
+ </ul>
+ </div>
+ <div id="methods">
+ <h2 class="top-header">Methods</h2>
+ <ul class="methods-list">
+
+<li class="method" id="method-destroy">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.slider( "destroy"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Remove the slider functionality completely. This will return the element back to its pre-init state.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-disable">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-disable">disable</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.slider( "disable"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Disable the slider.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-enable">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-enable">enable</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.slider( "enable"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Enable the slider.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-option">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-option">option</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.slider( "option"
+
+, optionName
+
+, <span class="optional">[</span>value<span class="optional">] </span>
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Get or set any slider option. If no value is specified, will act as a getter.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-option">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-option">option</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.slider( "option"
+
+, options
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Set multiple slider options at once by providing an options object.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-widget">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-widget">widget</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.slider( "widget"
+
+
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Returns the .ui-slider element.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-value">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-value">value</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.slider( "value"
+
+, <span class="optional">[</span>value<span class="optional">] </span>
+
+
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Gets or sets the value of the slider. For single handle sliders.</p>
+ </div>
+</li>
+
+
+<li class="method" id="method-values">
+ <div class="method-header">
+ <h3 class="method-name"><a href="#method-values">values</a></h3>
+ <dl>
+ <dt class="method-signature-label">Signature:</dt>
+ <dd class="method-signature">.slider( "values"
+
+, index
+
+, <span class="optional">[</span>value<span class="optional">] </span>
+
+
+
+)</dd>
+ </dl>
+ </div>
+ <div class="method-description">
+ <p>Gets or sets the values of the slider. For multiple handle or range sliders.</p>
+ </div>
+</li>
+
+ </ul>
+ </div>
+ <div id="theming">
+ <h2 class="top-header">Theming</h2>
+ <p>The jQuery UI Slider 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.
+</p>
+ <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.
+</p>
+
+ <h3>Sample markup with jQuery UI CSS Framework classes</h3>
+ <div class="ui-slider<strong> ui-slider-horizontal</strong> ui-widget ui-widget-content ui-corner-all"><br />
+ <a style="left: 0%;" class="<strong>ui-slider-handle</strong> ui-state-default ui-corner-all" href="#"></a><br />
+</div><br />
+ <p class="theme-note">
+ <strong>
+ Note: This is a sample of markup generated by the slider plugin, not markup you should use to create a slider. The only markup needed for that is <div><div>.
+ </strong>
+ </p>
+
+ </div>
+</div>
+
+</p><!--
+Pre-expand include size: 34930 bytes
+Post-expand include size: 52896 bytes
+Template argument size: 27114 bytes
+Maximum: 2097152 bytes
+-->
+
+<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3776-1!1!0!!en!2 and timestamp 20100520115503 -->
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html
------------------------------------------------------------------------------
svn:keywords = "Date Rev Author URL Id"
Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/slider.html
------------------------------------------------------------------------------
svn:mime-type = text/html