http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/docs/position.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/docs/position.html b/content/development-bundle/docs/position.html new file mode 100644 index 0000000..92711e2 --- /dev/null +++ b/content/development-bundle/docs/position.html @@ -0,0 +1,242 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI position documentation</title> + + <style> + body { + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" + } + .gutter { + display: none; + } + </style> +</head> +<body> + +<script>{ + "title": + ".position()", + "excerpt": + "Position an element relative to another.", + "termSlugs": { + "category": [ + "methods","overrides","utilities" + ] + } + }</script><article id="position1" class="entry method"><h2 class="section-title"> +<span class="name">.position( options )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a></span><span class="version-details">version added: 1.8</span> +</h2> +<div class="entry-wrapper"> +<p class="desc"><strong>Description: </strong>Position an element relative to another.</p> +<ul class="signatures"><li class="signature"> +<h4 class="name"><a id="position-options" href="#position-options"><span class="icon-link"></span>.position( options )</a></h4> +<ul><li> +<div><strong>options</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div></div> +<ul> +<li> +<div> +<strong>my</strong> (default: <code>"center"</code>)</div> +<div>Type: <a href="http://api.jquery.com/Types/#String";>String</a> +</div> +<div>Defines which position <strong>on the element being positioned</strong> to align with the target element: "horizontal vertical" alignment. A single value such as <code>"right"</code> will be normalized to <code>"right center"</code>, <code>"top"</code> will be normalized to <code>"center top"</code> (following CSS convention). Acceptable horizontal values: <code>"left"</code>, <code>"center"</code>, <code>"right"</code>. Acceptable vertical values: <code>"top"</code>, <code>"center"</code>, <code>"bottom"</code>. Example: <code>"left top"</code> or <code>"center center"</code>. Each dimension can also contain offsets, in pixels or percent, e.g., <code>"right+10 top-25%"</code>. Percentage offsets are relative to the element being positioned.</div> +</li> +<li> +<div> +<strong>at</strong> (default: <code>"center"</code>)</div> +<div>Type: <a href="http://api.jquery.com/Types/#String";>String</a> +</div> +<div>Defines which position <strong>on the target element</strong> to align the positioned element against: "horizontal vertical" alignment. See the <a href="#option-my"><code>my</code></a> option for full details on possible values. Percentage offsets are relative to the target element.</div> +</li> +<li> +<div> +<strong>of</strong> (default: <code>null</code>)</div> +<div>Type: <a href="http://api.jquery.com/Types/#Selector";>Selector</a> or <a href="http://api.jquery.com/Types/#Element";>Element</a> or <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> or <a href="http://api.jquery.com/Types/#Event";>Event</a> +</div> +<div>Which element to position against. If you provide a selector or jQuery object, the first matching element will be used. If you provide an event object, the <code>pageX</code> and <code>pageY</code> properties will be used. Example: <code>"#top-menu"</code> +</div> +</li> +<li> +<div> +<strong>collision</strong> (default: <code>"flip"</code>)</div> +<div>Type: <a href="http://api.jquery.com/Types/#String";>String</a> +</div> +<div> + <p>When the positioned element overflows the window in some direction, move it to an alternative position. Similar to <a href="#option-my"><code>my</code></a> and <a href="#option-at"><code>at</code></a>, this accepts a single value or a pair for horizontal/vertical, e.g., <code>"flip"</code>, <code>"fit"</code>, <code>"fit flip"</code>, <code>"fit none"</code>.</p> + <ul> + <li> +<code>"flip"</code>: Flips the element to the opposite side of the target and the collision detection is run again to see if it will fit. Whichever side allows more of the element to be visible will be used.</li> + <li> +<code>"fit"</code>: Shift the element away from the edge of the window.</li> + <li> +<code>"flipfit"</code>: First applies the flip logic, placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.</li> + <li> +<code>"none"</code>: Does not apply any collision detection.</li> + </ul> + </div> +</li> +<li> +<div> +<strong>using</strong> (default: <code>null</code>)</div> +<div>Type: <a href="http://api.jquery.com/Types/#Function";>Function</a>()</div> +<div> + When specified, the actual property setting is delegated to this callback. Receives two parameters: The first is a hash of <code>top</code> and <code>left</code> values for the position that should be set and can be forwarded to <code>.css()</code> or <code>.animate()</code>. + <p>The second provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. Both <code>target</code> and <code>element</code> have these properties: <code>element</code>, <code>left</code>, <code>top</code>, <code>width</code>, <code>height</code>. In addition, there's <code>horizontal</code>, <code>vertical</code> and <code>important</code>, giving you twelve potential directions like <code>{ horizontal: "center", vertical: "left", important: "horizontal" }</code>.</p> + </div> +</li> +<li> +<div> +<strong>within</strong> (default: <code>window</code>)</div> +<div>Type: <a href="http://api.jquery.com/Types/#Selector";>Selector</a> or <a href="http://api.jquery.com/Types/#Element";>Element</a> or <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> +</div> +<div>Element to position within, affecting collision detection. If you provide a selector or jQuery object, the first matching element will be used.</div> +</li> +</ul> +</li></ul> +</li></ul> +<div class="longdesc" id="entry-longdesc"> + <p>The jQuery UI <code>.position()</code> method allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents.</p> + <p><em>Note: jQuery UI does not support positioning hidden elements.</em></p> + <p>This is a standalone jQuery plugin and has no dependencies on other jQuery UI components.</p> + <p>This plugin extends jQuery's built-in <a href="//api.jquery.com/position"><code>.position()</code></a> method. If jQuery UI is not loaded, calling the <code>.position()</code> method may not fail directly, as the method still exists. However, the expected behavior will not occur.</p> + </div> +<section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0"> +<h4><span class="desc">A simple jQuery UI Position example.</span></h4> +<div class="syntaxhighlighter xml "> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + <div class="line n6">6</div> + + <div class="line n7">7</div> + + <div class="line n8">8</div> + + <div class="line n9">9</div> + + <div class="line n10">10</div> + + <div class="line n11">11</div> + + <div class="line n12">12</div> + + <div class="line n13">13</div> + + <div class="line n14">14</div> + + <div class="line n15">15</div> + + <div class="line n16">16</div> + + <div class="line n17">17</div> + + <div class="line n18">18</div> + + <div class="line n19">19</div> + + <div class="line n20">20</div> + + <div class="line n21">21</div> + + <div class="line n22">22</div> + + <div class="line n23">23</div> + + <div class="line n24">24</div> + + <div class="line n25">25</div> + + <div class="line n26">26</div> + + <div class="line n27">27</div> + + <div class="line n28">28</div> + + <div class="line n29">29</div> + + <div class="line n30">30</div> + + <div class="line n31">31</div> + + <div class="line n32">32</div> + + <div class="line n33">33</div> + + <div class="line n34">34</div> + + <div class="line n35">35</div> + + <div class="line n36">36</div> + + <div class="line n37">37</div> + + <div class="line n38">38</div> + + <div class="line n39">39</div> + + <div class="line n40">40</div> + + <div class="line n41">41</div> + + <div class="line n42">42</div> + + <div class="line n43">43</div> + + <div class="line n44">44</div> + + <div class="line n45">45</div> + + <div class="line n46">46</div> + + <div class="line n47">47</div> + + <div class="line n48">48</div> + + <div class="line n49">49</div> + + <div class="line n50">50</div> + + <div class="line n51">51</div> + + <div class="line n52">52</div> + + <div class="line n53">53</div> + + <div class="line n54">54</div> + + <div class="line n55">55</div> + + <div class="line n56">56</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>position demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">link</span> <span class="attribute ">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="class">.positionDiv</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">75</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span c lass="number">75</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background</span>:<span class="value"> green;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</spa n>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"targetElement"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"positionDiv"</span> <span class="attribute">id</span>=<span class="value">"position1"</span>></span><span class="tag"></<span class="title">div</span>></span></cod e></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"positionDiv"</span> <span class="attribute">id</span>=<span class="value">"position2"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"positionDiv"</span> <span class="attribute">id</span>=<span class="value">"position3"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"positionDiv"</span> <span class="attribute">id</span>=<span class="value">"position4"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#position1"</span> ).position({</code></div></div><div class="container"><div class="line"><code> my: <span class="string">"center"</span>,</code></div></div><div class="container"><div class="line"><code> at: <span class="string">"center"</span>,</code></div></div><div class="container"><div class="line"><code> of: <span class="string">"#targetElement"</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code>< /div></div><div class="container"><div class="line"><code>$( <span class="string">"#position2"</span> ).position({</code></div></div><div class="container"><div class="line"><code> my: <span class="string">"left top"</span>,</code></div></div><div class="container"><div class="line"><code> at: <span class="string">"left top"</span>,</code></div></div><div class="container"><div class="line"><code> of: <span class="string">"#targetElement"</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#position3"</span> ).position({</code></div></div><div class="container"><div class="line"><code> my: <span class="string">"right center"</span>,</code></div></div><div class="container"><div class="line"><code> at: <span class="string">"right bottom"</span>,</code></div></div><div class="container"><div class="lin e"><code> of: <span class="string">"#targetElement"</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$( document ).mousemove(<span class="keyword">function</span>( event ) {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"#position4"</span> ).position({</code></div></div><div class="container"><div class="line"><code> my: <span class="string">"left+3 bottom-3"</span>,</code></div></div><div class="container"><div class="line"><code> of: event,</code></div></div><div class="container"><div class="line"><code> collision: <span class="string">"fit"</span></code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&l t;/<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<h4>Demo:</h4> +<div class="demo code-demo"></div> +</div></section> +</div></article> + +</body> +</html>
http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/docs/progressbar.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/docs/progressbar.html b/content/development-bundle/docs/progressbar.html new file mode 100644 index 0000000..abfb87d --- /dev/null +++ b/content/development-bundle/docs/progressbar.html @@ -0,0 +1,778 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI progressbar documentation</title> + + <style> + body { + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" + } + .gutter { + display: none; + } + </style> +</head> +<body> + +<script>{ + "title": + "Progressbar Widget", + "excerpt": + "Display status of a determinate process.", + "termSlugs": { + "category": [ + "widgets" + ] + } + }</script><article id="progressbar1" class="entry widget"><h2 class="section-title"> +<span>Progressbar Widget</span><span class="version-details">version added: 1.6</span> +</h2> +<div class="entry-wrapper"> +<p class="desc"><strong>Description: </strong>Display status of a determinate process.</p> +<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a> +</h2></header><div class="quick-nav-section"> +<h3>Options</h3> +<div><a href="#option-disabled">disabled</a></div> +<div><a href="#option-max">max</a></div> +<div><a href="#option-value">value</a></div> +</div> +<div class="quick-nav-section"> +<h3>Methods</h3> +<div><a href="#method-destroy">destroy</a></div> +<div><a href="#method-disable">disable</a></div> +<div><a href="#method-enable">enable</a></div> +<div><a href="#method-option">option</a></div> +<div><a href="#method-value">value</a></div> +<div><a href="#method-widget">widget</a></div> +</div> +<div class="quick-nav-section"> +<h3>Events</h3> +<div><a href="#event-change">change</a></div> +<div><a href="#event-complete">complete</a></div> +<div><a href="#event-create">create</a></div> +</div></section><div class="longdesc" id="entry-longdesc"> + <p> + The progress bar is designed to display the current percent complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside its 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. A determinate progress bar should never fill from left to right, then loop back to empty for a single process â if the actual status cannot be calculated, an indeterminate progress bar or spinner animation is a better way to provide user feedback. + </p> + + <h3>Dependencies</h3> + <ul> + <li><a href="/category/ui-core/">UI Core</a></li> + <li><a href="/jQuery.widget/">Widget Factory</a></li> + </ul> + </div> +<h3>Additional Notes:</h3> +<div class="longdesc"><ul><li> + This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point. + </li></ul></div> +<section id="options"><header><h2>Options</h2></header><div id="option-disabled" class="api-item first-item"> +<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean";>Boolean</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>false</code> +</div> +<div>Disables the progressbar if set to <code>true</code>.</div> +<strong>Code examples:</strong><p>Initialize the progressbar with the <code>disabled</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar({ disabled: <span class="literal">true</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>disabled</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> disabled = $( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-max" class="api-item"> +<h3>max<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>0</code> +</div> +<div>The maximum value of the progressbar.</div> +<strong>Code examples:</strong><p>Initialize the progressbar with the <code>max</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar({ max: <span class="number">1024</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>max</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> max = $( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, <span class="string">"max"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, <span class="string">"max"</span>, <span class="number">1024</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +<div id="option-value" class="api-item"> +<h3>value<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div class="default"> +<strong>Default: </strong><code>0</code> +</div> +<div>The value of the progressbar.</div> +<strong>Code examples:</strong><p>Initialize the progressbar with the <code>value</code> option specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar({ value: <span class="number">25</span> });</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Get or set the <code>value</code> option, after initialization:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> value = $( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, <span class="string">"value"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, <span class="string">"value"</span>, <span class="number">25</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-destroy"><div class="api-item first-item"> +<h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div> + Removes the progressbar functionality completely. This will return the element back to its pre-init state. + </div> +<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the destroy method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"destroy"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></div> +<div id="method-disable"><div class="api-item"> +<h3>disable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div> + Disables the progressbar. + </div> +<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the disable method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"disable"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></div> +<div id="method-enable"><div class="api-item"> +<h3>enable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div> + Enables the progressbar. + </div> +<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the enable method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"enable"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></div> +<div id="method-option"> +<div class="api-item"> +<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object";>Object</a></span> +</h3> +<div>Gets the value currently associated with the specified <code>optionName</code>.</div> +<ul><li> +<div><strong>optionName</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#String";>String</a> +</div> +<div>The name of the option to get.</div> +</li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div class="api-item"> +<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject";>PlainObject</a></span> +</h3> +<div>Gets an object containing key/value pairs representing the current progressbar options hash.</div> +<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div class="api-item"> +<h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div>Sets the value of the progressbar option associated with the specified <code>optionName</code>.</div> +<ul> +<li> +<div><strong>optionName</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#String";>String</a> +</div> +<div>The name of the option to set.</div> +</li> +<li> +<div><strong>value</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>A value to set for the option.</div> +</li> +</ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div class="api-item"> +<h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div>Sets one or more options for the progressbar.</div> +<ul><li> +<div><strong>options</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div>A map of option-value pairs to set.</div> +</li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"option"</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +</div> +<div id="method-value"> +<div class="api-item"> +<h3>value()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Number";>Number</a></span> +</h3> +<div>Gets the current value of the progressbar.</div> +<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="keyword">var</span> progressSoFar = $( <span class="string">".selector"</span> ).progressbar( <span class="string">"value"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div class="api-item"> +<h3>value( value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/";>plugin only</a>)</span> +</h3> +<div>Sets the current value of the progressbar.</div> +<ul><li> +<div><strong>value</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Number";>Number</a> +</div> +<div>The value to set.</div> +</li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar( <span class="string">"value"</span>, <span class="number">50</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +</div> +<div id="method-widget"><div class="api-item"> +<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery";>jQuery</a></span> +</h3> +<div> + Returns a <code>jQuery</code> object containing the progressbar. + </div> +<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> +<div> +<strong>Code examples:</strong><p>Invoke the widget method:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">".selector"</span> ).progressbar( <span class="string">"widget"</span> );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-change" class="api-item first-item"> +<h3>change( event, ui )<span class="returns">Type: <code>progressbarchange</code></span> +</h3> +<div>Triggered when the value of the progressbar changes.</div> +<ul> +<li> +<div><strong>event</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Event";>Event</a> +</div> +<div></div> +</li> +<li> +<div><strong>ui</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div></div> +</li> +</ul> +<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p> +<div> +<strong>Code examples:</strong><p>Initialize the progressbar with the change callback specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar({</code></div></div><div class="container"><div class="line"><code> change: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Bind an event listener to the progressbarchange event:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"progressbarchange"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div id="event-complete" class="api-item"> +<h3>complete( event, ui )<span class="returns">Type: <code>progressbarcomplete</code></span> +</h3> +<div>Triggered when the value of the progressbar reaches the maximum value.</div> +<ul> +<li> +<div><strong>event</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Event";>Event</a> +</div> +<div></div> +</li> +<li> +<div><strong>ui</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div></div> +</li> +</ul> +<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p> +<div> +<strong>Code examples:</strong><p>Initialize the progressbar with the complete callback specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar({</code></div></div><div class="container"><div class="line"><code> complete: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Bind an event listener to the progressbarcomplete event:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"progressbarcomplete"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div> +<div id="event-create" class="api-item"> +<h3>create( event, ui )<span class="returns">Type: <code>progressbarcreate</code></span> +</h3> +<div> + Triggered when the progressbar is created. + </div> +<ul> +<li> +<div><strong>event</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Event";>Event</a> +</div> +<div></div> +</li> +<li> +<div><strong>ui</strong></div> +<div>Type: <a href="http://api.jquery.com/Types/#Object";>Object</a> +</div> +<div></div> +</li> +</ul> +<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p> +<div> +<strong>Code examples:</strong><p>Initialize the progressbar with the create callback specified:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).progressbar({</code></div></div><div class="container"><div class="line"><code> create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<p>Bind an event listener to the progressbarcreate event:</p> +<div class="syntaxhighlighter javascript nogutter"> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"progressbarcreate"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +</div> +</div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0"> +<h4><span class="desc">A simple jQuery UI Progressbar</span></h4> +<div class="syntaxhighlighter xml "> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + <div class="line n6">6</div> + + <div class="line n7">7</div> + + <div class="line n8">8</div> + + <div class="line n9">9</div> + + <div class="line n10">10</div> + + <div class="line n11">11</div> + + <div class="line n12">12</div> + + <div class="line n13">13</div> + + <div class="line n14">14</div> + + <div class="line n15">15</div> + + <div class="line n16">16</div> + + <div class="line n17">17</div> + + <div class="line n18">18</div> + + <div class="line n19">19</div> + + <div class="line n20">20</div> + + <div class="line n21">21</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>progressbar demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">link</span> <span class="attrib ute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div>< /div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"progressbar"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#progressbar"</span> ).progressbar({</code></div></div><div class="container"><div class="line"><code> value: <span class="number">37</span></code></div></div><div class="container"><div class="line"><code>});</code></div>< /div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<h4>Demo:</h4> +<div class="demo code-demo" data-height="50"></div> +</div></section> +</div></article> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/docs/puff-effect.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/docs/puff-effect.html b/content/development-bundle/docs/puff-effect.html new file mode 100644 index 0000000..6cc4e81 --- /dev/null +++ b/content/development-bundle/docs/puff-effect.html @@ -0,0 +1,124 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI puff-effect documentation</title> + + <style> + body { + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" + } + .gutter { + display: none; + } + </style> +</head> +<body> + +<script>{ + "title": + "Puff Effect", + "excerpt": + "\n\t\tCreates a puff effect by scaling the element up and hiding it at the same time.\n\t", + "termSlugs": { + "category": [ + "effects" + ] + } + }</script><article id="puff1" class="entry effect"><h2 class="section-title"><span>Puff Effect</span></h2> +<div class="entry-wrapper"> +<p class="desc"><strong>Description: </strong> + Creates a puff effect by scaling the element up and hiding it at the same time. + </p> +<ul class="signatures"><li class="signature"> +<h4 class="name">puff</h4> +<ul><li> +<div> +<strong>percent</strong> (default: <code>150</code>)</div> +<div>Type: <a href="http://api.jquery.com/Types/#Number";>Number</a> +</div> +<div>The percentage to scale to.</div> +</li></ul> +</li></ul> +<section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0"> +<h4><span class="desc">Toggle a div using the puff effect.</span></h4> +<div class="syntaxhighlighter xml "> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + <div class="line n6">6</div> + + <div class="line n7">7</div> + + <div class="line n8">8</div> + + <div class="line n9">9</div> + + <div class="line n10">10</div> + + <div class="line n11">11</div> + + <div class="line n12">12</div> + + <div class="line n13">13</div> + + <div class="line n14">14</div> + + <div class="line n15">15</div> + + <div class="line n16">16</div> + + <div class="line n17">17</div> + + <div class="line n18">18</div> + + <div class="line n19">19</div> + + <div class="line n20">20</div> + + <div class="line n21">21</div> + + <div class="line n22">22</div> + + <div class="line n23">23</div> + + <div class="line n24">24</div> + + <div class="line n25">25</div> + + <div class="line n26">26</div> + + <div class="line n27">27</div> + + <div class="line n28">28</div> + + <div class="line n29">29</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>puff demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">link</span> <span class="attribute">re l</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="id">#toggle</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background</span>:<span class= "value"> <span class="hexcolor">#ccc</span>;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"> <div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">p</span>></span>Click anywhere to toggle the box.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"toggle"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></ span></code></div></div><div class="container"><div class="line"><code>$( document ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"#toggle"</span> ).toggle( <span class="string">"puff"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<h4>Demo:</h4> +<div class="demo code-demo" data-height="200"></div> +</div></section> +</div></article> + +</body> +</html> http://git-wip-us.apache.org/repos/asf/james-site/blob/38b1b837/content/development-bundle/docs/pulsate-effect.html ---------------------------------------------------------------------- diff --git a/content/development-bundle/docs/pulsate-effect.html b/content/development-bundle/docs/pulsate-effect.html new file mode 100644 index 0000000..e5d4202 --- /dev/null +++ b/content/development-bundle/docs/pulsate-effect.html @@ -0,0 +1,124 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI pulsate-effect documentation</title> + + <style> + body { + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" + } + .gutter { + display: none; + } + </style> +</head> +<body> + +<script>{ + "title": + "Pulsate Effect", + "excerpt": + "\n\t\tThe pulsate effect hides or shows an element by pulsing it in or out.\n\t", + "termSlugs": { + "category": [ + "effects" + ] + } + }</script><article id="pulsate1" class="entry effect"><h2 class="section-title"><span>Pulsate Effect</span></h2> +<div class="entry-wrapper"> +<p class="desc"><strong>Description: </strong> + The pulsate effect hides or shows an element by pulsing it in or out. + </p> +<ul class="signatures"><li class="signature"> +<h4 class="name">pulsate</h4> +<ul><li> +<div> +<strong>times</strong> (default: <code>5</code>)</div> +<div>Type: <a href="http://api.jquery.com/Types/#Integer";>Integer</a> +</div> +<div>The number of times the element should pulse. An extra half pulse is added for hide/show.</div> +</li></ul> +</li></ul> +<section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0"> +<h4><span class="desc">Toggle a div using the pulsate effect.</span></h4> +<div class="syntaxhighlighter xml "> + <table> + <tbody> + <tr> + <td class="gutter"> + + <div class="line n1">1</div> + + <div class="line n2">2</div> + + <div class="line n3">3</div> + + <div class="line n4">4</div> + + <div class="line n5">5</div> + + <div class="line n6">6</div> + + <div class="line n7">7</div> + + <div class="line n8">8</div> + + <div class="line n9">9</div> + + <div class="line n10">10</div> + + <div class="line n11">11</div> + + <div class="line n12">12</div> + + <div class="line n13">13</div> + + <div class="line n14">14</div> + + <div class="line n15">15</div> + + <div class="line n16">16</div> + + <div class="line n17">17</div> + + <div class="line n18">18</div> + + <div class="line n19">19</div> + + <div class="line n20">20</div> + + <div class="line n21">21</div> + + <div class="line n22">22</div> + + <div class="line n23">23</div> + + <div class="line n24">24</div> + + <div class="line n25">25</div> + + <div class="line n26">26</div> + + <div class="line n27">27</div> + + <div class="line n28">28</div> + + <div class="line n29">29</div> + + </td> + <td class="code"> + <pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>pulsate demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">link</span> <span class="attribute" >rel</span>=<span class="value">"stylesheet"</span> <span >class="attribute">href</span>=<span >class="value">"//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>></span></code></div></div><div > class="container"><div class="line"><code> <span class="tag"><<span >class="title">style</span>></span><span >class="css"></span></code></div></div><div class="container"><div >class="line"><code> <span class="id">#toggle</span> <span >class="rules">{</span></code></div></div><div class="container"><div >class="line"><code> <span class="rule"><span >class="attribute">width</span>:<span class="value"> <span >class="number">100</span>px;</span></span></code></div></div><div >class="container"><div class="line"><code> <span class="rule"><span >class="attribute">height</span>:<span class="value"> <span >class="number">100</span>px;</span></span></code></div></div><div >class="container"><div class="line"><code> <span class="rule"><span >class="attribute">background</span>:<span cla ss="value"> <span class="hexcolor">#ccc</span>;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="containe r"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">p</span>></span>Click anywhere to toggle the box.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"toggle"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript" ></span></code></div></div><div class="container"><div class="line"><code>$( >document ).click(<span class="keyword">function</span>() >{</code></div></div><div class="container"><div class="line"><code> $( <span >class="string">"#toggle"</span> ).toggle( <span >class="string">"pulsate"</span> );</code></div></div><div >class="container"><div class="line"><code>});</code></div></div><div >class="container"><div class="line"><code><span class="tag"></<span >class="title">script</span>></span></code></div></div><div >class="container"><div class="line"><code> </code></div></div><div >class="container"><div class="line"><code><span class="tag"></<span >class="title">body</span>></span></code></div></div><div >class="container"><div class="line"><code><span class="tag"></<span >class="title">html</span>></span></code></div></div></pre> + </td> + </tr> + </tbody> + </table> +</div> + +<h4>Demo:</h4> +<div class="demo code-demo" data-height="200"></div> +</div></section> +</div></article> + +</body> +</html> --------------------------------------------------------------------- To unsubscribe, e-mail: server-dev-unsubscr...@james.apache.org For additional commands, e-mail: server-dev-h...@james.apache.org
