Added: labs/pulse/web-reports/jquery/ui/development-bundle/docs/droppable.html URL: http://svn.apache.org/viewvc/labs/pulse/web-reports/jquery/ui/development-bundle/docs/droppable.html?rev=1031625&view=auto ============================================================================== --- labs/pulse/web-reports/jquery/ui/development-bundle/docs/droppable.html (added) +++ labs/pulse/web-reports/jquery/ui/development-bundle/docs/droppable.html Fri Nov 5 15:25:30 2010 @@ -0,0 +1,788 @@ + +<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 Droppable</h1> + <div id="overview"> + <h2 class="top-header">Overview</h2> + <div id="overview-main"> + <p>The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.</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> +<ul> + <li> <b>ui.draggable</b> - current draggable element, a jQuery object.</li> + <li> <b>ui.helper</b> - current draggable helper, a jQuery object</li> + <li> <b>ui.position</b> - current position of the draggable helper { top: , left: }</li> + <li> <b>ui.offset</b> - current absolute position of the draggable helper { top: , left: }</li> +</ul> + </div> + <div id="overview-dependencies"> + <h3>Dependencies</h3> + <ul> +<li>UI Core</li> +<li><a href="http://docs.jquery.com/UI/Draggable"; title="UI/Draggable">UI Draggable</a></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="100"> +Makes the div droppable (a drop target for a draggable).<br /> +</p> +<pre>$("#draggable").draggable(); + $("#droppable").droppable({ + drop: function() { alert('dropped'); } + }); +</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"> + #draggable { width: 75px; height: 25px; background: silver; padding: 10px; } + #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; } + </style> + <script> + $(document).ready(function() { + $("#draggable").draggable(); + $("#droppable").droppable({ + drop: function() { alert('dropped'); } + }); + }); + </script> +</head> +<body style="font-size:62.5%;"> + +<div id="droppable">Drop here</div> +<div id="draggable">Drag me</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 droppable. Can be set when initialising (first creating) the droppable.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a droppable with the <code>disabled</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ disabled: true });</code></pre> +</dd> + + +<dt> + Get or set the <code>disabled</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var disabled = $( ".selector" ).droppable( "option", "disabled" ); +//setter +$( ".selector" ).droppable( "option", "disabled", true );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-accept"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-accept">accept</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">Selector, Function</dd> + + <dt class="option-default-label">Default:</dt> + <dd class="option-default">'*'</dd> + + </dl> + </div> + <div class="option-description"> + <p>All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a droppable with the <code>accept</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ accept: '.special' });</code></pre> +</dd> + + +<dt> + Get or set the <code>accept</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var accept = $( ".selector" ).droppable( "option", "accept" ); +//setter +$( ".selector" ).droppable( "option", "accept", '.special' );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-activeClass"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-activeClass">activeClass</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>If specified, the class will be added to the droppable while an acceptable draggable is being dragged.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a droppable with the <code>activeClass</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ activeClass: 'ui-state-highlight' });</code></pre> +</dd> + + +<dt> + Get or set the <code>activeClass</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); +//setter +$( ".selector" ).droppable( "option", "activeClass", 'ui-state-highlight' );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-addClasses"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-addClasses">addClasses</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>If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a droppable with the <code>addClasses</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ addClasses: false });</code></pre> +</dd> + + +<dt> + Get or set the <code>addClasses</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); +//setter +$( ".selector" ).droppable( "option", "addClasses", false );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-greedy"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-greedy">greedy</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 true, will prevent event propagation on nested droppables.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a droppable with the <code>greedy</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ greedy: true });</code></pre> +</dd> + + +<dt> + Get or set the <code>greedy</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var greedy = $( ".selector" ).droppable( "option", "greedy" ); +//setter +$( ".selector" ).droppable( "option", "greedy", true );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-hoverClass"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-hoverClass">hoverClass</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>If specified, the class will be added to the droppable while an acceptable draggable is being hovered.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a droppable with the <code>hoverClass</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ hoverClass: 'drophover' });</code></pre> +</dd> + + +<dt> + Get or set the <code>hoverClass</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); +//setter +$( ".selector" ).droppable( "option", "hoverClass", 'drophover' );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-scope"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-scope">scope</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">'default'</dd> + + </dl> + </div> + <div class="option-description"> + <p>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a droppable with the <code>scope</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ scope: 'tasks' });</code></pre> +</dd> + + +<dt> + Get or set the <code>scope</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var scope = $( ".selector" ).droppable( "option", "scope" ); +//setter +$( ".selector" ).droppable( "option", "scope", 'tasks' );</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">'intersect'</dd> + + </dl> + </div> + <div class="option-description"> + <p>Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'. +</p> +<ul> +<li><b>fit</b>: draggable overlaps the droppable entirely</li> +<li><b>intersect</b>: draggable overlaps the droppable at least 50%</li> +<li><b>pointer</b>: mouse pointer overlaps the droppable</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 droppable with the <code>tolerance</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ tolerance: 'fit' });</code></pre> +</dd> + + +<dt> + Get or set the <code>tolerance</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var tolerance = $( ".selector" ).droppable( "option", "tolerance" ); +//setter +$( ".selector" ).droppable( "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-activate"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-activate">activate</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">dropactivate</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>activate</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ + activate: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>activate</code> event by type: <code>dropactivate</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "dropactivate", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-deactivate"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">dropdeactivate</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered any time an accepted draggable stops dragging.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>deactivate</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ + deactivate: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>deactivate</code> event by type: <code>dropdeactivate</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "dropdeactivate", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-over"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-over">over</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">dropover</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>over</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ + over: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>over</code> event by type: <code>dropover</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "dropover", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-out"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-out">out</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">dropout</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>out</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ + out: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>out</code> event by type: <code>dropout</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "dropout", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-drop"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-drop">drop</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">drop</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. +ui.draggable represents the draggable.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>drop</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).droppable({ + drop: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>drop</code> event by type: <code>drop</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "drop", 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">.droppable( "destroy" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Remove the droppable 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">.droppable( "disable" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Disable the droppable.</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">.droppable( "enable" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Enable the droppable.</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">.droppable( "option" + +, optionName + +, <span class="optional">[</span>value<span class="optional">] </span> + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Get or set any droppable 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">.droppable( "option" + +, options + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Set multiple droppable 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">.droppable( "widget" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Returns the .ui-droppable element.</p> + </div> +</li> + + + </ul> + </div> + <div id="theming"> + <h2 class="top-header">Theming</h2> + <p>The jQuery UI Droppable 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.droppable.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-droppable</strong>"></div> + <p class="theme-note"> + <strong> + Note: This is a sample of markup generated by the droppable plugin, not markup you should use to create a droppable. The only markup needed for that is <div></div>. + </strong> + </p> + + </div> +</div> + +</p><!-- +Pre-expand include size: 32197 bytes +Post-expand include size: 50778 bytes +Template argument size: 26267 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3769-1!1!0!!en!2 and timestamp 20100909220227 -->
Added: labs/pulse/web-reports/jquery/ui/development-bundle/docs/effect.html URL: http://svn.apache.org/viewvc/labs/pulse/web-reports/jquery/ui/development-bundle/docs/effect.html?rev=1031625&view=auto ============================================================================== --- labs/pulse/web-reports/jquery/ui/development-bundle/docs/effect.html (added) +++ labs/pulse/web-reports/jquery/ui/development-bundle/docs/effect.html Fri Nov 5 15:25:30 2010 @@ -0,0 +1,143 @@ + +<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 effect</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/effect?section=1"; title="Edit section: effect( effect, [options], [speed], [callback] )">edit</a>]</div><a name="effect.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>effect( 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>Uses a specific effect on an element (without the show/hide logic).</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 explode if you click on the element.<br /> +</p> +<pre>$("p").<a href="http://docs.jquery.com/Events/click"; title="Events/click">click</a>(function () { + $("div").<strong class="selflink">effect</strong>("explode"); + }); +</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.explode.js"></script> +<style type="text/css"> + div { margin: 0 auto; 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">effect</strong>("explode"); + }); + }); + </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', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.</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: 6364 bytes +Post-expand include size: 8780 bytes +Template argument size: 5498 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2612-1!1!0!!en!2 and timestamp 20100910021003 --> Added: labs/pulse/web-reports/jquery/ui/development-bundle/docs/hide.html URL: http://svn.apache.org/viewvc/labs/pulse/web-reports/jquery/ui/development-bundle/docs/hide.html?rev=1031625&view=auto ============================================================================== --- labs/pulse/web-reports/jquery/ui/development-bundle/docs/hide.html (added) +++ labs/pulse/web-reports/jquery/ui/development-bundle/docs/hide.html Fri Nov 5 15:25:30 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 hide</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/hide?section=1"; title="Edit section: hide( effect, [options], [speed], [callback] )">edit</a>]</div><a name="hide.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>hide( 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 hide method optionally accepts jQuery UI advanced effects.</p> +<p>Uses a specific effect on an element to hide the element if the first argument is an 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 hide a div.<br /> +</p> +<pre>$("p").<a href="http://docs.jquery.com/Events/click"; title="Events/click">click</a>(function () { + $("div").<strong class="selflink">hide</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 { 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">hide</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 predefined speeds ("slow" 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: 6332 bytes +Post-expand include size: 8595 bytes +Template argument size: 5383 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2614-1!1!0!!en!2 and timestamp 20100910022231 --> Added: labs/pulse/web-reports/jquery/ui/development-bundle/docs/position.html URL: http://svn.apache.org/viewvc/labs/pulse/web-reports/jquery/ui/development-bundle/docs/position.html?rev=1031625&view=auto ============================================================================== --- labs/pulse/web-reports/jquery/ui/development-bundle/docs/position.html (added) +++ labs/pulse/web-reports/jquery/ui/development-bundle/docs/position.html Fri Nov 5 15:25:30 2010 @@ -0,0 +1,226 @@ + +<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 Position Utility</h1> + <div id="overview"> + <h2 class="top-header">Overview</h2> + <div id="overview-main"> + <p>Utility script for absolutely positioning any widget relative to the window, document, a particular element, or the cursor/mouse.</p> +<p>Do not need ui.core.js or effects.core.js.</p> + </div> + <div id="overview-dependencies"> + <h3>Dependencies</h3> + <ul> +<li><i>none (only jQuery core)</i></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="300"> +Clicking on the green element transfers to the other.<br /> +</p> +<pre> +$("#position1").position({ + my: "center", + at: "center", + of: "#targetElement" +}); +$("#position2").position({ + my: "left top", + at: "left top", + of: "#targetElement" +}); +$("#position3").position({ + my: "right center", + at: "right bottom", + of: "#targetElement" +}); +$(document).mousemove(function(ev){ + $("#position4").position({ + my: "left bottom", + of: ev, + offset: "3 -3", + collision: "fit" + }); +}); + +</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"> +#targetElement { width:240px;height:200px;background-color:#999;margin:30px auto; } +.positionDiv { width:50px;height:50px;opacity:0.6; } +#position1 {background-color:#F00;} +#position2 {background-color:#0F0;} +#position3 {background-color:#00F;} +#position4 {background-color:#FF0;} +</style> + + <script> + $(document).ready(function() { + +$("#position1").position({ + my: "center", + at: "center", + of: "#targetElement" +}); +$("#position2").position({ + my: "left top", + at: "left top", + of: "#targetElement" +}); +$("#position3").position({ + my: "right center", + at: "right bottom", + of: "#targetElement" +}); +$(document).mousemove(function(ev){ + $("#position4").position({ + my: "left bottom", + of: ev, + offset: "3 -3", + collision: "fit" + }); +}); + + }); + </script> +</head> +<body style="font-size:62.5%;"> + +<div id="targetElement"> + <div class="positionDiv" id="position1"></div> + <div class="positionDiv" id="position2"></div> + <div class="positionDiv" id="position3"></div> + <div class="positionDiv" id="position4"></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-my"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-my">my</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">String</dd> + + </dl> + </div> + <div class="option-description"> + <p>Defines which position on <b>the element being positioned</b> to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"</p> + </div> +</li> + + +<li class="option" id="option-at"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-at">at</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">String</dd> + + </dl> + </div> + <div class="option-description"> + <p>Defines which position on <b>the target element</b> to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"</p> + </div> +</li> + + +<li class="option" id="option-of"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-of">of</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">Selector</dd> + + </dl> + </div> + <div class="option-description"> + <p>Element to position against. You can use a browser event object contains pageX and pageY values. Example: "#top-menu"</p> + </div> +</li> + + +<li class="option" id="option-offset"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-offset">offset</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">String</dd> + + </dl> + </div> + <div class="option-description"> + <p>Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.</p> + </div> +</li> + + +<li class="option" id="option-collision"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-collision">collision</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">String</dd> + + </dl> + </div> + <div class="option-description"> + <p>When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none". +</p> +<ul><li> <b>flip</b>: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back. +</li><li> <b>fit</b>: so the element keeps in the desired direction, but is re-positioned so it fits. +</li><li> <b>none</b>: not do collision detection. +</li></ul> +<p></p> + </div> +</li> + + +<li class="option" id="option-using"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-using">using</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">Function</dd> + + </dl> + </div> + <div class="option-description"> + <p>When specified the actual property setting is delegated to this callback. Receives a single parameter which is a hash of top and left values for the position that should be set.</p> + </div> +</li> + + </ul> + </div> +</div> + +</p><!-- +Pre-expand include size: 7094 bytes +Post-expand include size: 10335 bytes +Template argument size: 7101 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3784-1!1!0!!en!2 and timestamp 20100909204144 --> Added: labs/pulse/web-reports/jquery/ui/development-bundle/docs/progressbar.html URL: http://svn.apache.org/viewvc/labs/pulse/web-reports/jquery/ui/development-bundle/docs/progressbar.html?rev=1031625&view=auto ============================================================================== --- labs/pulse/web-reports/jquery/ui/development-bundle/docs/progressbar.html (added) +++ labs/pulse/web-reports/jquery/ui/development-bundle/docs/progressbar.html Fri Nov 5 15:25:30 2010 @@ -0,0 +1,381 @@ + +<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 Progressbar</h1> + <div id="overview"> + <h2 class="top-header">Overview</h2> + <div id="overview-main"> + <p> +The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default. +</p> +<p> +This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process -- if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback. +</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="100"> +A simple jQuery UI Progressbar.<br /> +</p> +<pre>$("#progressbar").progressbar({ value: 37 }); +</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> + $(document).ready(function() { + $("#progressbar").progressbar({ value: 37 }); + }); + </script> +</head> +<body style="font-size:62.5%;"> + +<div id="progressbar"></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 progressbar. Can be set when initialising (first creating) the progressbar.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a progressbar with the <code>disabled</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).progressbar({ disabled: true });</code></pre> +</dd> + + +<dt> + Get or set the <code>disabled</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var disabled = $( ".selector" ).progressbar( "option", "disabled" ); +//setter +$( ".selector" ).progressbar( "option", "disabled", true );</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>The value of the progressbar.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a progressbar with the <code>value</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).progressbar({ value: 37 });</code></pre> +</dd> + + +<dt> + Get or set the <code>value</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var value = $( ".selector" ).progressbar( "option", "value" ); +//setter +$( ".selector" ).progressbar( "option", "value", 37 );</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-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">progressbarchange</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when the value of the progressbar changes.</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" ).progressbar({ + change: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>change</code> event by type: <code>progressbarchange</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "progressbarchange", 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">.progressbar( "destroy" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Remove the progressbar 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">.progressbar( "disable" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Disable the progressbar.</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">.progressbar( "enable" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Enable the progressbar.</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">.progressbar( "option" + +, optionName + +, <span class="optional">[</span>value<span class="optional">] </span> + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Get or set any progressbar 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">.progressbar( "option" + +, options + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Set multiple progressbar 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">.progressbar( "widget" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Returns the .ui-progressbar 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">.progressbar( "value" + +, <span class="optional">[</span>value<span class="optional">] </span> + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>This method gets or sets the current value of the progressbar.</p> + </div> +</li> + + </ul> + </div> + <div id="theming"> + <h2 class="top-header">Theming</h2> + <p>The jQuery UI Progressbar 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.progressbar.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-progressbar </strong>ui-widget ui-widget-content ui-corner-all"><br /> + <div style="width: 37%;" class="<strong>ui-progressbar-value</strong> ui-widget-header ui-corner-left"></div><br /> + </div> + <p class="theme-note"> + <strong> + Note: This is a sample of markup generated by the progressbar plugin, not markup you should use to create a progressbar. The only markup needed for that is <div></div>. + </strong> + </p> + + </div> +</div> + +</p><!-- +Pre-expand include size: 18800 bytes +Post-expand include size: 21667 bytes +Template argument size: 8533 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3780-1!1!0!!en!2 and timestamp 20100910075145 --> Added: labs/pulse/web-reports/jquery/ui/development-bundle/docs/removeClass.html URL: http://svn.apache.org/viewvc/labs/pulse/web-reports/jquery/ui/development-bundle/docs/removeClass.html?rev=1031625&view=auto ============================================================================== --- labs/pulse/web-reports/jquery/ui/development-bundle/docs/removeClass.html (added) +++ labs/pulse/web-reports/jquery/ui/development-bundle/docs/removeClass.html Fri Nov 5 15:25:30 2010 @@ -0,0 +1,113 @@ + +<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 removeClass</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/removeClass?section=1"; title="Edit section: removeClass( [class], [duration] )">edit</a>]</div><a name="removeClass.28_.5Bclass.5D.2C_.5Bduration.5D_.29"></a><h3>removeClass( <span class="optional">[</span>class<span class="optional">]</span>, <span class="optional">[</span>duration<span class="optional">]</span> )</h3> +<p>Removes all or specified class from each of the set of matched elements with an optional transition between the states.</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="100"> +Removes the class 'selected' from the matched elements with a one second transition.<br /> +</p> +<pre>$("p").<a href="http://docs.jquery.com/Events/click"; title="Events/click">click</a>(function () { + $(this).<strong class="selflink">removeClass</strong>("selected", 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> +<style type="text/css"> + p { cursor: pointer; font-size: 1.2em; } + .selected { color:red; } +</style> + <script> + $(document).ready(function() { + $("p").<a href="http://docs.jquery.com/Events/click"; title="Events/click">click</a>(function () { + $(this).<strong class="selflink">removeClass</strong>("selected", 1000); + }); + }); + </script> +</head> +<body style="font-size:62.5%;"> + +<p class="selected">Click me to remove 'selected' class.</p> +<p class="selected">Click me to remove 'selected' class.</p> +<p class="selected">Click me to remove 'selected' class.</p> + +</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-class"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-class">class</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">String</dd> + + <dt class="option-optional-label">Optional</dt> + + </dl> + </div> + <div class="option-description"> + <p>CSS classes to remove from the elements.</p> + </div> +</li> + + +<li class="option" id="option-duration"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-duration">duration</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> + + </ul> + </div> +</div> + +</p><!-- +Pre-expand include size: 5297 bytes +Post-expand include size: 7164 bytes +Template argument size: 4498 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2607-1!1!0!!en!2 and timestamp 20100910035043 --> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
