Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/tabs.html
URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/tabs.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/tabs.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/tabs.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,1512 @@ + +<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 Tabs</h1> + <div id="overview"> + <h2 class="top-header">Overview</h2> + <div id="overview-main"> + <p>Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.</p> +<p>By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.</p> +<table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div> +<ul> +<li class="toclevel-1"><a href="#Events"><span class="tocnumber">1</span> <span class="toctext">Events</span></a></li> +<li class="toclevel-1"><a href="#Ajax_mode"><span class="tocnumber">2</span> <span class="toctext">Ajax mode</span></a> +<ul> +<li class="toclevel-2"><a href="#Back_button_and_bookmarking"><span class="tocnumber">2.1</span> <span class="toctext">Back button and bookmarking</span></a></li> +</ul> +</li> +<li class="toclevel-1"><a href="#How_to..."><span class="tocnumber">3</span> <span class="toctext">How to...</span></a> +<ul> +<li class="toclevel-2"><a href="#...retrieve_the_index_of_the_currently_selected_tab"><span class="tocnumber">3.1</span> <span class="toctext">...retrieve the index of the currently selected tab</span></a></li> +<li class="toclevel-2"><a href="#...open_links_in_the_current_tab_instead_of_leaving_the_page"><span class="tocnumber">3.2</span> <span class="toctext">...open links in the current tab instead of leaving the page</span></a></li> +<li class="toclevel-2"><a href="#...select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself"><span class="tocnumber">3.3</span> <span class="toctext">...select a tab from a text link instead of clicking a tab itself</span></a></li> +<li class="toclevel-2"><a href="#...prevent_switching_to_the_tab_on_click_depending_on_form_validation"><span class="tocnumber">3.4</span> <span class="toctext">...prevent switching to the tab on click depending on form validation</span></a></li> +<li class="toclevel-2"><a href="#...immediately_select_a_just_added_tab"><span class="tocnumber">3.5</span> <span class="toctext">...immediately select a just added tab</span></a></li> +<li class="toclevel-2"><a href="#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax"><span class="tocnumber">3.6</span> <span class="toctext">...follow a tab's URL instead of loading its content via ajax</span></a></li> +<li class="toclevel-2"><a href="#...prevent_a_FOUC_.28Flash_of_Unstyled_Content.29_before_tabs_are_initialized"><span class="tocnumber">3.7</span> <span class="toctext">...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized</span></a></li> +</ul> +</li> +<li class="toclevel-1"><a href="#Why_does..."><span class="tocnumber">4</span> <span class="toctext">Why does...</span></a> +<ul> +<li class="toclevel-2"><a href="#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F"><span class="tocnumber">4.1</span> <span class="toctext">...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?</span></a></li> +</ul> +</li> +</ul> +</td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=1" title="Template:UIAPIPlugin">edit</a>]</div><a name="Events"></a><h2>Events</h2> +<p>A series of events fire when interacting with a tabs interface: +</p> +<ul><li> tabsselect, tabsload, tabsshow (in that order) +</li><li> tabsadd, tabsremove +</li><li> tabsenable, tabsdisable +</li></ul> +<p>Event binding example: +</p> +<pre>$('#example').bind('tabsselect', function(event, ui) { + + // Objects available in the function context: + ui.tab // anchor element of the selected (clicked) tab + ui.panel // element, that contains the selected/clicked tab contents + ui.index // zero-based index of the selected (clicked) tab + +});</pre> +<p>Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation). +</p> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=2" title="Template:UIAPIPlugin">edit</a>]</div><a name="Ajax_mode"></a><h2> Ajax mode </h2> +<p>Tabs supports loading tab content via Ajax in an unobtrusive manner. +</p><p>The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers' markup is going to be created on the fly: +</p> +<pre> +<div id="example"> + <ul> + <li><a href="ahah_1.html"><span>Content 1</span></a></li> + <li><a href="ahah_2.html"><span>Content 2</span></a></li> + <li><a href="ahah_3.html"><span>Content 3</span></a></li> + </ul> +</div> +</pre> +<p>Obviously this degrades gracefully - the links, e.g. the content, will still be accessible with JavaScript disabled. +</p><p>Note that if you wish to reuse an existing container, you +could do so by matching a title attribute and the container's id: +</p> +<pre> +<li><a href="hello/world.html" title="Todo Overview"> ... </a></li> +</pre> +<p>and a container like: +</p> +<pre> +<div id="Todo_Overview"> ... </div> +</pre> +<p>(Note how white space is replaced with an underscore) +</p><p>This is useful if you want a human readable hash in the URL instead of +a cryptic generated one. +</p> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=3" title="Template:UIAPIPlugin">edit</a>]</div><a name="Back_button_and_bookmarking"></a><h3>Back button and bookmarking</h3> +<p>Tabs 2 already supported this functionality, although the history plugin needs a rewrite first (it doesn't support Safari 3 and is in general a little inflexible) before it can be build back into the tabs. It is planned and Klaus is working on it whenever he finds the time. Actual bugs in the UI Tabs plugin itself always have higher priority though. +</p> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=4" title="Template:UIAPIPlugin">edit</a>]</div><a name="How_to..."></a><h2>How to...</h2> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=5" title="Template:UIAPIPlugin">edit</a>]</div><a name="...retrieve_the_index_of_the_currently_selected_tab"></a><h3>...retrieve the index of the currently selected tab</h3> +<pre>var $tabs = $('#example').tabs(); +var selected = $tabs.tabs('option', 'selected'); // => 0</pre> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=6" title="Template:UIAPIPlugin">edit</a>]</div><a name="...open_links_in_the_current_tab_instead_of_leaving_the_page"></a><h3>...open links in the current tab instead of leaving the page</h3> +<p>"Hijax" links after tab content has been loaded: +</p> +<pre>$('#example').tabs({ + load: function(event, ui) { + $('a', ui.panel).click(function() { + $(ui.panel).load(this.href); + return false; + }); + } +});</pre> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=7" title="Template:UIAPIPlugin">edit</a>]</div><a name="...select_a_tab_from_a_text_link_instead_of_clicking_a_tab_itself"></a><h3>...select a tab from a text link instead of clicking a tab itself</h3> +<pre>var $tabs = $('#example').tabs(); // first tab selected + +$('#my-text-link').click(function() { // bind click event to link + $tabs.tabs('select', 2); // switch to third tab + return false; +});</pre> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=8" title="Template:UIAPIPlugin">edit</a>]</div><a name="...prevent_switching_to_the_tab_on_click_depending_on_form_validation"></a><h3>...prevent switching to the tab on click depending on form validation</h3> +<p>Returning false in the tabs select handler prevents the clicked tab from becoming selected. +</p> +<pre>$('#example').tabs({ + select: function(event, ui) { + var isValid = ... // form validation returning true or false + return isValid; + } +});</pre> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=9" title="Template:UIAPIPlugin">edit</a>]</div><a name="...immediately_select_a_just_added_tab"></a><h3>...immediately select a just added tab</h3> +<pre>var $tabs = $('#example').tabs({ + add: function(event, ui) { + $tabs.tabs('select', '#' + ui.panel.id); + } +});</pre> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=10" title="Template:UIAPIPlugin">edit</a>]</div><a name="...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax"></a><h3>...follow a tab's URL instead of loading its content via ajax</h3> +<p>Note that opening a tab in a new window is unexpected, e.g. +inconsistent behaviour exposing a usablity problem (<a href="http://www.useit.com/alertbox/tabs.html" class="external free" title="http://www.useit.com/alertbox/tabs.html">http://www.useit.com/alertbox/tabs.html</a>). +</p> +<pre>$('#example').tabs({ + select: function(event, ui) { + var url = $.data(ui.tab, 'load.tabs'); + if( url ) { + location.href = url; + return false; + } + return true; + } +});</pre> +<p><br /> +</p> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=11" title="Template:UIAPIPlugin">edit</a>]</div><a name="...prevent_a_FOUC_.28Flash_of_Unstyled_Content.29_before_tabs_are_initialized"></a><h3>...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized</h3> +<p>Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will <b>not</b> degrade gracefully with JavaScript being disabled: +</p> +<pre><div id="example" class="ui-tabs"> + ... + <div id="a-tab-panel" class="ui-tabs-hide"> </div> + ... +</div></pre> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=12" title="Template:UIAPIPlugin">edit</a>]</div><a name="Why_does..."></a><h2>Why does...</h2> +<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/Template:UIAPIPlugin?section=13" title="Template:UIAPIPlugin">edit</a>]</div><a name="...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F"></a><h3>...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?</h3> +<p>Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via <code>display: none</code> so that any elements inside won't report their actual width and height (0 in most browsers). +</p><p>There's an easy workaround. Use the <em>off-left technique</em> for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with +</p> +<pre>.ui-tabs .ui-tabs-hide { + position: absolute; + left: -10000px; +}</pre> +<p>For Google maps you can also resize the map once the tab is displayed like this: +</p> +<pre>$('#example').bind('tabsshow', function(event, ui) { + if (ui.panel.id == "map-tab") { + resizeMap(); + } +});</pre> +resizeMap() will call Google Maps' checkResize() on the particular map. + </div> + <div id="overview-dependencies"> + <h3>Dependencies</h3> + <ul> +<li>UI Core</li> +<li>To use the cookie option: <a href="http://plugins.jquery.com/project/cookie" class="external text" title="http://plugins.jquery.com/project/cookie">jquery.cookie.js</a></li> +<li>Required CSS: +<pre>.ui-tabs .ui-tabs-hide { + display: none; +}</pre></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="295"> +A simple jQuery UI Tabs.<br /> +</p> +<pre>$("#tabs").tabs(); +</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() { + $("#tabs").tabs(); + }); + </script> +</head> +<body style="font-size:62.5%;"> + +<div id="tabs"> + <ul> + <li><a href="#fragment-1"><span>One</span></a></li> + <li><a href="#fragment-2"><span>Two</span></a></li> + <li><a href="#fragment-3"><span>Three</span></a></li> + </ul> + <div id="fragment-1"> + <p>First tab is active by default:</p> + <pre><code>$('#example').tabs();</code></pre> + </div> + <div id="fragment-2"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. + </div> + <div id="fragment-3"> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. + </div> +</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 tabs. Can be set when initialising (first creating) the tabs.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>disabled</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ disabled: true });</code></pre> +</dd> + + +<dt> + Get or set the <code>disabled</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var disabled = $( ".selector" ).tabs( "option", "disabled" ); +//setter +$( ".selector" ).tabs( "option", "disabled", true );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-ajaxOptions"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-ajaxOptions">ajaxOptions</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">Options</dd> + + <dt class="option-default-label">Default:</dt> + <dd class="option-default">null</dd> + + </dl> + </div> + <div class="option-description"> + <p>Additional Ajax options to consider when loading tab content (see $.ajax).</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>ajaxOptions</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ ajaxOptions: { async: false } });</code></pre> +</dd> + + +<dt> + Get or set the <code>ajaxOptions</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var ajaxOptions = $( ".selector" ).tabs( "option", "ajaxOptions" ); +//setter +$( ".selector" ).tabs( "option", "ajaxOptions", { async: false } );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-cache"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-cache">cache</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>Whether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>cache</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ cache: true });</code></pre> +</dd> + + +<dt> + Get or set the <code>cache</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var cache = $( ".selector" ).tabs( "option", "cache" ); +//setter +$( ".selector" ).tabs( "option", "cache", true );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-collapsible"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-collapsible">collapsible</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>Set to true to allow an already selected tab to become unselected again upon reselection.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>collapsible</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ collapsible: true });</code></pre> +</dd> + + +<dt> + Get or set the <code>collapsible</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var collapsible = $( ".selector" ).tabs( "option", "collapsible" ); +//setter +$( ".selector" ).tabs( "option", "collapsible", true );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-cookie"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-cookie">cookie</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">Object</dd> + + <dt class="option-default-label">Default:</dt> + <dd class="option-default">null</dd> + + </dl> + </div> + <div class="option-description"> + <p>Store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the <i>selected</i> option is not defined. Requires cookie plugin. The object needs to have key/value pairs of the form the cookie plugin expects as options. Available options (example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }. Since jQuery UI 1.7 it is also possible to define the cookie name being used via <i>name</i> property.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>cookie</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ cookie: { expires: 30 } });</code></pre> +</dd> + + +<dt> + Get or set the <code>cookie</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var cookie = $( ".selector" ).tabs( "option", "cookie" ); +//setter +$( ".selector" ).tabs( "option", "cookie", { expires: 30 } );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-deselectable"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-deselectable">deselectable</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>deprecated in jQuery UI 1.7, use collapsible.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>deselectable</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ deselectable: true });</code></pre> +</dd> + + +<dt> + Get or set the <code>deselectable</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var deselectable = $( ".selector" ).tabs( "option", "deselectable" ); +//setter +$( ".selector" ).tabs( "option", "deselectable", true );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<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">Array<Number></dd> + + <dt class="option-default-label">Default:</dt> + <dd class="option-default">[]</dd> + + </dl> + </div> + <div class="option-description"> + <p>An array containing the position of the tabs (zero-based index) that should be disabled on initialization.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>disabled</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ disabled: [1, 2] });</code></pre> +</dd> + + +<dt> + Get or set the <code>disabled</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var disabled = $( ".selector" ).tabs( "option", "disabled" ); +//setter +$( ".selector" ).tabs( "option", "disabled", [1, 2] );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-event"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-event">event</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">'click'</dd> + + </dl> + </div> + <div class="option-description"> + <p>The type of event to be used for selecting a tab.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>event</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ event: 'mouseover' });</code></pre> +</dd> + + +<dt> + Get or set the <code>event</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var event = $( ".selector" ).tabs( "option", "event" ); +//setter +$( ".selector" ).tabs( "option", "event", 'mouseover' );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-fx"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-fx">fx</a></h3> + <dl> + <dt class="option-type-label">Type:</dt> + <dd class="option-type">Options, Array<Options></dd> + + <dt class="option-default-label">Default:</dt> + <dd class="option-default">null</dd> + + </dl> + </div> + <div class="option-description"> + <p>Enable animations for hiding and showing tab panels. The duration option can be a string representing one of the three predefined speeds ("slow", "normal", "fast") or the duration in milliseconds to run an animation (default is "normal").</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>fx</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ fx: { opacity: 'toggle' } });</code></pre> +</dd> + + +<dt> + Get or set the <code>fx</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var fx = $( ".selector" ).tabs( "option", "fx" ); +//setter +$( ".selector" ).tabs( "option", "fx", { opacity: 'toggle' } );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-idPrefix"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-idPrefix">idPrefix</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">'ui-tabs-'</dd> + + </dl> + </div> + <div class="option-description"> + <p>If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>idPrefix</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });</code></pre> +</dd> + + +<dt> + Get or set the <code>idPrefix</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var idPrefix = $( ".selector" ).tabs( "option", "idPrefix" ); +//setter +$( ".selector" ).tabs( "option", "idPrefix", 'ui-tabs-primary' );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-panelTemplate"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-panelTemplate">panelTemplate</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">'<div></div>'</dd> + + </dl> + </div> + <div class="option-description"> + <p>HTML template from which a new tab panel is created in case of adding a tab with the add method or when creating a panel for a remote tab on the fly.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>panelTemplate</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ panelTemplate: '<li></li>' });</code></pre> +</dd> + + +<dt> + Get or set the <code>panelTemplate</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var panelTemplate = $( ".selector" ).tabs( "option", "panelTemplate" ); +//setter +$( ".selector" ).tabs( "option", "panelTemplate", '<li></li>' );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-selected"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-selected">selected</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>Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>selected</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ selected: 3 });</code></pre> +</dd> + + +<dt> + Get or set the <code>selected</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var selected = $( ".selector" ).tabs( "option", "selected" ); +//setter +$( ".selector" ).tabs( "option", "selected", 3 );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-spinner"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-spinner">spinner</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">'<em>Loading&#8230;</em>'</dd> + + </dl> + </div> + <div class="option-description"> + <p>The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior. An span element must be present in the A tag of the title, for the spinner content to be visible.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>spinner</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ spinner: 'Retrieving data...' });</code></pre> +</dd> + + +<dt> + Get or set the <code>spinner</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var spinner = $( ".selector" ).tabs( "option", "spinner" ); +//setter +$( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="option" id="option-tabTemplate"> + <div class="option-header"> + <h3 class="option-name"><a href="#option-tabTemplate">tabTemplate</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">'<li><a href="#{href}"><span>#{label}</span></a></li>'</dd> + + </dl> + </div> + <div class="option-description"> + <p>HTML template from which a new tab is created and added. The placeholders #{href} and #{label} are replaced with the url and tab label that are passed as arguments to the add method.</p> + </div> + <div class="option-examples"> + <h4>Code examples</h4> + <dl class="option-examples-list"> + +<dt> + Initialize a tabs with the <code>tabTemplate</code> option specified. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ tabTemplate: '<div><a href="#{href}"><span>#{label}</span></a></div>' });</code></pre> +</dd> + + +<dt> + Get or set the <code>tabTemplate</code> option, after init. +</dt> +<dd> +<pre><code>//getter +var tabTemplate = $( ".selector" ).tabs( "option", "tabTemplate" ); +//setter +$( ".selector" ).tabs( "option", "tabTemplate", '<div><a href="#{href}"><span>#{label}</span></a></div>' );</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-select"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-select">select</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">tabsselect</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when clicking a tab.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>select</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ + select: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>select</code> event by type: <code>tabsselect</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "tabsselect", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-load"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-load">load</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">tabsload</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered after the content of a remote tab has been loaded.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>load</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ + load: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>load</code> event by type: <code>tabsload</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "tabsload", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-show"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-show">show</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">tabsshow</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when a tab is shown.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>show</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ + show: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>show</code> event by type: <code>tabsshow</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "tabsshow", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-add"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-add">add</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">tabsadd</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when a tab is added.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>add</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ + add: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>add</code> event by type: <code>tabsadd</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "tabsadd", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-remove"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-remove">remove</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">tabsremove</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when a tab is removed.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>remove</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ + remove: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>remove</code> event by type: <code>tabsremove</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "tabsremove", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-enable"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-enable">enable</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">tabsenable</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when a tab is enabled.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>enable</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ + enable: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>enable</code> event by type: <code>tabsenable</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "tabsenable", function(event, ui) { + ... +});</code></pre> +</dd> + + </dl> + </div> +</li> + + +<li class="event" id="event-disable"> + <div class="event-header"> + <h3 class="event-name"><a href="#event-disable">disable</a></h3> + <dl> + <dt class="event-type-label">Type:</dt> + <dd class="event-type">tabsdisable</dd> + </dl> + </div> + <div class="event-description"> + <p>This event is triggered when a tab is disabled.</p> + </div> + <div class="event-examples"> + <h4>Code examples</h4> + <dl class="event-examples-list"> + +<dt> + Supply a callback function to handle the <code>disable</code> event as an init option. +</dt> +<dd> +<pre><code>$( ".selector" ).tabs({ + disable: function(event, ui) { ... } +});</code></pre> +</dd> + + +<dt> + Bind to the <code>disable</code> event by type: <code>tabsdisable</code>. +</dt> +<dd> +<pre><code>$( ".selector" ).bind( "tabsdisable", 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">.tabs( "destroy" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Remove the tabs 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">.tabs( "disable" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Disable the tabs.</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">.tabs( "enable" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Enable the tabs.</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">.tabs( "option" + +, optionName + +, <span class="optional">[</span>value<span class="optional">] </span> + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Get or set any tabs 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">.tabs( "option" + +, options + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Set multiple tabs 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">.tabs( "widget" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Returns the .ui-tabs element.</p> + </div> +</li> + + +<li class="method" id="method-add"> + <div class="method-header"> + <h3 class="method-name"><a href="#method-add">add</a></h3> + <dl> + <dt class="method-signature-label">Signature:</dt> + <dd class="method-signature">.tabs( "add" + +, url + +, label + +, <span class="optional">[</span>index<span class="optional">] </span> + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Add a new tab. The second argument is either a URL consisting of a fragment identifier only to create an in-page tab or a full url (relative or absolute, no cross-domain support) to turn the new tab into an Ajax (remote) tab. The third is the zero-based position where to insert the new tab. Optional, by default a new tab is appended at the end.</p> + </div> +</li> + + +<li class="method" id="method-remove"> + <div class="method-header"> + <h3 class="method-name"><a href="#method-remove">remove</a></h3> + <dl> + <dt class="method-signature-label">Signature:</dt> + <dd class="method-signature">.tabs( "remove" + +, index + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Remove a tab. The second argument is the zero-based index of the tab to be removed.</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">.tabs( "enable" + +, index + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Enable a disabled tab. To enable more than one tab at once reset the disabled property like: <code>$('#example').tabs("option","disabled",[]);</code>. The second argument is the zero-based index of the tab to be enabled.</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">.tabs( "disable" + +, index + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Disable a tab. The selected tab cannot be disabled. To disable more than one tab at once use: <code>$('#example').tabs("option","disabled", [1, 2, 3]);</code> The second argument is the zero-based index of the tab to be disabled.</p> + </div> +</li> + + +<li class="method" id="method-select"> + <div class="method-header"> + <h3 class="method-name"><a href="#method-select">select</a></h3> + <dl> + <dt class="method-signature-label">Signature:</dt> + <dd class="method-signature">.tabs( "select" + +, index + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).</p> + </div> +</li> + + +<li class="method" id="method-load"> + <div class="method-header"> + <h3 class="method-name"><a href="#method-load">load</a></h3> + <dl> + <dt class="method-signature-label">Signature:</dt> + <dd class="method-signature">.tabs( "load" + +, index + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Reload the content of an Ajax tab programmatically. This method always loads the tab content from the remote location, even if cache is set to true. The second argument is the zero-based index of the tab to be reloaded.</p> + </div> +</li> + + +<li class="method" id="method-url"> + <div class="method-header"> + <h3 class="method-name"><a href="#method-url">url</a></h3> + <dl> + <dt class="method-signature-label">Signature:</dt> + <dd class="method-signature">.tabs( "url" + +, index + +, url + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Change the url from which an Ajax (remote) tab will be loaded. The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab. The second argument is the zero-based index of the tab of which its URL is to be updated. The third is a URL the content of the tab is loaded from.</p> + </div> +</li> + + +<li class="method" id="method-length"> + <div class="method-header"> + <h3 class="method-name"><a href="#method-length">length</a></h3> + <dl> + <dt class="method-signature-label">Signature:</dt> + <dd class="method-signature">.tabs( "length" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Retrieve the number of tabs of the first matched tab pane.</p> + </div> +</li> + + +<li class="method" id="method-abort"> + <div class="method-header"> + <h3 class="method-name"><a href="#method-abort">abort</a></h3> + <dl> + <dt class="method-signature-label">Signature:</dt> + <dd class="method-signature">.tabs( "abort" + + + + + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Terminate all running tab ajax requests and animations.</p> + </div> +</li> + + +<li class="method" id="method-rotate"> + <div class="method-header"> + <h3 class="method-name"><a href="#method-rotate">rotate</a></h3> + <dl> + <dt class="method-signature-label">Signature:</dt> + <dd class="method-signature">.tabs( "rotate" + +, ms + +, <span class="optional">[</span>continuing<span class="optional">] </span> + + + +)</dd> + </dl> + </div> + <div class="method-description"> + <p>Set up an automatic rotation through tabs of a tab pane. The second argument is an amount of time in milliseconds until the next tab in the cycle gets activated. Use 0 or null to stop the rotation. The third controls whether or not to continue the rotation after a tab has been selected by a user. Default: false.</p> + </div> +</li> + + </ul> + </div> + <div id="theming"> + <h2 class="top-header">Theming</h2> + <p>The jQuery UI Tabs 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.tabs.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-tabs</strong> ui-widget ui-widget-content ui-corner-all" id="tabs"><br /> + <ul class="<strong>ui-tabs-nav</strong> ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"><br /> + <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li><br /> + <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li><br /> + <div class="<strong>ui-tabs-panel</strong> ui-widget-content ui-corner-bottom" id="tabs-1"><br /> + <p>Tab one content goes here.</p><br /> + </div><br /> + ...<br /> +</div><br /> + <p class="theme-note"> + <strong> + Note: This is a sample of markup generated by the tabs plugin, not markup you should use to create a tabs. The only markup needed for that is <br /><div id="tabs"><br /> +   <ul><br /> +      <li><a href="#tabs-1">Nunc tincidunt</a></li><br /> +      <li><a href="#tabs-2">Proin dolor</a></li><br /> +      <li><a href="#tabs-3">Aenean lacinia</a></li><br /> +   </ul><br /> +   <div id="tabs-1"><br /> +      <p>Tab 1 content</p><br /> +   </div><br /> +   <div id="tabs-2"><br /> +      <p>Tab 2 content</p><br /> +   </div><br /> +   <div id="tabs-3"><br /> +      <p>Tab 3 content</p><br /> +   </div><br /> +</div>. + </strong> + </p> + + </div> +</div> + +</p><!-- +Pre-expand include size: 56186 bytes +Post-expand include size: 95623 bytes +Template argument size: 57017 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3777-1!1!0!!en!2 and timestamp 20100520043008 --> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/tabs.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/tabs.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/tabs.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggle.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggle.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggle.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggle.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,144 @@ + +<ul class="UIAPIPlugin-toc"> +<li><a href="#overview">Overview</a></li> +<li><a href="#options">Arguments</a></li> +</ul> +<div class="UIAPIPlugin"> + <h1>jQuery UI toggle</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/toggle?section=1" title="Edit section: toggle( effect, [options], [speed], [callback] )">edit</a>]</div><a name="toggle.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>toggle( 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 toggle method optionally accepts jQuery UI advanced effects.</p> +<p>Uses a specific effect on an element to toggle 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 toggle a div.<br /> +</p> +<pre>$("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () { + $("div").<strong class="selflink">toggle</strong>("slide", {}, 1000); + }); +</pre> +<p></div><div id="source" class="tabs-container"> +</p> +<pre><!DOCTYPE html> +<html> +<head> + <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> + <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> + <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> +<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script> +<style type="text/css"> + div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; } +</style> + <script> + $(document).ready(function() { + $("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () { + $("div").<strong class="selflink">toggle</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>Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.</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: 6372 bytes +Post-expand include size: 8945 bytes +Template argument size: 5663 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2615-1!1!0!!en!2 and timestamp 20100519142327 --> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggle.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggle.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggle.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggleClass.html URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggleClass.html?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggleClass.html (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggleClass.html Mon Jun 21 17:45:18 2010 @@ -0,0 +1,111 @@ + +<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 toggleClass</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/toggleClass?section=1" title="Edit section: toggleClass( class, [duration] )">edit</a>]</div><a name="toggleClass.28_class.2C_.5Bduration.5D_.29"></a><h3>toggleClass( class, <span class="optional">[</span>duration<span class="optional">]</span> )</h3> +<p>Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.</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"> +Adds the 'selected' class if it is not present, and removes the 'selected' class if it is present.<br /> +</p> +<pre>$("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () { + $(this).<strong class="selflink">toggleClass</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">toggleClass</strong>("selected", 1000); + }); + }); + </script> +</head> +<body style="font-size:62.5%;"> + +<p>Click me to toggle 'selected' class.</p> +<p class="selected">Click me to toggle 'selected' class.</p> +<p>Click me to toggle '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> + + </dl> + </div> + <div class="option-description"> + <p>A CSS class to toggle on 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: 5231 bytes +Post-expand include size: 6831 bytes +Template argument size: 4329 bytes +Maximum: 2097152 bytes +--> + +<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2608-1!1!0!!en!2 and timestamp 20100519142041 --> Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggleClass.html ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggleClass.html ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/docs/toggleClass.html ------------------------------------------------------------------------------ svn:mime-type = text/html Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.bgiframe-2.1.1.js URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.bgiframe-2.1.1.js?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.bgiframe-2.1.1.js (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.bgiframe-2.1.1.js Mon Jun 21 17:45:18 2010 @@ -0,0 +1,10 @@ +/* Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net) + * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) + * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. + * + * $LastChangedDate: 2007-07-21 18:45:56 -0500 (Sat, 21 Jul 2007) $ + * $Rev$ + * + * Version 2.1.1 + */ +(function($){$.fn.bgIframe=$.fn.bgiframe=function(s){if($.browser.msie&&/6.0/.test(navigator.userAgent)){s=$.extend({top:'auto',left:'auto',width:'auto',height:'auto',opacity:true,src:'javascript:false;'},s||{});var prop=function(n){return n&&n.constructor==Number?n+'px':n;},html='<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+'style="display:block;position:absolute;z-index:-1;'+(s.opacity!==false?'filter:Alpha(Opacity=\'0\');':'')+'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+'"/>';return this.each(function(){if($('> iframe.bgiframe',this).length==0)this.insertB efore(document.createElement(html),this.firstChild);});}return this;};})(jQuery); \ No newline at end of file Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.bgiframe-2.1.1.js ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.bgiframe-2.1.1.js ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.bgiframe-2.1.1.js ------------------------------------------------------------------------------ svn:mime-type = text/plain Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.cookie.js URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.cookie.js?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.cookie.js (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.cookie.js Mon Jun 21 17:45:18 2010 @@ -0,0 +1,89 @@ +/*jslint browser: true */ /*global jQuery: true */ + +/** + * jQuery Cookie plugin + * + * Copyright (c) 2010 Klaus Hartl (stilbuero.de) + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + */ + +// TODO JsDoc + +/** + * Create a cookie with the given key and value and other optional parameters. + * + * @example $.cookie('the_cookie', 'the_value'); + * @desc Set the value of a cookie. + * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true }); + * @desc Create a cookie with all available options. + * @example $.cookie('the_cookie', 'the_value'); + * @desc Create a session cookie. + * @example $.cookie('the_cookie', null); + * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain + * used when the cookie was set. + * + * @param String key The key of the cookie. + * @param String value The value of the cookie. + * @param Object options An object literal containing key/value pairs to provide optional cookie attributes. + * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object. + * If a negative value is specified (e.g. a date in the past), the cookie will be deleted. + * If set to null or omitted, the cookie will be a session cookie and will not be retained + * when the the browser exits. + * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie). + * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie). + * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will + * require a secure protocol (like HTTPS). + * @type undefined + * + * @name $.cookie + * @cat Plugins/Cookie + * @author Klaus Hartl/[hidden email] + */ + +/** + * Get the value of a cookie with the given key. + * + * @example $.cookie('the_cookie'); + * @desc Get the value of a cookie. + * + * @param String key The key of the cookie. + * @return The value of the cookie. + * @type String + * + * @name $.cookie + * @cat Plugins/Cookie + * @author Klaus Hartl/[hidden email] + */ +jQuery.cookie = function (key, value, options) { + + // key and value given, set cookie... + if (arguments.length > 1 && (value === null || typeof value !== "object")) { + options = jQuery.extend({}, options); + + if (value === null) { + options.expires = -1; + } + + if (typeof options.expires === 'number') { + var days = options.expires, t = options.expires = new Date(); + t.setDate(t.getDate() + days); + } + + return (document.cookie = [ + encodeURIComponent(key), '=', + options.raw ? String(value) : encodeURIComponent(String(value)), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join('')); + } + + // key and possibly options given, get cookie... + options = value || {}; + var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; + return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; +}; Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.cookie.js ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.cookie.js ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.cookie.js ------------------------------------------------------------------------------ svn:mime-type = text/plain Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.metadata.js URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.metadata.js?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.metadata.js (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.metadata.js Mon Jun 21 17:45:18 2010 @@ -0,0 +1,122 @@ +/* + * Metadata - jQuery plugin for parsing metadata from elements + * + * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $ + * + */ + +/** + * Sets the type of metadata to use. Metadata is encoded in JSON, and each property + * in the JSON will become a property of the element itself. + * + * There are three supported types of metadata storage: + * + * attr: Inside an attribute. The name parameter indicates *which* attribute. + * + * class: Inside the class attribute, wrapped in curly braces: { } + * + * elem: Inside a child element (e.g. a script tag). The + * name parameter indicates *which* element. + * + * The metadata for an element is loaded the first time the element is accessed via jQuery. + * + * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements + * matched by expr, then redefine the metadata type and run another $(expr) for other elements. + * + * @name $.metadata.setType + * + * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p> + * @before $.metadata.setType("class") + * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" + * @desc Reads metadata from the class attribute + * + * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p> + * @before $.metadata.setType("attr", "data") + * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" + * @desc Reads metadata from a "data" attribute + * + * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p> + * @before $.metadata.setType("elem", "script") + * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" + * @desc Reads metadata from a nested script element + * + * @param String type The encoding type + * @param String name The name of the attribute to be used to get metadata (optional) + * @cat Plugins/Metadata + * @descr Sets the type of encoding to be used when loading metadata for the first time + * @type undefined + * @see metadata() + */ + +(function($) { + +$.extend({ + metadata : { + defaults : { + type: 'class', + name: 'metadata', + cre: /({.*})/, + single: 'metadata' + }, + setType: function( type, name ){ + this.defaults.type = type; + this.defaults.name = name; + }, + get: function( elem, opts ){ + var settings = $.extend({},this.defaults,opts); + // check for empty string in single property + if ( !settings.single.length ) settings.single = 'metadata'; + + var data = $.data(elem, settings.single); + // returned cached data if it already exists + if ( data ) return data; + + data = "{}"; + + if ( settings.type == "class" ) { + var m = settings.cre.exec( elem.className ); + if ( m ) + data = m[1]; + } else if ( settings.type == "elem" ) { + if( !elem.getElementsByTagName ) + return undefined; + var e = elem.getElementsByTagName(settings.name); + if ( e.length ) + data = $.trim(e[0].innerHTML); + } else if ( elem.getAttribute != undefined ) { + var attr = elem.getAttribute( settings.name ); + if ( attr ) + data = attr; + } + + if ( data.indexOf( '{' ) <0 ) + data = "{" + data + "}"; + + data = eval("(" + data + ")"); + + $.data( elem, settings.single, data ); + return data; + } + } +}); + +/** + * Returns the metadata object for the first member of the jQuery object. + * + * @name metadata + * @descr Returns element's metadata object + * @param Object opts An object contianing settings to override the defaults + * @type jQuery + * @cat Plugins/Metadata + */ +$.fn.metadata = function( opts ){ + return $.metadata.get( this[0], opts ); +}; + +})(jQuery); \ No newline at end of file Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.metadata.js ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.metadata.js ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/jquery.metadata.js ------------------------------------------------------------------------------ svn:mime-type = text/plain Added: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/qunit.css URL: http://svn.apache.org/viewvc/ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/qunit.css?rev=956651&view=auto ============================================================================== --- ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/qunit.css (added) +++ ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/qunit.css Mon Jun 21 17:45:18 2010 @@ -0,0 +1,119 @@ + +ol#qunit-tests { + font-family:"Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; + margin:0; + padding:0; + list-style-position:inside; + + font-size: smaller; +} +ol#qunit-tests li{ + padding:0.4em 0.5em 0.4em 2.5em; + border-bottom:1px solid #fff; + font-size:small; + list-style-position:inside; +} +ol#qunit-tests li ol{ + box-shadow: inset 0px 2px 13px #999; + -moz-box-shadow: inset 0px 2px 13px #999; + -webkit-box-shadow: inset 0px 2px 13px #999; + margin-top:0.5em; + margin-left:0; + padding:0.5em; + background-color:#fff; + border-radius:15px; + -moz-border-radius: 15px; + -webkit-border-radius: 15px; +} +ol#qunit-tests li li{ + border-bottom:none; + margin:0.5em; + background-color:#fff; + list-style-position: inside; + padding:0.4em 0.5em 0.4em 0.5em; +} + +ol#qunit-tests li li.pass{ + border-left:26px solid #C6E746; + background-color:#fff; + color:#5E740B; + } +ol#qunit-tests li li.fail{ + border-left:26px solid #EE5757; + background-color:#fff; + color:#710909; +} +ol#qunit-tests li.pass{ + background-color:#D2E0E6; + color:#528CE0; +} +ol#qunit-tests li.fail{ + background-color:#EE5757; + color:#000; +} +ol#qunit-tests li strong { + cursor:pointer; +} +h1#qunit-header{ + background-color:#0d3349; + margin:0; + padding:0.5em 0 0.5em 1em; + color:#fff; + font-family:"Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; + border-top-right-radius:15px; + border-top-left-radius:15px; + -moz-border-radius-topright:15px; + -moz-border-radius-topleft:15px; + -webkit-border-top-right-radius:15px; + -webkit-border-top-left-radius:15px; + text-shadow: rgba(0, 0, 0, 0.5) 4px 4px 1px; +} +h2#qunit-banner{ + font-family:"Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; + height:5px; + margin:0; + padding:0; +} +h2#qunit-banner.qunit-pass{ + background-color:#C6E746; +} +h2#qunit-banner.qunit-fail, #qunit-testrunner-toolbar { + background-color:#EE5757; +} +#qunit-testrunner-toolbar { + font-family:"Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; + padding:0; + /*width:80%;*/ + padding:0em 0 0.5em 2em; + font-size: small; +} +h2#qunit-userAgent { + font-family:"Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; + background-color:#2b81af; + margin:0; + padding:0; + color:#fff; + font-size: small; + padding:0.5em 0 0.5em 2.5em; + text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; +} +p#qunit-testresult{ + font-family:"Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; + margin:0; + font-size: small; + color:#2b81af; + border-bottom-right-radius:15px; + border-bottom-left-radius:15px; + -moz-border-radius-bottomright:15px; + -moz-border-radius-bottomleft:15px; + -webkit-border-bottom-right-radius:15px; + -webkit-border-bottom-left-radius:15px; + background-color:#D2E0E6; + padding:0.5em 0.5em 0.5em 2.5em; +} +strong b.fail{ + color:#710909; + } +strong b.pass{ + color:#5E740B; + } Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/qunit.css ------------------------------------------------------------------------------ svn:eol-style = native Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/qunit.css ------------------------------------------------------------------------------ svn:keywords = "Date Rev Author URL Id" Propchange: ofbiz/branches/jquery/framework/images/webapp/images/jquery/ui/development-bundle/external/qunit.css ------------------------------------------------------------------------------ svn:mime-type = text/css |
Free forum by Nabble | Edit this page |