diff options
Diffstat (limited to 'demos')
167 files changed, 731 insertions, 2542 deletions
diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html index c348dfbbf..f6439bb76 100644 --- a/demos/accordion/collapsible.html +++ b/demos/accordion/collapsible.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,8 +19,6 @@ </head> <body> -<div class="demo"> - <div id="accordion"> <h3>Section 1</h3> <div> @@ -45,13 +43,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html index 83f3060ef..11672bea1 100644 --- a/demos/accordion/custom-icons.html +++ b/demos/accordion/custom-icons.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -31,8 +31,6 @@ </head> <body> -<div class="demo"> - <div id="accordion"> <h3>Section 1</h3> <div> @@ -59,13 +57,8 @@ <button id="toggle">Toggle icons</button> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and active (open) state. Use any class from the UI CSS framework, or create custom classes with background images.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/accordion/default.html b/demos/accordion/default.html index a50270b27..005d43115 100644 --- a/demos/accordion/default.html +++ b/demos/accordion/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,8 +17,6 @@ </head> <body> -<div class="demo"> - <div id="accordion"> <h3>Section 1</h3> <div> @@ -68,8 +66,6 @@ </div> </div> -</div><!-- End demo --> - <div class="demo-description"> <p> Click headers to expand/collapse content that is broken into logical sections, much like tabs. @@ -79,7 +75,6 @@ Optionally, toggle sections open/closed on mouseover. The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/accordion/fillspace.html b/demos/accordion/fillspace.html index f2e936ec0..ced9ec64a 100644 --- a/demos/accordion/fillspace.html +++ b/demos/accordion/fillspace.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -11,6 +11,13 @@ <script src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.accordion.js"></script> <link rel="stylesheet" href="../demos.css"> + <style> + #accordion-resizer { + padding: 10px; + width: 350px; + height: 220px; + } + </style> <script> $(function() { $( "#accordion" ).accordion({ @@ -18,7 +25,7 @@ }); }); $(function() { - $( "#accordionResizer" ).resizable({ + $( "#accordion-resizer" ).resizable({ minHeight: 140, minWidth: 200, resize: function() { @@ -30,48 +37,36 @@ </head> <body> -<div class="demo"> - <h3 class="docs">Resize the outer container:</h3> - -<div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content"> -<div id="accordion"> - <h3>Section 1</h3> - <div> - <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> - </div> - <h3>Section 2</h3> - <div> - <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> - </div> - <h3>Section 3</h3> - <div> - <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> - <ul> - <li>List item one</li> - <li>List item two</li> - <li>List item three</li> - </ul> - </div> - <h3>Section 4</h3> - <div> - <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> +<div id="accordion-resizer" class="ui-widget-content"> + <div id="accordion"> + <h3>Section 1</h3> + <div> + <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> + </div> + <h3>Section 2</h3> + <div> + <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> + </div> + <h3>Section 3</h3> + <div> + <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> + <ul> + <li>List item one</li> + <li>List item two</li> + <li>List item three</li> + </ul> + </div> + <h3>Section 4</h3> + <div> + <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> + </div> </div> </div> -<span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span> -</div><!-- End accordionResizer --> - -<div style="margin-top:7px; padding:10px; width:350px; height:50px;" class="ui-widget-content">I'm another panel</div> - -</div><!-- End demo --> - - - <div class="demo-description"> <p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the <code>heightStyle</code> option to <code>"fill"</code>, and the script will automatically set the dimensions of the accordion to the height of its parent container.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/accordion/hoverintent.html b/demos/accordion/hoverintent.html index 706bbc128..3ee6a2b10 100644 --- a/demos/accordion/hoverintent.html +++ b/demos/accordion/hoverintent.html @@ -70,8 +70,6 @@ </head> <body> -<div class="demo"> - <div id="accordion"> <h3>Section 1</h3> <div> @@ -121,8 +119,6 @@ </div> </div> -</div><!-- End demo --> - <div class="demo-description"> <p> Click headers to expand/collapse content that is broken into logical sections, much like tabs. @@ -132,7 +128,6 @@ Optionally, toggle sections open/closed on mouseover. The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/accordion/index.html b/demos/accordion/index.html index 81ed971d8..92bd33d9b 100644 --- a/demos/accordion/index.html +++ b/demos/accordion/index.html @@ -1,24 +1,20 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="fillspace.html">Fill space</a></li> - <li><a href="no-auto-height.html">No auto height</a></li> - <li><a href="collapsible.html">Collapse content</a></li> - <li><a href="hoverintent.html">Open on hoverintent</a></li> - <li><a href="custom-icons.html">Customize icons</a></li> - <li><a href="sortable.html">Sortable</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="fillspace.html">Fill space</a></li> + <li><a href="no-auto-height.html">No auto height</a></li> + <li><a href="collapsible.html">Collapse content</a></li> + <li><a href="hoverintent.html">Open on hoverintent</a></li> + <li><a href="custom-icons.html">Customize icons</a></li> + <li><a href="sortable.html">Sortable</a></li> +</ul> </body> </html> diff --git a/demos/accordion/no-auto-height.html b/demos/accordion/no-auto-height.html index 1773f1bee..088b6e5d3 100644 --- a/demos/accordion/no-auto-height.html +++ b/demos/accordion/no-auto-height.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,8 +19,6 @@ </head> <body> -<div class="demo"> - <div id="accordion"> <h3>Section 1</h3> <div> @@ -45,13 +43,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Setting <code>heightStyle: "content"</code> allows the accordion panels to keep their native height.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/accordion/sortable.html b/demos/accordion/sortable.html index 415d7a818..122e47087 100644 --- a/demos/accordion/sortable.html +++ b/demos/accordion/sortable.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -35,8 +35,6 @@ </head> <body> -<div class="demo"> - <div id="accordion"> <div class="group"> <h3>Section 1</h3> @@ -69,13 +67,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Drag the header to re-order panels.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/addClass/default.html b/demos/addClass/default.html index 6d003d819..5d68e941c 100644 --- a/demos/addClass/default.html +++ b/demos/addClass/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -30,8 +30,6 @@ </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. @@ -40,13 +38,8 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/addClass/index.html b/demos/addClass/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/addClass/index.html +++ b/demos/addClass/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> diff --git a/demos/animate/default.html b/demos/animate/default.html index 41424a1b1..c0df42fde 100644 --- a/demos/animate/default.html +++ b/demos/animate/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -37,8 +37,6 @@ </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">Animate</h3> @@ -50,13 +48,8 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the button above to preview the effect.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/animate/index.html b/demos/animate/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/animate/index.html +++ b/demos/animate/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html index 5d973a190..1138a16ef 100644 --- a/demos/autocomplete/categories.html +++ b/demos/autocomplete/categories.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -29,7 +29,7 @@ ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } - that._renderItem( ul, item ); + that._renderItemData( ul, item ); }); } }); @@ -57,16 +57,11 @@ </head> <body> -<div class="demo"> - <label for="search">Search: </label> - <input id="search"> -</div><!-- End demo --> - - +<label for="search">Search: </label> +<input id="search"> <div class="demo-description"> <p>A categorized search result. Try typing "a" or "n".</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 40050c7b8..64d49bcc5 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -172,8 +172,6 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <label>Your preferred programming language: </label> <select id="combobox"> @@ -204,15 +202,10 @@ </div> <button id="toggle">Show underlying select</button> -</div><!-- End demo --> - - - <div class="demo-description"> <p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p> <p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p> <p>This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization. <a href="http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood">For a detailed explanation of how the widget works, check out this Learning jQuery article.</a></p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index cb89bd544..f73709b4c 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -77,20 +77,15 @@ </head> <body> -<div class="demo"> - <div id="project-label">Select a project (type "j" for a start):</div> - <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt=""> - <input id="project"> - <input type="hidden" id="project-id"> - <p id="project-description"></p> -</div><!-- End demo --> - - +<div id="project-label">Select a project (type "j" for a start):</div> +<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt=""> +<input id="project"> +<input type="hidden" id="project-id"> +<p id="project-description"></p> <div class="demo-description"> <p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p> <p>Try typing "j" to get a list of projects or just press the down arrow.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html index e9c38ff95..0f6744b33 100644 --- a/demos/autocomplete/default.html +++ b/demos/autocomplete/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -44,22 +44,15 @@ </script> </head> <body> - -<div class="demo"> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> <p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/folding.html b/demos/autocomplete/folding.html index e2c8938a2..2e54ad672 100644 --- a/demos/autocomplete/folding.html +++ b/demos/autocomplete/folding.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -41,8 +41,6 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <form> <label for="developer">Developer: </label> @@ -50,14 +48,9 @@ </form> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p> <p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index 77f801996..faa18d438 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -1,27 +1,25 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> - <div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="remote.html">Remote datasource</a></li> - <li><a href="remote-with-cache.html">Remote with caching</a></li> - <li><a href="remote-jsonp.html">Remote JSONP datasource</a></li> - <li><a href="maxheight.html">Scrollable results</a></li> - <li><a href="combobox.html">Combobox</a></li> - <li><a href="custom-data.html">Custom data and display</a></li> - <li><a href="xml.html">XML data parsed once</a></li> - <li><a href="categories.html">Categories</a></li> - <li><a href="folding.html">Accent folding</a></li> - <li><a href="multiple.html">Multiple values</a></li> - <li><a href="multiple-remote.html">Multiple, remote</a></li> - </ul> - </div> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="remote.html">Remote datasource</a></li> + <li><a href="remote-with-cache.html">Remote with caching</a></li> + <li><a href="remote-jsonp.html">Remote JSONP datasource</a></li> + <li><a href="maxheight.html">Scrollable results</a></li> + <li><a href="combobox.html">Combobox</a></li> + <li><a href="custom-data.html">Custom data and display</a></li> + <li><a href="xml.html">XML data parsed once</a></li> + <li><a href="categories.html">Categories</a></li> + <li><a href="folding.html">Accent folding</a></li> + <li><a href="multiple.html">Multiple values</a></li> + <li><a href="multiple-remote.html">Multiple, remote</a></li> +</ul> + </body> </html> diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html index bb27e2a0d..fbf886baa 100644 --- a/demos/autocomplete/maxheight.html +++ b/demos/autocomplete/maxheight.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -59,20 +59,13 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index d77315036..f33aba9a4 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -67,21 +67,14 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <label for="birds">Birds: </label> <input id="birds" size="50"> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p> <p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html index ff0aee0e8..54bc0eeec 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -80,21 +80,14 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <label for="tags">Tag programming languages: </label> <input id="tags" size="50"> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p> <p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index 7a9fa486a..f1a079a55 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -63,8 +63,6 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <label for="city">Your city: </label> <input id="city"> @@ -76,14 +74,9 @@ <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p> <p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index 79d4794ea..a2af90d67 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -42,21 +42,14 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <label for="birds">Birds: </label> <input id="birds"> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p> <p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 5086ad0b0..82bada235 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -37,8 +37,6 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <label for="birds">Birds: </label> <input id="birds"> @@ -49,14 +47,9 @@ <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p> <p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/autocomplete/xml.html b/demos/autocomplete/xml.html index 1fc0b8da3..61c5edb8d 100644 --- a/demos/autocomplete/xml.html +++ b/demos/autocomplete/xml.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -48,8 +48,6 @@ </head> <body> -<div class="demo"> - <div class="ui-widget"> <label for="birds">London matches: </label> <input id="birds" /> @@ -60,14 +58,9 @@ <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p> <p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html index 05aac0af8..be9650402 100644 --- a/demos/button/checkbox.html +++ b/demos/button/checkbox.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -21,8 +21,6 @@ </head> <body> -<div class="demo"> - <input type="checkbox" id="check" /><label for="check">Toggle</label> <div id="format"> @@ -31,14 +29,9 @@ <input type="checkbox" id="check3" /><label for="check3">U</label> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p> <p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/button/default.html b/demos/button/default.html index 00d7d6bd2..23cbef156 100644 --- a/demos/button/default.html +++ b/demos/button/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -11,28 +11,24 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - $( "input[type=submit], a, button", ".demo" ).button(); - $( "a", ".demo" ).click(function() { return false; }); + $( "input[type=submit], a, button" ) + .button() + .click(function( event ) { + event.preventDefault(); + }); }); </script> </head> <body> -<div class="demo"> - <button>A button element</button> <input type="submit" value="A submit button"> <a href="#">An anchor</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/button/icons.html b/demos/button/icons.html index 6d22af560..ee42063b3 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -12,45 +12,38 @@ <script> $(function() { $( ".demo button:first" ).button({ - icons: { - primary: "ui-icon-locked" - }, - text: false - }).next().button({ - icons: { - primary: "ui-icon-locked" - } - }).next().button({ - icons: { - primary: "ui-icon-gear", - secondary: "ui-icon-triangle-1-s" - } - }).next().button({ - icons: { - primary: "ui-icon-gear", - secondary: "ui-icon-triangle-1-s" - }, - text: false - }); + icons: { + primary: "ui-icon-locked" + }, + text: false + }).next().button({ + icons: { + primary: "ui-icon-locked" + } + }).next().button({ + icons: { + primary: "ui-icon-gear", + secondary: "ui-icon-triangle-1-s" + } + }).next().button({ + icons: { + primary: "ui-icon-gear", + secondary: "ui-icon-triangle-1-s" + }, + text: false + }); }); </script> </head> <body> -<div class="demo"> - <button>Button with icon only</button> <button>Button with icon on the left</button> <button>Button with two icons</button> <button>Button with two icons and no text</button> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Some buttons with various combinations of text and icons, here specified via metadata.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/button/index.html b/demos/button/index.html index 23977c820..79560595b 100644 --- a/demos/button/index.html +++ b/demos/button/index.html @@ -1,23 +1,19 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="radio.html">Radios</a></li> - <li><a href="checkbox.html">Checkboxes</a></li> - <li><a href="icons.html">Icons</a></li> - <li><a href="toolbar.html">Toolbar</a></li> - <li><a href="splitbutton.html">Split Button</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="radio.html">Radios</a></li> + <li><a href="checkbox.html">Checkboxes</a></li> + <li><a href="icons.html">Icons</a></li> + <li><a href="toolbar.html">Toolbar</a></li> + <li><a href="splitbutton.html">Split Button</a></li> +</ul> </body> </html> diff --git a/demos/button/radio.html b/demos/button/radio.html index 216da0935..b435cb130 100644 --- a/demos/button/radio.html +++ b/demos/button/radio.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,8 +17,6 @@ </head> <body> -<div class="demo"> - <form> <div id="radio"> <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> @@ -27,13 +25,8 @@ </div> </form> -</div><!-- End demo --> - - - <div class="demo-description"> <p>A set of three radio buttons transformed into a button set.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html index 177e7d02b..c5f663aae 100644 --- a/demos/button/splitbutton.html +++ b/demos/button/splitbutton.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -49,30 +49,21 @@ </head> <body> -<div class="demo"> - +<div> <div> - <div> - <button id="rerun">Run last action</button> - <button id="select">Select an action</button> - </div> - <ul> - <li><a href="#">Open...</a></li> - <li><a href="#">Save</a></li> - <li><a href="#">Delete</a></li> - </ul> + <button id="rerun">Run last action</button> + <button id="select">Select an action</button> </div> - -</div><!-- End demo --> - - + <ul> + <li><a href="#">Open...</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Delete</a></li> + </ul> +</div> <div class="demo-description"> - <p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon and no text. Both are grouped together in a set.</p> - -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html index c7066b21d..fcd05f505 100644 --- a/demos/button/toolbar.html +++ b/demos/button/toolbar.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -86,8 +86,6 @@ </head> <body> -<div class="demo"> - <span id="toolbar" class="ui-widget-header ui-corner-all"> <button id="beginning">go to beginning</button> <button id="rewind">rewind</button> @@ -95,9 +93,9 @@ <button id="stop">stop</button> <button id="forward">fast forward</button> <button id="end">go to end</button> - + <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label> - + <span id="repeat"> <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label> <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label> @@ -105,16 +103,11 @@ </span> </span> -</div><!-- End demo --> - - - <div class="demo-description"> <p> A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/alt-field.html b/demos/datepicker/alt-field.html index e2e254d19..9b55b9d58 100644 --- a/demos/datepicker/alt-field.html +++ b/demos/datepicker/alt-field.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,17 +20,10 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/animation.html b/demos/datepicker/animation.html index cf424bd1c..555d35347 100644 --- a/demos/datepicker/animation.html +++ b/demos/datepicker/animation.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -27,8 +27,6 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker" size="30"/></p> <p>Animations:<br /> @@ -46,13 +44,8 @@ </select> </p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/buttonbar.html b/demos/datepicker/buttonbar.html index 108ff22e7..a897110f6 100644 --- a/demos/datepicker/buttonbar.html +++ b/demos/datepicker/buttonbar.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,17 +19,10 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/date-formats.html b/demos/datepicker/date-formats.html index 8b5bb29a3..cb8ba5443 100644 --- a/demos/datepicker/date-formats.html +++ b/demos/datepicker/date-formats.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,8 +20,6 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker" size="30"/></p> <p>Format options:<br /> @@ -35,13 +33,8 @@ </select> </p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/date-range.html b/demos/datepicker/date-range.html index c881aba3d..70c2ddc93 100644 --- a/demos/datepicker/date-range.html +++ b/demos/datepicker/date-range.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -32,20 +32,13 @@ </head> <body> -<div class="demo"> - <label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Select the date range to search for.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/default.html b/demos/datepicker/default.html index 4159f4b89..903e1f869 100644 --- a/demos/datepicker/default.html +++ b/demos/datepicker/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,17 +17,10 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/dropdown-month-year.html b/demos/datepicker/dropdown-month-year.html index b30de9d75..151229470 100644 --- a/demos/datepicker/dropdown-month-year.html +++ b/demos/datepicker/dropdown-month-year.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,17 +20,10 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/icon-trigger.html b/demos/datepicker/icon-trigger.html index 2b13d6df9..cdd42a441 100644 --- a/demos/datepicker/icon-trigger.html +++ b/demos/datepicker/icon-trigger.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -21,17 +21,10 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/index.html b/demos/datepicker/index.html index ed2477402..eb903a220 100644 --- a/demos/datepicker/index.html +++ b/demos/datepicker/index.html @@ -1,31 +1,27 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="date-formats.html">Format date</a></li> - <li><a href="min-max.html">Restrict date range</a></li> - <li><a href="localization.html">Localize calendar</a></li> - <li><a href="alt-field.html">Populate alternate field</a></li> - <li><a href="inline.html">Display inline</a></li> - <li><a href="buttonbar.html">Display button bar</a></li> - <li><a href="dropdown-month-year.html">Display month & year menus</a></li> - <li><a href="other-months.html">Dates in other months</a></li> - <li><a href="show-week.html">Show week of the year</a></li> - <li><a href="multiple-calendars.html">Display multiple months</a></li> - <li><a href="icon-trigger.html">Icon trigger</a></li> - <li><a href="animation.html">Animations</a></li> - <li><a href="date-range.html">Date Range</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="date-formats.html">Format date</a></li> + <li><a href="min-max.html">Restrict date range</a></li> + <li><a href="localization.html">Localize calendar</a></li> + <li><a href="alt-field.html">Populate alternate field</a></li> + <li><a href="inline.html">Display inline</a></li> + <li><a href="buttonbar.html">Display button bar</a></li> + <li><a href="dropdown-month-year.html">Display month & year menus</a></li> + <li><a href="other-months.html">Dates in other months</a></li> + <li><a href="show-week.html">Show week of the year</a></li> + <li><a href="multiple-calendars.html">Display multiple months</a></li> + <li><a href="icon-trigger.html">Icon trigger</a></li> + <li><a href="animation.html">Animations</a></li> + <li><a href="date-range.html">Date Range</a></li> +</ul> </body> </html> diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html index 552c1d95e..c4277a374 100644 --- a/demos/datepicker/inline.html +++ b/demos/datepicker/inline.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,17 +17,10 @@ </head> <body> -<div class="demo"> - Date: <div id="datepicker"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/localization.html b/demos/datepicker/localization.html index 429c527e1..8e0ad98ea 100644 --- a/demos/datepicker/localization.html +++ b/demos/datepicker/localization.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -90,8 +90,6 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"/> <select id="locale"> <option value="af">Afrikaans</option> @@ -164,13 +162,8 @@ <option value="cy-GB">Welsh/UK (Cymraeg)</option> </select></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/min-max.html b/demos/datepicker/min-max.html index 5da862c45..38038a9a0 100644 --- a/demos/datepicker/min-max.html +++ b/demos/datepicker/min-max.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,17 +17,10 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/multiple-calendars.html b/demos/datepicker/multiple-calendars.html index 9ff002073..b1dd40905 100644 --- a/demos/datepicker/multiple-calendars.html +++ b/demos/datepicker/multiple-calendars.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,17 +20,10 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/other-months.html b/demos/datepicker/other-months.html index 14f6c10f2..339b8373d 100644 --- a/demos/datepicker/other-months.html +++ b/demos/datepicker/other-months.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,18 +20,11 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The datepicker can show dates that come from other than the main month being displayed. These other dates can also be made selectable.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/datepicker/show-week.html b/demos/datepicker/show-week.html index 8e5da044b..008943d31 100644 --- a/demos/datepicker/show-week.html +++ b/demos/datepicker/show-week.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -20,20 +20,13 @@ </head> <body> -<div class="demo"> - <p>Date: <input type="text" id="datepicker"></p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The datepicker can show the week of the year. The default calculation follows the ISO 8601 definition: the week starts on Monday, the first week of the year contains the first Thursday of the year. This means that some days from one year may be placed into weeks 'belonging' to another year.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/demos.css b/demos/demos.css index 807d025b5..da9ad833a 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -1,335 +1,19 @@ body { font-size: 62.5%; + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; } table { font-size: 1em; } -/* Site - -------------------------------- */ - -body { - font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; -} - -/* Layout - -------------------------------- */ - -.layout-grid { - width: 960px; - border-spacing: 0; - border-collapse: collapse; -} - -.layout-grid td { - vertical-align: top; -} - -.layout-grid td.left-nav { - width: 140px; -} - -.layout-grid td.normal { - border-left: 1px solid #eee; - padding: 20px 24px; - font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; -} - -.layout-grid td.demos { - background: url('/images/demos_bg.jpg') no-repeat; - height: 337px; - overflow: hidden; -} - -/* Normal - -------------------------------- */ - -.normal h3, -.normal h4 { - margin: 0; - font-weight: normal; -} - -.normal h3 { - padding: 0 0 9px; - font-size: 1.8em; -} - -.normal h4 { - padding-bottom: 21px; - border-bottom: 1px dashed #999; - font-size: 1.2em; - font-weight: bold; -} - -.normal p { - font-size: 1.2em; -} - -/* Demos */ - -.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li { - margin: 0; - padding: 0 -} - -.demos-nav { - float: left; - width: 170px; - font-size: 1.3em; -} - -.demos-nav dt, -.demos-nav h4 { - margin: 0; - padding: 0; - font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; - color: #e87b10; -} - -.demos-nav dt, -.demos-nav h4 { - margin-top: 1.5em; - margin-bottom: 0; - padding-left: 8px; - padding-bottom:5px; - line-height: 1.2em; - border-bottom: 1px solid #F4F4F4; -} - -.demos-nav dd a, -.demos-nav li a { - border-bottom: 1px solid #F4F4F4; - display:block; - padding: 4px 3px 4px 8px; - font-size: 90%; - text-decoration: none; - color: #555 ; - margin:2px 0; - height:13px; -} - -.demos-nav dd a:hover, -.demos-nav dd a:focus, -.demos-nav dd a:hover, -.demos-nav dd a:focus { - background: #f3f3f3; - color:#000; - -moz-border-radius: 5px; -webkit-border-radius: 5px; -} - .demos-nav dd a.selected { - background: #555; - color:#ffffff; - -moz-border-radius: 5px; -webkit-border-radius: 5px; -} - - -/* new styles for demo pages, added by Filament 12.29.08 -eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts -*/ - -.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; } -.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; } -#demo-notes a, #demo-link a, #demo-source a { color:#1b75bb; text-decoration:none; } -.normal a:hover, -.normal a:active { color:#0b559b; } - -#demo-config { padding:20px 0 0; } - -#demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; overflow: auto; position: relative; } -#demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; } - -#demo-config-menu { float:right; width:180px; } -#demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; } - -#demo-config-menu ul { list-style: none; padding: 0; margin: 0; } - -#demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; } - -#demo-config-menu li a:link, -#demo-config-menu li a:visited { display:block; padding:1px 8px 4px; border-bottom:1px dotted #b3b3b3; } -* html #demo-config-menu li a:link, -* html #demo-config-menu li a:visited { padding:1px 8px 2px; } -#demo-config-menu li a:hover, -#demo-config-menu li a:active { background-color:#f6f6f6; } - -#demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; } - -#demo-config-menu li.demo-config-on a:link, -#demo-config-menu li.demo-config-on a:visited, -#demo-config-menu li.demo-config-on a:hover, -#demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; margin-top: 0px; margin-bottom: 0px; } - -#demo-source, #demo-notes { +.demo-description { clear: both; - padding: 20px 0 0; - font-size: 1.3em; -} - -#demo-notes { width:520px; color:#333; font-size: 1em; } -#demo-notes p code, .demo-description p code { padding: 0; font-weight: bold; } -#demo-source pre, #demo-source code { padding: 0; } -code, pre { padding:8px 0 8px 20px ; font-size: 1.2em; line-height:130%; } - -#demo-source a:link, -#demo-source a:visited, -#demo-source a:hover, -#demo-source a:active { font-size:12px; padding-left:13px; background-position: left center; background-repeat: no-repeat; } - -#demo-source a.source-open:link, -#demo-source a.source-open:visited, -#demo-source a.source-open:hover, -#demo-source a.source-open:active { background-image: url(images/demo-spindown-open.gif); } - -#demo-source a.source-closed:link, -#demo-source a.source-closed:visited, -#demo-source a.source-closed:hover, -#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); } - -div.demo { - padding:12px; - font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; -} - -div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; } - -div.demo-description { - clear:both; - padding:12px; - font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; + padding: 12px; font-size: 1.3em; line-height: 1.4em; } .ui-draggable, .ui-droppable { - background-position: top left; + background-position: top; } - -.left-nav .demos-nav { - padding-right: 10px; -} - -#demo-link { font-size:11px; padding-top: 6px; clear: both; overflow: hidden; } -#demo-link a span.ui-icon { float:left; margin-right:3px; } - -/* Component containers -----------------------------------*/ -#widget-docs .ui-widget { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } -#widget-docs .ui-widget input, #widget-docs .ui-widget select, #widget-docs .ui-widget textarea, #widget-docs .ui-widget button { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } -#widget-docs .ui-widget-header { border: 1px solid #ffffff; background: #464646 url(images/464646_40x100_textures_01_flat_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; } -#widget-docs .ui-widget-header a { color: #ffffff; } -#widget-docs .ui-widget-content { border: 1px solid #ffffff; background: #ffffff url(images/ffffff_40x100_textures_01_flat_75.png) 50% 50% repeat-x; color: #222222; } -#widget-docs .ui-widget-content a { color: #222222; } - -/* Interaction states -----------------------------------*/ -#widget-docs .ui-state-default, #widget-docs .ui-widget-content #widget-docs .ui-state-default { border: 1px solid #666666; background: #555555 url(images/555555_40x100_textures_03_highlight_soft_75.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; } -#widget-docs .ui-state-default a { color: #ffffff; text-decoration: none; outline: none; } -#widget-docs .ui-state-hover, #widget-docs .ui-widget-content #widget-docs .ui-state-hover, #widget-docs .ui-state-focus, #widget-docs .ui-widget-content #widget-docs .ui-state-focus { border: 1px solid #666666; background: #444444 url(images/444444_40x100_textures_03_highlight_soft_60.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; } -#widget-docs .ui-state-hover a { color: #ffffff; text-decoration: none; outline: none; } -#widget-docs .ui-state-active, #widget-docs .ui-widget-content #widget-docs .ui-state-active { border: 1px solid #666666; background: #ffffff url(images/ffffff_40x100_textures_01_flat_65.png) 50% 50% repeat-x; font-weight: normal; color: #F6921E; outline: none; } -#widget-docs .ui-state-active a { color: #F6921E; outline: none; text-decoration: none; } - -/* Interaction Cues -----------------------------------*/ -#widget-docs .ui-state-highlight, #widget-docs .ui-widget-content #widget-docs .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/fbf9ee_40x100_textures_02_glass_55.png) 50% 50% repeat-x; color: #363636; } -#widget-docs .ui-state-error, #widget-docs .ui-widget-content #widget-docs .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/fef1ec_40x100_textures_05_inset_soft_95.png) 50% bottom repeat-x; color: #cd0a0a; } -#widget-docs .ui-state-error-text, #widget-docs .ui-widget-content #widget-docs .ui-state-error-text { color: #cd0a0a; } -#widget-docs .ui-state-disabled, #widget-docs .ui-widget-content #widget-docs .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } -#widget-docs .ui-priority-primary, #widget-docs .ui-widget-content #widget-docs .ui-priority-primary { font-weight: bold; } -#widget-docs .ui-priority-secondary, #widget-docs .ui-widget-content #widget-docs .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } - -/* Icons -----------------------------------*/ - -/* states and images */ -#demo-frame-wrapper .ui-icon, #widget-docs .ui-icon { width: 16px; height: 16px; background-image: url(images/222222_256x240_icons_icons.png); } -#widget-docs .ui-widget-content .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); } -#widget-docs .ui-widget-header .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); } -#widget-docs .ui-state-default .ui-icon { background-image: url(images/888888_256x240_icons_icons.png); } -#widget-docs .ui-state-hover .ui-icon, #widget-docs .ui-state-focus .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); } -#widget-docs .ui-state-active .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); } -#widget-docs .ui-state-highlight .ui-icon {background-image: url(images/2e83ff_256x240_icons_icons.png); } -#widget-docs .ui-state-error .ui-icon, #widget-docs .ui-state-error-text .ui-icon {background-image: url(images/cd0a0a_256x240_icons_icons.png); } - - -/* Misc visuals -----------------------------------*/ - -/* Corner radius */ -#widget-docs .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; } -#widget-docs .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } -#widget-docs .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } -#widget-docs .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } -#widget-docs .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } -#widget-docs .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } -#widget-docs .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } -#widget-docs .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } -#widget-docs .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; } - -/* Overlays */ -#widget-docs .ui-widget-overlay { background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); } -#widget-docs .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; } - -/* -----------------------------------*/ - -#widget-docs { margin:20px 0 0; border: none; } - -#widget-docs h2, #widget-docs h3, #widget-docs h4, #widget-docs p, #widget-docs ul, #widget-docs code { margin:0; padding:0; } -#widget-docs code { display:block; color:#444; font-size:.9em; margin:0 0 1em; } -#widget-docs code strong { color:#000; } -#widget-docs p { margin:0 3em 1.2em 0; } -#widget-docs p.intro { font-size:13px; color:#666; line-height:1.3; } -#widget-docs ul { list-style-type: none; } - -#widget-docs h2 { font-size:16px; margin:1.2em 0 .5em; } -#widget-docs h3 { font-size:14px; color:#e6820E; margin:1.5em 0 .5em; } -.normal #widget-docs h4 { font-size:12px; color:#000; border:0; margin:0 0 .5em; } - -#docs-overview-main { width:400px; } -#docs-overview-sidebar { float:right; width:200px; } -#docs-overview-sidebar a span { color:#666; } -#widget-docs #docs-overview-main p { margin-right:0; } -#widget-docs #docs-overview-sidebar h4 { padding-left:0; } - -.docs-list-header { float:left; width:100%; margin:10px 0 0; border-bottom:1px solid #eee; } -#widget-docs .docs-list-header h2 { float:left; margin:0; } -#widget-docs .docs-list-header p { float:right; margin:5px 0; font-size:11px; } - -.docs-list { float:left; width:100%; padding:0 0 10px; } -.docs-list .param-header { float:left; clear:left; width:100%; padding:8px 0; border-top:1px solid #eee; } -#widget-docs .param-header h3, #widget-docs .param-header p { margin:0; float:left; } -#widget-docs .param-header h3 { width:50%; } -#widget-docs .param-header h3 span { background: url(images/demo-spindown-closed.gif) no-repeat left; padding-left:13px; } -#widget-docs .param-open .param-header h3 span { background: url(images/demo-spindown-open.gif) no-repeat left; } -#widget-docs .param-header p { width:24%; } -#widget-docs .param-header p.param-type span { background: url(images/icon-docs-info.gif) no-repeat left; cursor:pointer; border-bottom:1px dashed #ccc; padding-left:15px; } - -.param-details { padding-left:13px; } -.param-args { margin:0 0 1.5em; border-top:1px dotted #ccc;} -.param-args td { padding:3px 30px 3px 5px; border-bottom:1px dotted #ccc; } - - -/* overrides for ui-tab styles */ -#widget-docs ul.ui-tabs-nav { padding:0 0 0 8px; } -#widget-docs .ui-tabs-nav li { margin:5px 5px 0 0; } - -#widget-docs .ui-tabs-nav li a:link, -#widget-docs .ui-tabs-nav li a:visited, -#widget-docs .ui-tabs-nav li a:hover, -#widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; } - -#widget-docs .ui-tabs-nav li.ui-tabs-active a:link, -#widget-docs .ui-tabs-nav li.ui-tabs-active a:visited, -#widget-docs .ui-tabs-nav li.ui-tabs-active a:hover, -#widget-docs .ui-tabs-nav li.ui-tabs-active a:active { color:#e6820E; } - -#widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; } - -#widget-docs .ui-widget-content a:link, -#widget-docs .ui-widget-content a:visited { color:#1b75bb; text-decoration:none; } -#widget-docs .ui-widget-content a:hover, -#widget-docs .ui-widget-content a:active { color:#0b559b; } - diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html index a4b85bbc5..69976261a 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -36,21 +36,14 @@ </head> <body> -<div class="demo"> - <div id="dialog" title="Basic dialog"> <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> <button id="opener">Open Dialog</button> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 1f321790d..37c72540c 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -22,33 +22,12 @@ </head> <body> -<div class="demo"> - <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> -<!-- Sample page content to illustrate the layering of the dialog --> -<div class="hiddenInViewSource" style="padding:20px;"> -<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> -<form> - <input value="text input" /><br /> - <input type="checkbox" />checkbox<br /> - <input type="radio" />radio<br /> - <select> - <option>select</option> - </select><br /><br /> - <textarea>textarea</textarea><br /> -</form> -</div><!-- End sample page content --> - -</div><!-- End demo --> - - - <div class="demo-description"> <p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/dialog/index.html b/demos/dialog/index.html index 460e4fb36..6aaa3ecb5 100644 --- a/demos/dialog/index.html +++ b/demos/dialog/index.html @@ -1,23 +1,19 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="animated.html">Animated dialog</a></li> - <li><a href="modal.html">Modal dialog</a></li> - <li><a href="modal-message.html">Modal message</a></li> - <li><a href="modal-confirmation.html">Modal confirmation</a></li> - <li><a href="modal-form.html">Modal form</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="animated.html">Animated dialog</a></li> + <li><a href="modal.html">Modal dialog</a></li> + <li><a href="modal-message.html">Modal message</a></li> + <li><a href="modal-confirmation.html">Modal confirmation</a></li> + <li><a href="modal-form.html">Modal form</a></li> +</ul> </body> </html> diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html index 6bdb9ba89..ff18620b0 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -16,9 +16,6 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $( "#dialog-confirm" ).dialog({ resizable: false, height:140, @@ -37,33 +34,14 @@ </head> <body> -<div class="demo"> - <div id="dialog-confirm" title="Empty the recycle bin?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> </div> -<!-- Sample page content to illustrate the layering of the dialog --> -<div class="hiddenInViewSource" style="padding:20px;"> - <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> - <form> - <input value="text input" /><br /> - <input type="checkbox" />checkbox<br /> - <input type="radio" />radio<br /> - <select> - <option>select</option> - </select><br /><br /> - <textarea>textarea</textarea><br /> - </form> -</div><!-- End sample page content --> - -</div><!-- End demo --> - - +<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> <div class="demo-description"> <p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html index d1b7ccfa6..4cfdd6fe0 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -30,9 +30,6 @@ </style> <script> $(function() { - // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $( "#dialog:ui-dialog" ).dialog( "destroy" ); - var name = $( "#name" ), email = $( "#email" ), password = $( "#password" ), @@ -68,7 +65,7 @@ return true; } } - + $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, @@ -116,8 +113,6 @@ </head> <body> -<div class="demo"> - <div id="dialog-form" title="Create new user"> <p class="validateTips">All form fields are required.</p> @@ -155,13 +150,8 @@ </div> <button id="create-user">Create new user</button> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html index 9de7d3881..8e69db8e8 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -17,9 +17,6 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $( "#dialog-message" ).dialog({ modal: true, buttons: { @@ -33,8 +30,6 @@ </head> <body> -<div class="demo"> - <div id="dialog-message" title="Download complete"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> @@ -45,27 +40,10 @@ </p> </div> -<!-- Sample page content to illustrate the layering of the dialog --> -<div class="hiddenInViewSource" style="padding:20px;"> - <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> - <form> - <input value="text input" /><br /> - <input type="checkbox" />checkbox<br /> - <input type="radio" />radio<br /> - <select> - <option>select</option> - </select><br /><br /> - <textarea>textarea</textarea><br /> - </form> -</div><!-- End sample page content --> - -</div><!-- End demo --> - - +<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> <div class="demo-description"> <p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index 2ea65c1f7..b4de8e9b9 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -16,9 +16,6 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $( "#dialog-modal" ).dialog({ height: 140, modal: true @@ -28,33 +25,14 @@ </head> <body> -<div class="demo"> - <div id="dialog-modal" title="Basic modal dialog"> <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p> </div> -<!-- Sample page content to illustrate the layering of the dialog --> -<div class="hiddenInViewSource" style="padding:20px;"> - <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> - <form> - <input value="text input" /><br /> - <input type="checkbox" />checkbox<br /> - <input type="radio" />radio<br /> - <select> - <option>select</option> - </select><br /><br /> - <textarea>textarea</textarea><br /> - </form> -</div><!-- End sample page content --> - -</div><!-- End demo --> - - +<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> <div class="demo-description"> <p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/constrain-movement.html b/demos/draggable/constrain-movement.html index 4e7c9f685..aa1d97508 100644 --- a/demos/draggable/constrain-movement.html +++ b/demos/draggable/constrain-movement.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -16,6 +16,7 @@ #draggable { cursor: n-resize; } #draggable2 { cursor: e-resize; } #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; } + h3 { clear: left; } </style> <script> $(function() { @@ -23,17 +24,14 @@ $( "#draggable2" ).draggable({ axis: "x" }); $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false }); - $( "#draggable4" ).draggable({ containment: "#demo-frame" }); $( "#draggable5" ).draggable({ containment: "parent" }); }); </script> </head> <body> -<div class="demo"> +<h3>Constrain movement along an axis:</h3> -<h3 class="docs">Constrain movement along an axis:</h3> - <div id="draggable" class="draggable ui-widget-content"> <p>I can be dragged only vertically</p> </div> @@ -42,28 +40,19 @@ <p>I can be dragged only horizontally</p> </div> -<h3 class="docs">Or to within another DOM element:</h3> +<h3>Or to within another DOM element:</h3> <div id="containment-wrapper"> -<div id="draggable3" class="draggable ui-widget-content"> - <p>I'm contained within the box</p> -</div> - -<div id="draggable4" class="draggable ui-widget-content"> - <p>I'm contained within the box's parent</p> -</div> + <div id="draggable3" class="draggable ui-widget-content"> + <p>I'm contained within the box</p> + </div> -<div class="draggable ui-widget-content"> - <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p> + <div class="draggable ui-widget-content"> + <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p> + </div> </div> -</div> - -</div><!-- End demo --> - - <div class="demo-description"> <p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/cursor-style.html b/demos/draggable/cursor-style.html index 6dd31b51f..256071af8 100644 --- a/demos/draggable/cursor-style.html +++ b/demos/draggable/cursor-style.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -23,8 +23,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>I will always stick to the center (relative to the mouse)</p> </div> @@ -37,13 +35,8 @@ <p>My cursor position is only controlled for the 'bottom' value</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/default.html b/demos/draggable/default.html index 52d68d150..dc2a3d461 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -21,19 +21,12 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/delay-start.html b/demos/draggable/delay-start.html index 63c997778..78dcdca13 100644 --- a/demos/draggable/delay-start.html +++ b/demos/draggable/delay-start.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -23,8 +23,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>Only if you drag me by 20 pixels, the dragging will start</p> </div> @@ -33,13 +31,8 @@ <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/events.html b/demos/draggable/events.html index efb659d25..95ae1adca 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -52,8 +52,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget ui-widget-content"> <p>Drag me to trigger the chain of events.</p> @@ -65,13 +63,8 @@ </ul> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html index 8a2bfa008..4aed5827a 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -24,8 +24,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p class="ui-widget-header">I can be dragged only by this handle</p> </div> @@ -35,16 +33,9 @@ <p class="ui-widget-header">…but you can't drag me by this handle.</p> </div> -<!-- ADD CANCEL DEMO --> - -</div><!-- End demo --> - - - <div class="demo-description"> <p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p> <p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/index.html b/demos/draggable/index.html index 0beda8e72..93850684d 100644 --- a/demos/draggable/index.html +++ b/demos/draggable/index.html @@ -1,28 +1,24 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="events.html">Events</a></li> - <li><a href="constrain-movement.html">Constrain movement</a></li> - <li><a href="delay-start.html">Delay start</a></li> - <li><a href="snap-to.html">Snap to element or grid</a></li> - <li><a href="scroll.html">Auto-scroll</a></li> - <li><a href="revert.html">Revert position</a></li> - <li><a href="visual-feedback.html">Visual feedback</a></li> - <li><a href="handle.html">Drag handle</a></li> - <li><a href="cursor-style.html">Cursor style</a></li> - <li><a href="sortable.html">Draggable + Sortable</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="events.html">Events</a></li> + <li><a href="constrain-movement.html">Constrain movement</a></li> + <li><a href="delay-start.html">Delay start</a></li> + <li><a href="snap-to.html">Snap to element or grid</a></li> + <li><a href="scroll.html">Auto-scroll</a></li> + <li><a href="revert.html">Revert position</a></li> + <li><a href="visual-feedback.html">Visual feedback</a></li> + <li><a href="handle.html">Drag handle</a></li> + <li><a href="cursor-style.html">Cursor style</a></li> + <li><a href="sortable.html">Draggable + Sortable</a></li> +</ul> </body> </html> diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html index 6e656a2b0..b18190d84 100644 --- a/demos/draggable/revert.html +++ b/demos/draggable/revert.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -22,8 +22,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>Revert the original</p> </div> @@ -32,13 +30,8 @@ <p>Revert the helper</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html index 611845631..8be467f49 100644 --- a/demos/draggable/scroll.html +++ b/demos/draggable/scroll.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -23,8 +23,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>Scroll set to true, default settings</p> </div> @@ -39,13 +37,8 @@ <div style='height: 5000px; width: 1px;'></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html index fed879f82..a399db5d6 100644 --- a/demos/draggable/snap-to.html +++ b/demos/draggable/snap-to.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -27,8 +27,6 @@ </head> <body> -<div class="demo"> - <div id="snaptarget" class="ui-widget-header"> <p>I'm a snap target</p> </div> @@ -55,14 +53,9 @@ <p>I snap to a 80 x 80 grid</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p> <p>Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html index c8f2d545d..0bf674ff3 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -12,8 +12,8 @@ <script src="../../ui/jquery.ui.sortable.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } - .demo li { margin: 5px; padding: 5px; width: 150px; } + ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } + li { margin: 5px; padding: 5px; width: 150px; } </style> <script> $(function() { @@ -31,8 +31,6 @@ </head> <body> -<div class="demo"> - <ul> <li id="draggable" class="ui-state-highlight">Drag me down</li> </ul> @@ -45,13 +43,8 @@ <li class="ui-state-default">Item 5</li> </ul> -</div><!-- End demo --> - - - <div class="demo-description"> -<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p> -</div><!-- End demo-description --> - +<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p> +</div> </body> </html> diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html index fe1c8aaec..b7e59b309 100644 --- a/demos/draggable/visual-feedback.html +++ b/demos/draggable/visual-feedback.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -33,8 +33,6 @@ </head> <body> -<div class="demo"> - <h3 class="docs">With helpers:</h3> <div id="draggable" class="ui-widget-content"> @@ -64,14 +62,9 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p> <p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html index 537eaf54a..5a2820fc8 100644 --- a/demos/droppable/accepted-elements.html +++ b/demos/droppable/accepted-elements.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -34,8 +34,6 @@ </head> <body> -<div class="demo"> - <div id="draggable-nonvalid" class="ui-widget-content"> <p>I'm draggable but can't be dropped</p> </div> @@ -48,13 +46,8 @@ <p>accept: '#draggable'</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/default.html b/demos/droppable/default.html index b3c28ff5f..6dbc8d08f 100644 --- a/demos/droppable/default.html +++ b/demos/droppable/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -31,8 +31,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> @@ -41,13 +39,8 @@ <p>Drop here</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Enable any DOM element to be droppable, a target for draggable elements.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/index.html b/demos/droppable/index.html index 13ae9855e..deca6e4bc 100644 --- a/demos/droppable/index.html +++ b/demos/droppable/index.html @@ -1,24 +1,20 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="accepted-elements.html">Accepted elements</a></li> - <li><a href="propagation.html">Prevent propagation</a></li> - <li><a href="visual-feedback.html">Visual feedback</a></li> - <li><a href="revert.html">Revert draggable position</a></li> - <li><a href="shopping-cart.html">Shopping Cart</a></li> - <li><a href="photo-manager.html">Simple photo manager</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="accepted-elements.html">Accepted elements</a></li> + <li><a href="propagation.html">Prevent propagation</a></li> + <li><a href="visual-feedback.html">Visual feedback</a></li> + <li><a href="revert.html">Revert draggable position</a></li> + <li><a href="shopping-cart.html">Shopping Cart</a></li> + <li><a href="photo-manager.html">Simple photo manager</a></li> +</ul> </body> </html> diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html index 638a35caf..d71d303b4 100644 --- a/demos/droppable/photo-manager.html +++ b/demos/droppable/photo-manager.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -38,7 +38,7 @@ $( "li", $gallery ).draggable({ cancel: "a.ui-icon", // clicking an icon won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position - containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present + containment: "document", helper: "clone", cursor: "move" }); @@ -138,7 +138,7 @@ </head> <body> -<div class="demo ui-widget ui-helper-clearfix"> +<div class="ui-widget ui-helper-clearfix"> <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> <li class="ui-widget-content ui-corner-tr"> @@ -171,14 +171,12 @@ <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> </div> -</div><!-- End demo --> - +</div> <div class="demo-description"> <p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p> <p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p> <p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html index 6cdbf3cc1..0ee5ce85b 100644 --- a/demos/droppable/propagation.html +++ b/demos/droppable/propagation.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -48,8 +48,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> @@ -68,13 +66,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html index 897a3bf84..e3b94bce1 100644 --- a/demos/droppable/revert.html +++ b/demos/droppable/revert.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -35,8 +35,6 @@ </head> <body> -<div class="demo"> - <div id="draggable" class="ui-widget-content"> <p>I revert when I'm dropped</p> </div> @@ -49,13 +47,8 @@ <p>Drop me here</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html index f93d8b41a..52d079749 100644 --- a/demos/droppable/shopping-cart.html +++ b/demos/droppable/shopping-cart.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -48,8 +48,6 @@ </head> <body> -<div class="demo"> - <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog"> @@ -89,13 +87,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html index fef2a2743..c97d056e8 100644 --- a/demos/droppable/visual-feedback.html +++ b/demos/droppable/visual-feedback.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -14,6 +14,7 @@ <style> #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } + h3 { clear: left; } </style> <script> $(function() { @@ -44,10 +45,8 @@ </head> <body> -<div class="demo"> +<h3>Feedback on hover:</h3> -<h3 class="docs">Feedback on hover:</h3> - <div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> @@ -56,7 +55,7 @@ <p>Drop here</p> </div> -<h3 class="docs">Feedback on activating draggable:</h3> +<h3>Feedback on activating draggable:</h3> <div id="draggable2" class="ui-widget-content"> <p>Drag me to my target</p> @@ -66,13 +65,8 @@ <p>Drop here</p> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/effect/default.html b/demos/effect/default.html index b477983e6..ffb313073 100644 --- a/demos/effect/default.html +++ b/demos/effect/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -25,15 +25,15 @@ #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } - .ui-effects-transfer { border: 2px dotted gray; } + .ui-effects-transfer { border: 2px dotted gray; } </style> <script> $(function() { // run the currently selected effect function runEffect() { - // get effect type from + // get effect type from var selectedEffect = $( "#effectTypes" ).val(); - + // most effect types need no options passed by default var options = {}; // some effects have required parameters @@ -66,8 +66,6 @@ </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">Effect</h3> @@ -97,13 +95,8 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the button above to show the effect.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/effect/easing.html b/demos/effect/easing.html index 3f4de2088..06691b1c8 100644 --- a/demos/effect/easing.html +++ b/demos/effect/easing.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -93,17 +93,10 @@ </head> <body> -<div class="demo"> - <div id="graphs"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/effect/index.html b/demos/effect/index.html index 65aa3993a..5da6bc612 100644 --- a/demos/effect/index.html +++ b/demos/effect/index.html @@ -1,19 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Effect showcase</a></li> - <li><a href="easing.html">Easing showcase</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Effect showcase</a></li> + <li><a href="easing.html">Easing showcase</a></li> +</ul> </body> </html> diff --git a/demos/hide/default.html b/demos/hide/default.html index 36cbb0a7b..5ea970fd3 100644 --- a/demos/hide/default.html +++ b/demos/hide/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -61,8 +61,6 @@ </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">Hide</h3> @@ -90,13 +88,8 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the button above to preview the effect.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/hide/index.html b/demos/hide/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/hide/index.html +++ b/demos/hide/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> diff --git a/demos/index.html b/demos/index.html index c23c7e0f6..4739d76cd 100644 --- a/demos/index.html +++ b/demos/index.html @@ -1,337 +1,40 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Demos</title> - <link rel="stylesheet" href="../themes/base/jquery.ui.all.css"> - <link rel="stylesheet" href="demos.css"> - <script src="../jquery-1.8.0.js"></script> - <script src="../external/jquery.bgiframe-2.1.2.js"></script> - <script src="../external/globalize.js"></script> - <script src="../external/globalize.culture.de-DE.js"></script> - <script src="../ui/jquery.ui.core.js"></script> - <script src="../ui/jquery.ui.widget.js"></script> - <script src="../ui/jquery.ui.mouse.js"></script> - <script src="../ui/jquery.ui.accordion.js"></script> - <script src="../ui/jquery.ui.autocomplete.js"></script> - <script src="../ui/jquery.ui.button.js"></script> - <script src="../ui/jquery.ui.datepicker.js"></script> - <script src="../ui/jquery.ui.dialog.js"></script> - <script src="../ui/jquery.ui.draggable.js"></script> - <script src="../ui/jquery.ui.droppable.js"></script> - <script src="../ui/jquery.ui.menu.js"></script> - <script src="../ui/jquery.ui.position.js"></script> - <script src="../ui/jquery.ui.progressbar.js"></script> - <script src="../ui/jquery.ui.resizable.js"></script> - <script src="../ui/jquery.ui.selectable.js"></script> - <script src="../ui/jquery.ui.slider.js"></script> - <script src="../ui/jquery.ui.sortable.js"></script> - <script src="../ui/jquery.ui.spinner.js"></script> - <script src="../ui/jquery.ui.tabs.js"></script> - <script src="../ui/jquery.ui.tooltip.js"></script> - <script src="../ui/jquery.ui.effect.js"></script> - <script src="../ui/jquery.ui.effect-blind.js"></script> - <script src="../ui/jquery.ui.effect-bounce.js"></script> - <script src="../ui/jquery.ui.effect-clip.js"></script> - <script src="../ui/jquery.ui.effect-drop.js"></script> - <script src="../ui/jquery.ui.effect-explode.js"></script> - <script src="../ui/jquery.ui.effect-fold.js"></script> - <script src="../ui/jquery.ui.effect-highlight.js"></script> - <script src="../ui/jquery.ui.effect-pulsate.js"></script> - <script src="../ui/jquery.ui.effect-scale.js"></script> - <script src="../ui/jquery.ui.effect-shake.js"></script> - <script src="../ui/jquery.ui.effect-slide.js"></script> - <script src="../ui/jquery.ui.effect-transfer.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-af.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ar.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-az.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ca.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-cs.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-cy-GB.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-da.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-de.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-el.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-en-AU.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-en-NZ.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-eo.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-es.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-et.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-eu.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-fa.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-fi.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-fo.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-fr.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-gl.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-he.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-hi.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-hr.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-hu.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-hy.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-id.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-is.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-it.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ja.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ka.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-kk.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-km.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ko.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-lb.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-lt.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-lv.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-mk.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ml.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ms.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-nl.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-nl-BE.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-no.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-pl.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-pt.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-rm.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ro.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ru.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-sk.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-sl.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-sq.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-sr.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-sv.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-ta.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-th.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-tj.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-tr.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-uk.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-vi.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script> - <script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script> - <script> - $(function() { - - $('.left-nav a').click(function(ev) { - window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default'; - loadPage(this.href); - $('.left-nav a.selected').removeClass('selected'); - $(this).addClass('selected'); - ev.preventDefault(); - }); - - if (window.location.hash) { - if (window.location.hash.indexOf('|') === -1) { - window.location.hash += '|default'; - } - var path = window.location.href.replace(/(index\.html)?#/,''); - path = path.replace('\|','/') + '.html'; - loadPage(path); - } - - function loadPage(path) { - var section = path.replace(/\/[^\/]+\.html/,''); - var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' '); - - $('td.normal div.normal') - .empty() - .append('<h4 class="demo-subheader">Functional demo:</h4>') - .append('<h3 class="demo-header">'+ header +'</h3>') - .append('<div id="demo-config"></div>') - .find('#demo-config') - .append('<div id="demo-frame"></div><div id="demo-config-menu"></div><div id="demo-link"><a class="demoWindowLink" href="#"><span class="ui-icon ui-icon-newwin"></span>Open demo in a new window</a></div>') - .find('#demo-config-menu') - .load(section + '/index.html .demos-nav', function() { - $('#demo-config-menu a').each(function() { - this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1')); - $(this).attr('target', 'demo-frame'); - $(this).click(function() { - - resetDemos(); - - $(this).parents('ul').find('li').removeClass('demo-config-on'); - $(this).parent().addClass('demo-config-on'); - $('#demo-notes').fadeOut(); - - //Set the hash to the actual page without ".html" - window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1]; - - loadDemo(this.getAttribute('href')); - - return false; - }); - }); - - if (window.location.hash) { - var demo = window.location.hash.split('|')[1]; - $('#demo-config-menu a').each(function(){ - if (this.href.indexOf(demo + '.html') !== -1) { - $(this).parents('ul').find('li').removeClass('demo-config-on'); - $(this).parent().addClass('demo-config-on'); - loadDemo(this.href); - } - }); - } - - updateDemoNotes(); - }) - .end() - .find('#demo-link a') - .bind('click', function(ev){ - window.open(this.href); - ev.preventDefault(); - }) - .end() - .end() - ; - - resetDemos(); - } - - function loadDemo(path) { - var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1]; - $.get(path, function(data) { - var source = data; - data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags - data = data.replace(/<\/?link.*>/ig,""); //Remove link tags - data = data.replace(/<\/?html.*>/ig,""); //Remove html tag - data = data.replace(/<\/?body.*>/ig,""); //Remove body tag - data = data.replace(/<\/?head.*>/ig,""); //Remove head tag - data = data.replace(/<\/?!doctype.*>/ig,""); //Remove doctype - data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags - data = data.replace(/((href|src)=["'])(?!(http|#))/ig, "$1" + directory + "/"); - - $('#demo-style').remove(); - $('#demo-frame').empty().html(data); - $('#demo-frame style').clone().appendTo('head').attr('id','demo-style'); - $('#demo-link a').attr('href', path); - updateDemoNotes(); - updateDemoSource(source); - - if (/default.html$/.test(path)) { - $.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) { - $("#demo-source").after(html); - $("#widget-docs").tabs(); - $(".param-header").click(function() { - $(this).parent().toggleClass("param-open").end().next().toggle(); - }); - $(".docs-list-header").each(function() { - var header = $(this); - var details = header.next().find(".param-details").hide(); - $("a:first", header).click(function() { - details.show().parent().addClass("param-open"); - return false; - }); - $("a:last", header).click(function() { - details.hide().parent().removeClass("param-open"); - return false; - }); - }); - }, "html" ); - } - }, "html" ); - } - - function updateDemoNotes() { - var notes = $('#demo-frame .demo-description'); - if ($('#demo-notes').length == 0) { - $('<div id="demo-notes"></div>').insertAfter('#demo-config'); - } - $('#demo-notes').hide().empty().html(notes.html()); - $('#demo-notes').show(); - notes.hide(); - } - - function updateDemoSource(source) { - if ($('#demo-source').length == 0) { - $('<div id="demo-source"><a href="#" class="source-closed">View Source</a><div><pre><code></code></pre></div></div>').insertAfter('#demo-notes'); - $('#demo-source').find(">a").click(function() { - $(this).toggleClass("source-closed").toggleClass("source-open").next().toggle(); - return false; - }).end().find(">div").hide(); - } - var cleanedSource = source - .replace('themes/base/jquery.ui.all.css', 'theme/jquery.ui.all.css') - .replace(/\s*\x3Clink.*demos\x2Ecss.*\x3E\s*/, '\r\n\t') - .replace(/\x2E\x2E\x2F\x2E\x2E\x2F/g, ''); - - $('#demo-source code').empty().text(cleanedSource); - } - - function resetDemos() { - $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional[''])); - $(".ui-dialog-content").remove(); - } - - }); - </script> </head> <body> -<table class="layout-grid"> - <tr> - <td class="left-nav"> - <dl class="demos-nav"> - <dt>Interactions</dt> - <dd><a href="draggable/index.html">Draggable</a></dd> - <dd><a href="droppable/index.html">Droppable</a></dd> - <dd><a href="resizable/index.html">Resizable</a></dd> - <dd><a href="selectable/index.html">Selectable</a></dd> - <dd><a href="sortable/index.html">Sortable</a></dd> - <dt>Widgets</dt> - <dd><a href="accordion/index.html">Accordion</a></dd> - <dd><a href="autocomplete/index.html">Autocomplete</a></dd> - <dd><a href="button/index.html">Button</a></dd> - <dd><a href="datepicker/index.html">Datepicker</a></dd> - <dd><a href="dialog/index.html">Dialog</a></dd> - <dd><a href="menu/index.html">Menu</a></dd> - <dd><a href="progressbar/index.html">Progressbar</a></dd> - <dd><a href="slider/index.html">Slider</a></dd> - <dd><a href="spinner/index.html">Spinner</a></dd> - <dd><a href="tabs/index.html">Tabs</a></dd> - <dd><a href="tooltip/index.html">Tooltip</a></dd> - <dt>Effects</dt> - <dd><a href="animate/index.html">Color Animation</a></dd> - <dd><a href="toggleClass/index.html">Toggle Class</a></dd> - <dd><a href="addClass/index.html">Add Class</a></dd> - <dd><a href="removeClass/index.html">Remove Class</a></dd> - <dd><a href="switchClass/index.html">Switch Class</a></dd> - <dd><a href="effect/index.html">Effect</a></dd> - <dd><a href="toggle/index.html">Toggle</a></dd> - <dd><a href="hide/index.html">Hide</a></dd> - <dd><a href="show/index.html">Show</a></dd> - <dt>Utilities</dt> - <dd><a href="position/index.html">Position</a></dd> - <dd><a href="widget/index.html">Widget</a></dd> - <dt>About jQuery UI</dt> - <dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd> - <dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd> - <dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd> - <dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd> - <dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd> - <dd><a href="http://jqueryui.com/docs/Developer_Guide">UI Developer Guidelines</a></dd> - <dt>Theming</dt> - <dd><a href="http://jqueryui.com/docs/Theming">Theming jQuery UI</a></dd> - <dd><a href="http://jqueryui.com/docs/Theming/API">jQuery UI CSS Framework</a></dd> - <dd><a href="http://jqueryui.com/docs/Theming/Themeroller">ThemeRoller application</a></dd> - <dd><a href="http://jqueryui.com/docs/Theming/ThemeSwitcher">Theme Switcher Widget</a></dd> - - </dl> - </td> - <td class="normal"> - - <div class="normal"> - - <h3>Instructions</h3> - <p> - These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them. - </p> - - </div> +<ul> + <li><a href="accordion/">accordion</a></li> + <li><a href="addClass/">addClass</a></li> + <li><a href="animate/">animate</a></li> + <li><a href="autocomplete/">autocomplete</a></li> + <li><a href="button/">button</a></li> + <li><a href="datepicker/">datepicker</a></li> + <li><a href="dialog/">dialog</a></li> + <li><a href="draggable/">draggable</a></li> + <li><a href="droppable/">droppable</a></li> + <li><a href="effect/">effect</a></li> + <li><a href="hide/">hide</a></li> + <li><a href="menu/">menu</a></li> + <li><a href="position/">position</a></li> + <li><a href="progressbar/">progressbar</a></li> + <li><a href="removeClass/">removeClass</a></li> + <li><a href="resizable/">resizable</a></li> + <li><a href="selectable/">selectable</a></li> + <li><a href="show/">show</a></li> + <li><a href="slider/">slider</a></li> + <li><a href="sortable/">sortable</a></li> + <li><a href="spinner/">spinner</a></li> + <li><a href="switchClass/">switchClass</a></li> + <li><a href="tabs/">tabs</a></li> + <li><a href="toggle/">toggle</a></li> + <li><a href="toggleClass/">toggleClass</a></li> + <li><a href="tooltip/">tooltip</a></li> + <li><a href="widget/">widget</a></li> +</ul> - </td> - </tr> -</table> </body> </html> diff --git a/demos/menu/default.html b/demos/menu/default.html index 862020612..249fe676d 100644 --- a/demos/menu/default.html +++ b/demos/menu/default.html @@ -17,33 +17,26 @@ </head> <body> -<div class="demo"> - - <ul id="menu"> - <li><a href="#Aberdeen">Aberdeen</a></li> - <li><a href="#Ada">Ada</a></li> - <li><a href="#Adamsville">Adamsville</a></li> - <li><a href="#Addyston">Addyston</a></li> - <li><a href="#Adelphi">Adelphi</a></li> - <li><a href="#Adena">Adena</a></li> - <li><a href="#Adrian">Adrian</a></li> - <li><a href="#Akron">Akron</a></li> - <li><a href="#Albany">Albany</a></li> - <li><a href="#Alexandria">Alexandria</a></li> - <li><a href="#Alger">Alger</a></li> - <li><a href="#Alledonia">Alledonia</a></li> - <li><a href="#Alliance">Alliance</a></li> - <li><a href="#Alpha">Alpha</a></li> - <li><a href="#Alvada">Alvada</a></li> - </ul> - -</div><!-- End demo --> +<ul id="menu"> + <li><a href="#Aberdeen">Aberdeen</a></li> + <li><a href="#Ada">Ada</a></li> + <li><a href="#Adamsville">Adamsville</a></li> + <li><a href="#Addyston">Addyston</a></li> + <li><a href="#Adelphi">Adelphi</a></li> + <li><a href="#Adena">Adena</a></li> + <li><a href="#Adrian">Adrian</a></li> + <li><a href="#Akron">Akron</a></li> + <li><a href="#Albany">Albany</a></li> + <li><a href="#Alexandria">Alexandria</a></li> + <li><a href="#Alger">Alger</a></li> + <li><a href="#Alledonia">Alledonia</a></li> + <li><a href="#Alliance">Alliance</a></li> + <li><a href="#Alpha">Alpha</a></li> + <li><a href="#Alvada">Alvada</a></li> +</ul> <div class="demo-description"> - <p>A menu with the default configuration. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p> - -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/menu/index.html b/demos/menu/index.html index f5a49799a..07556c6ec 100644 --- a/demos/menu/index.html +++ b/demos/menu/index.html @@ -3,16 +3,14 @@ <head> <meta charset="utf-8"> <title>jQuery UI Menu Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> - <div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="topalignmenu.html">Top-aligned sub menus</a></li> - <li><a href="navigationmenu.html">Navigation menu</a></li> - </ul> - </div> + +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="topalignmenu.html">Top-aligned sub menus</a></li> + <li><a href="navigationmenu.html">Navigation menu</a></li> +</ul> + </body> </html> diff --git a/demos/menu/navigationmenu.html b/demos/menu/navigationmenu.html index fec6bbb8d..a66bcd8cf 100644 --- a/demos/menu/navigationmenu.html +++ b/demos/menu/navigationmenu.html @@ -29,53 +29,46 @@ </head> <body> -<div class="demo"> - - <ul id="menu"> - <li><a href="?Aberdeen">Aberdeen</a></li> - <li><a href="?Ada">Ada</a></li> - <li><a href="?Adamsville">Adamsville</a></li> - <li><a href="?Addyston">Addyston</a></li> - <li> - <a href="?Delphi">Delphi</a> - <ul> - <li><a href="?Ada">Ada</a></li> - <li><a href="?Saarland">Saarland</a></li> - <li><a href="?Salzburg">Salzburg</a></li> - </ul> - </li> - <li><a href="?Saarland">Saarland</a></li> - <li> - <a href="?Salzburg">Salzburg</a> - <ul> - <li> - <a href="?Delphi">Delphi</a> - <ul> - <li><a href="?Ada">Ada</a></li> - <li><a href="?Saarland">Saarland</a></li> - <li><a href="?Salzburg">Salzburg</a></li> - </ul> - </li> - <li> - <a href="?Delphi">Delphi</a> - <ul> - <li><a href="?Ada">Ada</a></li> - <li><a href="?Saarland">Saarland</a></li> - <li><a href="?Salzburg">Salzburg</a></li> - </ul> - </li> - <li><a href="?Perch">Perch</a></li> - </ul> - </li> - </ul> - -</div><!-- End demo --> +<ul id="menu"> + <li><a href="?Aberdeen">Aberdeen</a></li> + <li><a href="?Ada">Ada</a></li> + <li><a href="?Adamsville">Adamsville</a></li> + <li><a href="?Addyston">Addyston</a></li> + <li> + <a href="?Delphi">Delphi</a> + <ul> + <li><a href="?Ada">Ada</a></li> + <li><a href="?Saarland">Saarland</a></li> + <li><a href="?Salzburg">Salzburg</a></li> + </ul> + </li> + <li><a href="?Saarland">Saarland</a></li> + <li> + <a href="?Salzburg">Salzburg</a> + <ul> + <li> + <a href="?Delphi">Delphi</a> + <ul> + <li><a href="?Ada">Ada</a></li> + <li><a href="?Saarland">Saarland</a></li> + <li><a href="?Salzburg">Salzburg</a></li> + </ul> + </li> + <li> + <a href="?Delphi">Delphi</a> + <ul> + <li><a href="?Ada">Ada</a></li> + <li><a href="?Saarland">Saarland</a></li> + <li><a href="?Salzburg">Salzburg</a></li> + </ul> + </li> + <li><a href="?Perch">Perch</a></li> + </ul> + </li> +</ul> <div class="demo-description"> - <p>A navigation menu. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p> - -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/menu/topalignmenu.html b/demos/menu/topalignmenu.html index 0ae287704..5a918d749 100644 --- a/demos/menu/topalignmenu.html +++ b/demos/menu/topalignmenu.html @@ -26,8 +26,6 @@ </head> <body> -<div class="demo"> - <ul id="menu"> <li><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> @@ -82,11 +80,8 @@ </li> </ul> -</div> - <div class="demo-description"> - <p>Menus can use custom positioning. There is a delay before activing an item on hover and a delay before closing a menu on mouse out to allow for moving to a submenu that is not touching its parent item.</p> +<p>Menus can use custom positioning. There is a delay before activing an item on hover and a delay before closing a menu on mouse out to allow for moving to a submenu that is not touching its parent item.</p> </div> - </body> </html> diff --git a/demos/position/cycler.html b/demos/position/cycler.html index 16542b962..241dae9a0 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -9,6 +9,17 @@ <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <link rel="stylesheet" href="../demos.css"> + <style> + #container { + overflow: hidden; + position: relative; + height: 400px; + } + + img { + position: absolute; + } + </style> <script> $(function() { // TODO refactor into a widget and get rid of these plugin methods @@ -16,7 +27,7 @@ return this.position({ my: "right middle", at: "left+25 middle", - of: window, + of: "#container", collision: "none", using: using }); @@ -25,7 +36,7 @@ return this.position({ my: "left middle", at: "right-25 middle", - of: window, + of: "#container", collision: "none", using: using }); @@ -34,21 +45,11 @@ return this.position({ my: "center middle", at: "center middle", - of: window, + of: "#container", using: using }); }; - $( "body" ).css({ - overflow: "hidden" - }) - $( ".demo" ).css({ - position: "relative", - }); - $( ".demo img" ).css({ - position: "absolute", - }); - $( "img:eq(0)" ).left(); $( "img:eq(1)" ).center(); $( "img:eq(2)" ).right(); @@ -60,19 +61,19 @@ event.preventDefault(); $( "img:eq(2)" ).center( animate ); $( "img:eq(1)" ).left( animate ) - $( "img:eq(0)" ).right().appendTo( ".demo" ); + $( "img:eq(0)" ).right().appendTo( "#container" ); } function previous( event ) { event.preventDefault(); $( "img:eq(0)" ).center( animate ); $( "img:eq(1)" ).right( animate ); - $( "img:eq(2)" ).left().prependTo( ".demo" ); + $( "img:eq(2)" ).left().prependTo( "#container" ); } $( "#previous" ).click( previous ); $( "#next" ).click( next ); - $( ".demo img" ).click(function( event ) { - $( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event ); + $( "img" ).click(function( event ) { + $( "img" ).index( this ) === 0 ? previous( event ) : next( event ); }); $( window ).resize(function() { @@ -85,25 +86,20 @@ </head> <body> -<div class="demo"> - -<img src="images/earth.jpg" width="458" height="308" alt="earth" /> -<img src="images/flight.jpg" width="512" height="307" alt="flight" /> -<img src="images/rocket.jpg" width="300" height="353" alt="rocket" /> - -<a id="previous" href="#">Previous</a> -<a id="next" href="#">Next</a> - -</div><!-- End demo --> - +<div id="container"> + <img src="images/earth.jpg" width="458" height="308" alt="earth"> + <img src="images/flight.jpg" width="512" height="307" alt="flight"> + <img src="images/rocket.jpg" width="300" height="353" alt="rocket"> + <a id="previous" href="#">Previous</a> + <a id="next" href="#">Next</a> +</div> <div class="demo-description"> <p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them. -<br/>Use the links at the top to cycle, or click on the images on the left and right. -<br/>Note how the images are repositioned when resizing the window. -<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p> -</div><!-- End demo-description --> - +<br>Use the links at the top to cycle, or click on the images on the left and right. +<br>Note how the images are repositioned when resizing the window. +<br>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p> +</div> </body> </html> diff --git a/demos/position/default.html b/demos/position/default.html index 7c15c8037..b4af06e31 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -67,8 +67,6 @@ </head> <body> -<div class="demo"> - <div id="parent"> <p> This is the position parent element. @@ -136,14 +134,9 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset. -<br/>Drag around the parent element to see collision detection in action.</p> -</div><!-- End demo-description --> - +<br>Drag around the parent element to see collision detection in action.</p> +</div> </body> </html> diff --git a/demos/position/index.html b/demos/position/index.html index 498c09b2b..a7b754876 100644 --- a/demos/position/index.html +++ b/demos/position/index.html @@ -1,19 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Position Demo</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="cycler.html">Cycling images</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="cycler.html">Cycling images</a></li> +</ul> </body> </html> diff --git a/demos/progressbar/animated.html b/demos/progressbar/animated.html index 144558e08..f102be742 100644 --- a/demos/progressbar/animated.html +++ b/demos/progressbar/animated.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -22,14 +22,8 @@ </head> <body> -<div class="demo"> - <div id="progressbar"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p> This progressbar has an animated fill by setting the @@ -38,7 +32,6 @@ on the <code>.ui-progressbar-value</code> element, using css. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/progressbar/default.html b/demos/progressbar/default.html index f1d600c4c..d9aeeb130 100644 --- a/demos/progressbar/default.html +++ b/demos/progressbar/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,17 +19,10 @@ </head> <body> -<div class="demo"> - <div id="progressbar"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Default determinate progress bar.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html index 9836f59aa..5080520c2 100644 --- a/demos/progressbar/index.html +++ b/demos/progressbar/index.html @@ -1,20 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Progressbar Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="animated.html">Animated</a></li> - <li><a href="resize.html">Resizable progressbar</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="animated.html">Animated</a></li> + <li><a href="resize.html">Resizable progressbar</a></li> +</ul> </body> </html> diff --git a/demos/progressbar/resize.html b/demos/progressbar/resize.html index 6b7960b8d..0c8fa40ba 100644 --- a/demos/progressbar/resize.html +++ b/demos/progressbar/resize.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -22,19 +22,12 @@ </head> <body> -<div class="demo"> - <div id="progressbarWrapper" style="height:30px; " class="ui-widget-default"> <div id="progressbar" style="height:100%;"></div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The progress bar's widths are specified in percentages for flexible sizing so it will resize to fit its container. Try resizing the height and width of this bar to see how it maintains the correct proportions. (This is not necessarily a real-world example, but it's a good illustration of how flexibly all the plugins are coded.)</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/removeClass/default.html b/demos/removeClass/default.html index 6fcaac471..7a53c339e 100644 --- a/demos/removeClass/default.html +++ b/demos/removeClass/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -30,8 +30,6 @@ </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. @@ -40,13 +38,8 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the button above to preview the effect.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/removeClass/index.html b/demos/removeClass/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/removeClass/index.html +++ b/demos/removeClass/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> diff --git a/demos/resizable/animate.html b/demos/resizable/animate.html index 189abd4d1..b198be633 100644 --- a/demos/resizable/animate.html +++ b/demos/resizable/animate.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -25,19 +25,12 @@ </head> <body> -<div class="demo"> - <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Animate</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Animate the resize action using the <code>animate</code> option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/aspect-ratio.html b/demos/resizable/aspect-ratio.html index 0f5db7a01..e02dbcfec 100644 --- a/demos/resizable/aspect-ratio.html +++ b/demos/resizable/aspect-ratio.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -24,19 +24,12 @@ </head> <body> -<div class="demo"> - <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Preserve aspect ratio</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/constrain-area.html b/demos/resizable/constrain-area.html index 02c8b53e4..51d0fe051 100644 --- a/demos/resizable/constrain-area.html +++ b/demos/resizable/constrain-area.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -26,8 +26,6 @@ </head> <body> -<div class="demo"> - <div id="container" class="ui-widget-content"> <h3 class="ui-widget-header">Containment</h3> <div id="resizable" class="ui-state-active"> @@ -35,13 +33,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/default.html b/demos/resizable/default.html index 93d423816..fe273e469 100644 --- a/demos/resizable/default.html +++ b/demos/resizable/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -22,19 +22,12 @@ </head> <body> -<div class="demo"> - <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resizable</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/delay-start.html b/demos/resizable/delay-start.html index 327188351..29b33d800 100644 --- a/demos/resizable/delay-start.html +++ b/demos/resizable/delay-start.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,7 +19,7 @@ $( "#resizable" ).resizable({ delay: 1000 }); - + $( "#resizable2" ).resizable({ distance: 40 }); @@ -28,8 +28,6 @@ </head> <body> -<div class="demo"> - <h3 class="docs">Time delay (ms):</h3> <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Time</h3> @@ -40,13 +38,8 @@ <h3 class="ui-widget-header">Distance</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Delay the start of resizng for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/helper.html b/demos/resizable/helper.html index 644737d68..18d89255f 100644 --- a/demos/resizable/helper.html +++ b/demos/resizable/helper.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -25,19 +25,12 @@ </head> <body> -<div class="demo"> - <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Helper</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/index.html b/demos/resizable/index.html index 45f400621..7c626e253 100644 --- a/demos/resizable/index.html +++ b/demos/resizable/index.html @@ -1,28 +1,24 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="aspect-ratio.html">Preserve aspect ratio</a></li> - <li><a href="max-min.html">Maximum / minimum size</a></li> - <li><a href="constrain-area.html">Constrain resize area</a></li> - <li><a href="delay-start.html">Delay start</a></li> - <li><a href="snap-to-grid.html">Snap to grid</a></li> - <li><a href="visual-feedback.html">Visual feedback</a></li> - <li><a href="synchronous-resize.html">Synchronous resize</a></li> - <li><a href="animate.html">Animate</a></li> - <li><a href="helper.html">Resize Helper</a></li> - <li><a href="textarea.html">Textarea</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="aspect-ratio.html">Preserve aspect ratio</a></li> + <li><a href="max-min.html">Maximum / minimum size</a></li> + <li><a href="constrain-area.html">Constrain resize area</a></li> + <li><a href="delay-start.html">Delay start</a></li> + <li><a href="snap-to-grid.html">Snap to grid</a></li> + <li><a href="visual-feedback.html">Visual feedback</a></li> + <li><a href="synchronous-resize.html">Synchronous resize</a></li> + <li><a href="animate.html">Animate</a></li> + <li><a href="helper.html">Resize Helper</a></li> + <li><a href="textarea.html">Textarea</a></li> +</ul> </body> </html> diff --git a/demos/resizable/max-min.html b/demos/resizable/max-min.html index 9d1da8e22..1baa43de6 100644 --- a/demos/resizable/max-min.html +++ b/demos/resizable/max-min.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -27,19 +27,12 @@ </head> <body> -<div class="demo"> - <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Resize larger / smaller</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Limit the resizable element to a maximum or minimum height or width using the <code>maxHeight</code>, <code>maxWidth</code>, <code>minHeight</code>, and <code>minWidth</code> options.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/snap-to-grid.html b/demos/resizable/snap-to-grid.html index 1190d1f57..450f7aa3a 100644 --- a/demos/resizable/snap-to-grid.html +++ b/demos/resizable/snap-to-grid.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -24,19 +24,12 @@ </head> <body> -<div class="demo"> - <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Grid</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/synchronous-resize.html b/demos/resizable/synchronous-resize.html index be8341f61..c28d8ef16 100644 --- a/demos/resizable/synchronous-resize.html +++ b/demos/resizable/synchronous-resize.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -27,8 +27,6 @@ </head> <body> -<div class="demo"> - <div id="resizable" class="ui-widget-header"> <h3 class="ui-state-active">Resize</h3> </div> @@ -37,13 +35,8 @@ <h3 class="ui-widget-header">will also resize</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the <code>alsoResize</code> option.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/textarea.html b/demos/resizable/textarea.html index 58be75722..39658a46a 100644 --- a/demos/resizable/textarea.html +++ b/demos/resizable/textarea.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -25,17 +25,10 @@ </head> <body> -<div class="demo"> - <textarea id="resizable" rows="5" cols="20"></textarea> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/resizable/visual-feedback.html b/demos/resizable/visual-feedback.html index 096a65cc4..f8288f073 100644 --- a/demos/resizable/visual-feedback.html +++ b/demos/resizable/visual-feedback.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -25,19 +25,12 @@ </head> <body> -<div class="demo"> - <div id="resizable" class="ui-widget-content"> <h3 class="ui-widget-header">Ghost</h3> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/selectable/default.html b/demos/selectable/default.html index 594a64e19..f75ea24b3 100644 --- a/demos/selectable/default.html +++ b/demos/selectable/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,7 +10,7 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.selectable.js"></script> <link rel="stylesheet" href="../demos.css"> - + <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } @@ -26,8 +26,6 @@ </head> <body> -<div class="demo"> - <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> @@ -38,13 +36,8 @@ <li class="ui-widget-content">Item 7</li> </ol> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/selectable/display-grid.html b/demos/selectable/display-grid.html index ced55196f..6861de0f0 100644 --- a/demos/selectable/display-grid.html +++ b/demos/selectable/display-grid.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,12 +10,12 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.selectable.js"></script> <link rel="stylesheet" href="../demos.css"> - + <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } - #selectable { list-style-type: none; margin: 0; padding: 0; } + #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; } </style> <script> @@ -26,8 +26,6 @@ </head> <body> -<div class="demo"> - <ol id="selectable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> @@ -43,13 +41,8 @@ <li class="ui-state-default">12</li> </ol> -</div><!-- End demo --> - - - <div class="demo-description"> <p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/selectable/index.html b/demos/selectable/index.html index 21fa4d5a7..a82830c60 100644 --- a/demos/selectable/index.html +++ b/demos/selectable/index.html @@ -1,20 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Selectable Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="serialize.html">Serialize</a></li> - <li><a href="display-grid.html">Display as grid</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="serialize.html">Serialize</a></li> + <li><a href="display-grid.html">Display as grid</a></li> +</ul> </body> </html> diff --git a/demos/selectable/serialize.html b/demos/selectable/serialize.html index 0c7e15f23..019c2ec2a 100644 --- a/demos/selectable/serialize.html +++ b/demos/selectable/serialize.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,7 +10,7 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.selectable.js"></script> <link rel="stylesheet" href="../demos.css"> - + <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } @@ -34,8 +34,6 @@ </head> <body> -<div class="demo"> - <p id="feedback"> <span>You've selected:</span> <span id="select-result">none</span>. </p> @@ -49,13 +47,8 @@ <li class="ui-widget-content">Item 6</li> </ol> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/show/default.html b/demos/show/default.html index 0730ed4d1..1187b11c2 100644 --- a/demos/show/default.html +++ b/demos/show/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -28,7 +28,7 @@ $(function() { // run the currently selected effect function runEffect() { - // get effect type from + // get effect type from var selectedEffect = $( "#effectTypes" ).val(); // most effect types need no options passed by default @@ -63,8 +63,6 @@ </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">Show</h3> @@ -92,13 +90,8 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the button above to preview the effect.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/show/index.html b/demos/show/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/show/index.html +++ b/demos/show/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> diff --git a/demos/slider/colorpicker.html b/demos/slider/colorpicker.html index 2b7906f09..34d43a9f1 100644 --- a/demos/slider/colorpicker.html +++ b/demos/slider/colorpicker.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -30,7 +30,6 @@ #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } - #demo-frame > div.demo { padding: 10px !important; }; </style> <script> function hexFromRGB(r, g, b) { @@ -70,8 +69,6 @@ </head> <body class="ui-widget-content" style="border:0;"> -<div class="demo"> - <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> Simple Colorpicker @@ -83,13 +80,8 @@ <div id="swatch" class="ui-widget-content ui-corner-all"></div> -</div><!-- End demo --> - - - -<div class="demo-description" style="clear:left;"> +<div class="demo-description"> <p>Combine three sliders to create a simple RGB colorpicker.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/default.html b/demos/slider/default.html index 43a0b1208..1c9350239 100644 --- a/demos/slider/default.html +++ b/demos/slider/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8" > @@ -10,9 +10,6 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; } - </style> <script> $(function() { $( "#slider" ).slider(); @@ -21,17 +18,10 @@ </head> <body> -<div class="demo"> - <div id="slider"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/hotelrooms.html b/demos/slider/hotelrooms.html index cad838bf7..f0a2aa953 100644 --- a/demos/slider/hotelrooms.html +++ b/demos/slider/hotelrooms.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,9 +10,6 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { var select = $( "#minbeds" ); @@ -33,8 +30,6 @@ </head> <body> -<div class="demo"> - <form id="reservation"> <label for="minbeds">Minimum number of beds</label> <select name="minbeds" id="minbeds"> @@ -47,13 +42,8 @@ </select> </form> -</div><!-- End demo --> - - - <div class="demo-description"> <p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/index.html b/demos/slider/index.html index caf68fe97..2d05bb58b 100644 --- a/demos/slider/index.html +++ b/demos/slider/index.html @@ -1,29 +1,24 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="steps.html">Snap to increments</a></li> - <li><a href="range.html">Range slider</a></li> - <li><a href="rangemin.html">Range with fixed minimum</a></li> - <li><a href="hotelrooms.html">Room reservation</a></li> - <li><a href="rangemax.html">Range with fixed maximum</a></li> - <li><a href="slider-vertical.html">Vertical slider</a></li> - <li><a href="range-vertical.html">Vertical range slider</a></li> - <li><a href="multiple-vertical.html">Multiple sliders</a></li> - <li><a href="colorpicker.html">Simple colorpicker</a></li> - <li><a href="side-scroll.html">Simple scrollbar</a></li> - <li><a href="tabs.html">Slider controls tabs</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="steps.html">Snap to increments</a></li> + <li><a href="range.html">Range slider</a></li> + <li><a href="rangemin.html">Range with fixed minimum</a></li> + <li><a href="hotelrooms.html">Room reservation</a></li> + <li><a href="rangemax.html">Range with fixed maximum</a></li> + <li><a href="slider-vertical.html">Vertical slider</a></li> + <li><a href="range-vertical.html">Vertical range slider</a></li> + <li><a href="multiple-vertical.html">Multiple sliders</a></li> + <li><a href="colorpicker.html">Simple colorpicker</a></li> + <li><a href="side-scroll.html">Simple scrollbar</a></li> +</ul> </body> </html> diff --git a/demos/slider/multiple-vertical.html b/demos/slider/multiple-vertical.html index f154d1de4..5468cfd09 100644 --- a/demos/slider/multiple-vertical.html +++ b/demos/slider/multiple-vertical.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -11,7 +11,6 @@ <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - #demo-frame > div.demo { padding: 10px !important; } #eq span { height:120px; float:left; margin:15px } @@ -39,9 +38,7 @@ }); </script> </head> -<body class="ui-widget-content" style="border:0;"> - -<div class="demo"> +<body> <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;"> <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> @@ -65,13 +62,8 @@ <span>70</span> </div> -</div><!-- End demo --> - - - -<div class="demo-description" style="clear:left;"> +<div class="demo-description"> <p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/range-vertical.html b/demos/slider/range-vertical.html index b5c2f3303..fd8defcf5 100644 --- a/demos/slider/range-vertical.html +++ b/demos/slider/range-vertical.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,9 +10,6 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-range" ).slider({ @@ -30,8 +27,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Target sales goal (Millions):</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -39,13 +34,8 @@ <div id="slider-range" style="height:250px;"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/range.html b/demos/slider/range.html index bfb699b55..5aa234ec0 100644 --- a/demos/slider/range.html +++ b/demos/slider/range.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,9 +10,6 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-range" ).slider({ @@ -31,8 +28,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Price range:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -40,13 +35,8 @@ <div id="slider-range"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html index f313e193e..c205aeec8 100644 --- a/demos/slider/rangemax.html +++ b/demos/slider/rangemax.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,9 +10,6 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-range-max" ).slider({ @@ -30,21 +27,14 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Minimum number of bedrooms:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <div id="slider-range-max"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <code>range</code> option to "max."</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html index 992ed2918..44460522a 100644 --- a/demos/slider/rangemin.html +++ b/demos/slider/rangemin.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,9 +10,6 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-range-min" ).slider({ @@ -30,8 +27,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Maximum price:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -39,13 +34,8 @@ <div id="slider-range-min"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <code>range</code> option to "min."</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/side-scroll.html b/demos/slider/side-scroll.html index 84cd54a80..f6b2ae335 100644 --- a/demos/slider/side-scroll.html +++ b/demos/slider/side-scroll.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -11,7 +11,6 @@ <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - #demo-frame > div.demo { padding: 10px !important; } .scroll-pane { overflow: auto; width: 99%; float:left; } .scroll-content { width: 2440px; float: left; } .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } @@ -98,8 +97,6 @@ </head> <body> -<div class="demo"> - <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> <div class="scroll-content"> <div class="scroll-content-item ui-widget-header">1</div> @@ -128,13 +125,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/slider-vertical.html b/demos/slider/slider-vertical.html index 3a4c10f46..ee2be1817 100644 --- a/demos/slider/slider-vertical.html +++ b/demos/slider/slider-vertical.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,9 +10,6 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider-vertical" ).slider({ @@ -31,8 +28,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Volume:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -40,13 +35,8 @@ <div id="slider-vertical" style="height:200px;"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/steps.html b/demos/slider/steps.html index 93589f546..ae7eccfba 100644 --- a/demos/slider/steps.html +++ b/demos/slider/steps.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,9 +10,6 @@ <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.slider.js"></script> <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; }; - </style> <script> $(function() { $( "#slider" ).slider({ @@ -30,8 +27,6 @@ </head> <body> -<div class="demo"> - <p> <label for="amount">Donation amount ($50 increments):</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> @@ -39,13 +34,8 @@ <div id="slider"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/slider/tabs.html b/demos/slider/tabs.html deleted file mode 100644 index c7c169567..000000000 --- a/demos/slider/tabs.html +++ /dev/null @@ -1,67 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>jQuery UI Slider - Snap to increments</title> - <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> - <script src="../../ui/jquery.ui.core.js"></script> - <script src="../../ui/jquery.ui.widget.js"></script> - <script src="../../ui/jquery.ui.mouse.js"></script> - <script src="../../ui/jquery.ui.tabs.js"></script> - <script src="../../ui/jquery.ui.slider.js"></script> - <link rel="stylesheet" href="../demos.css"> - <style> - #demo-frame > div.demo { padding: 10px !important; } - </style> - <script> - $(function() { - $( "#tabs" ).tabs({ - select: function( event, ui ) { - $( "#slider" ).slider( "value", ui.index ); - } - }); - $( "#slider" ).slider({ - min: 0, - max: $( "#tabs" ).tabs( "length" ) - 1, - slide: function( event, ui ) { - $( "#tabs" ).tabs( "select", ui.value ); - } - }); - }); - </script> -</head> -<body> - -<div class="demo"> - -<div id="slider" style="width:100px"></div> - -<div id="tabs"> - <ul> - <li><a href="#tabs-1">Nunc tincidunt</a></li> - <li><a href="#tabs-2">Proin dolor</a></li> - <li><a href="#tabs-3">Aenean lacinia</a></li> - </ul> - <div id="tabs-1"> - <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> - </div> - <div id="tabs-2"> - <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> - </div> - <div id="tabs-3"> - <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> - <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> - </div> -</div> - -</div><!-- End demo --> - - - -<div class="demo-description"> -<p>Control tabs with a slider.</p> -</div><!-- End demo-description --> - -</body> -</html> diff --git a/demos/sortable/connect-lists-through-tabs.html b/demos/sortable/connect-lists-through-tabs.html index d28f76cae..980c1302b 100644 --- a/demos/sortable/connect-lists-through-tabs.html +++ b/demos/sortable/connect-lists-through-tabs.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -39,7 +39,6 @@ </script> </head> <body> -<div class="demo"> <div id="tabs"> <ul> @@ -66,13 +65,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/sortable/connect-lists.html b/demos/sortable/connect-lists.html index a30a22f8b..33c4d6035 100644 --- a/demos/sortable/connect-lists.html +++ b/demos/sortable/connect-lists.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -23,7 +23,6 @@ </script> </head> <body> -<div class="demo"> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> @@ -41,10 +40,6 @@ <li class="ui-state-highlight">Item 5</li> </ul> -</div><!-- End demo --> - - - <div class="demo-description"> <p> Sort items from one list into another and vice versa, by passing a selector into @@ -52,7 +47,6 @@ group all related lists with a CSS class, and then pass that class into the sortable function (i.e., <code>connectWith: '.myclass'</code>). </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/sortable/default.html b/demos/sortable/default.html index ca0d5d172..209655b20 100644 --- a/demos/sortable/default.html +++ b/demos/sortable/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -23,7 +23,6 @@ </script> </head> <body> -<div class="demo"> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> @@ -35,17 +34,12 @@ <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> -</div><!-- End demo --> - - - <div class="demo-description"> <p> Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share <code>draggable</code> properties. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/sortable/delay-start.html b/demos/sortable/delay-start.html index caa0fbfd6..639ace60a 100644 --- a/demos/sortable/delay-start.html +++ b/demos/sortable/delay-start.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,7 +19,7 @@ $( "#sortable1" ).sortable({ delay: 300 }); - + $( "#sortable2" ).sortable({ distance: 15 }); @@ -29,7 +29,6 @@ </script> </head> <body> -<div class="demo"> <h3 class="docs">Time delay of 300ms:</h3> @@ -49,10 +48,6 @@ <li class="ui-state-default">Item 4</li> </ul> -</div><!-- End demo --> - - - <div class="demo-description"> <p> Prevent accidental sorting either by delay (time) or distance. Set a number of @@ -61,7 +56,6 @@ needs to be dragged before sorting starts with the <code>distance</code> option. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/sortable/display-grid.html b/demos/sortable/display-grid.html index ced64775b..9650676a1 100644 --- a/demos/sortable/display-grid.html +++ b/demos/sortable/display-grid.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -11,7 +11,7 @@ <script src="../../ui/jquery.ui.sortable.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - #sortable { list-style-type: none; margin: 0; padding: 0; } + #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } </style> <script> @@ -22,7 +22,6 @@ </script> </head> <body> -<div class="demo"> <ul id="sortable"> <li class="ui-state-default">1</li> @@ -39,16 +38,11 @@ <li class="ui-state-default">12</li> </ul> -</div><!-- End demo --> - - - <div class="demo-description"> <p> To arrange sortable items as a grid, give them identical dimensions and float them using CSS. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/sortable/empty-lists.html b/demos/sortable/empty-lists.html index 3c1a12537..dc727515c 100644 --- a/demos/sortable/empty-lists.html +++ b/demos/sortable/empty-lists.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -30,7 +30,6 @@ </script> </head> <body> -<div class="demo"> <ul id="sortable1" class='droptrue'> <li class="ui-state-default">Can be dropped..</li> @@ -51,11 +50,7 @@ <ul id="sortable3" class='droptrue'> </ul> -<br style="clear:both" /> - -</div><!-- End demo --> - - +<br style="clear:both"> <div class="demo-description"> <p> @@ -63,7 +58,6 @@ using the <code>dropOnEmpty</code> option set to <code>false</code>. By default, sortable items can be dropped on empty lists. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/sortable/index.html b/demos/sortable/index.html index b307ef777..66b0b5ced 100644 --- a/demos/sortable/index.html +++ b/demos/sortable/index.html @@ -1,26 +1,22 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="placeholder.html">Drop placeholder</a></li> - <li><a href="connect-lists.html">Connect lists</a></li> - <li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li> - <li><a href="empty-lists.html">Handle empty lists</a></li> - <li><a href="items.html">Include / exclude items</a></li> - <li><a href="delay-start.html">Delay start</a></li> - <li><a href="display-grid.html">Display as grid</a></li> - <li><a href="portlets.html">Portlets</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="placeholder.html">Drop placeholder</a></li> + <li><a href="connect-lists.html">Connect lists</a></li> + <li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li> + <li><a href="empty-lists.html">Handle empty lists</a></li> + <li><a href="items.html">Include / exclude items</a></li> + <li><a href="delay-start.html">Delay start</a></li> + <li><a href="display-grid.html">Display as grid</a></li> + <li><a href="portlets.html">Portlets</a></li> +</ul> </body> </html> diff --git a/demos/sortable/items.html b/demos/sortable/items.html index a9f308129..c5ab4aaf1 100644 --- a/demos/sortable/items.html +++ b/demos/sortable/items.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -29,7 +29,6 @@ </script> </head> <body> -<div class="demo"> <h3 class="docs">Specify which items are sortable:</h3> @@ -49,10 +48,6 @@ <li class="ui-state-default">Item 4</li> </ul> -</div><!-- End demo --> - - - <div class="demo-description"> <p> Specify which items are eligible to sort by passing a jQuery selector into @@ -64,7 +59,6 @@ <code>cancel</code> option. Cancelled items remain valid sort targets for others. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html index 75e88d9ee..7767f1def 100644 --- a/demos/sortable/placeholder.html +++ b/demos/sortable/placeholder.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -26,7 +26,6 @@ </script> </head> <body> -<div class="demo"> <ul id="sortable"> <li class="ui-state-default">Item 1</li> @@ -38,10 +37,6 @@ <li class="ui-state-default">Item 7</li> </ul> -</div><!-- End demo --> - - - <div class="demo-description"> <p> When dragging a sortable item to a new location, other items will make room @@ -50,7 +45,6 @@ be visible. Use the boolean <code>forcePlaceholderSize</code> option to set dimensions on the placeholder. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/sortable/portlets.html b/demos/sortable/portlets.html index e9ed16ed2..e747c7f77 100644 --- a/demos/sortable/portlets.html +++ b/demos/sortable/portlets.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -42,7 +42,6 @@ </script> </head> <body> -<div class="demo"> <div class="column"> @@ -50,7 +49,7 @@ <div class="portlet-header">Feeds</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> - + <div class="portlet"> <div class="portlet-header">News</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> @@ -73,7 +72,7 @@ <div class="portlet-header">Links</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> - + <div class="portlet"> <div class="portlet-header">Images</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> @@ -81,16 +80,11 @@ </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p> Enable portlets (styled divs) as sortables and use the <code>connectWith</code> option to allow sorting between columns. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html index 2343b6789..15ac7e9b0 100644 --- a/demos/spinner/currency.html +++ b/demos/spinner/currency.html @@ -32,8 +32,6 @@ </head> <body> -<div class="demo"> - <p> <label for="currency">Currency to donate</label> <select id="currency" name="currency"> @@ -47,13 +45,8 @@ <input id="spinner" name="spinner" value="5"> </p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Example of a donation form, with currency selection and amount spinner.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html index 5475dc76c..f66e0a0f7 100644 --- a/demos/spinner/decimal.html +++ b/demos/spinner/decimal.html @@ -31,8 +31,6 @@ </head> <body> -<div class="demo"> - <p> <label for="spinner">Decimal spinner:</label> <input id="spinner" name="spinner" value="5.06"> @@ -46,10 +44,6 @@ </select> </p> -</div><!-- End demo --> - - - <div class="demo-description"> <p> Example of a decimal spinner. Step is set to 0.01. @@ -57,7 +51,6 @@ then changes the culture, then sets the value again, resulting in an updated formatting, based on the new culture. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/spinner/default.html b/demos/spinner/default.html index 8e742a862..3273c82fc 100644 --- a/demos/spinner/default.html +++ b/demos/spinner/default.html @@ -42,8 +42,6 @@ </head> <body> -<div class="demo"> - <p> <label for="spinner">Select a value:</label> <input id="spinner" name="value"> @@ -59,13 +57,8 @@ <button id="setvalue">Set value to 5</button> </p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Default spinner.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/spinner/index.html b/demos/spinner/index.html index 594fd9399..f3c74d0b1 100644 --- a/demos/spinner/index.html +++ b/demos/spinner/index.html @@ -3,21 +3,17 @@ <head> <meta charset="utf-8"> <title>jQuery UI Spinner Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="decimal.html">Decimal</a></li> - <li><a href="currency.html">Currency</a></li> - <li><a href="latlong.html">Map</a></li> - <li><a href="time.html">Time</a></li> - <li><a href="overflow.html">Overflow</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="decimal.html">Decimal</a></li> + <li><a href="currency.html">Currency</a></li> + <li><a href="latlong.html">Map</a></li> + <li><a href="time.html">Time</a></li> + <li><a href="overflow.html">Overflow</a></li> +</ul> </body> </html> diff --git a/demos/spinner/latlong.html b/demos/spinner/latlong.html index a75929245..90cb21512 100644 --- a/demos/spinner/latlong.html +++ b/demos/spinner/latlong.html @@ -42,8 +42,6 @@ </head> <body> -<div class="demo"> - <label for="lat">Latitude</label> <input id="lat" name="lat" value="44.797"> <br> @@ -52,13 +50,8 @@ <div id="map"></div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Google Maps integration, using spinners to change latidude and longitude.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/spinner/overflow.html b/demos/spinner/overflow.html index 27db127c1..2eedd1045 100644 --- a/demos/spinner/overflow.html +++ b/demos/spinner/overflow.html @@ -29,23 +29,16 @@ </head> <body> -<div class="demo"> - <p> <label for="spinner">Select a value:</label> <input id="spinner" name="value" /> </p> -</div><!-- End demo --> - - - <div class="demo-description"> <p> Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it'll overflow to -10, and the other way round. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/spinner/time.html b/demos/spinner/time.html index c23881e67..05ded9dc9 100644 --- a/demos/spinner/time.html +++ b/demos/spinner/time.html @@ -51,7 +51,6 @@ </head> <body> -<div class="demo"> <p> <label for="spinner">Time spinner:</label> <input id="spinner" name="spinner" value="08:30 PM"> @@ -63,9 +62,6 @@ <option value="de-DE">German</option> </select> </p> -</div><!-- End demo --> - - <div class="demo-description"> <p> @@ -73,7 +69,6 @@ a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down spins hours. </p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/switchClass/default.html b/demos/switchClass/default.html index fabce344e..21f192e83 100644 --- a/demos/switchClass/default.html +++ b/demos/switchClass/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -10,7 +10,7 @@ <style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } - #effect {position: relative; } + #effect { position: relative; } .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; } .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> @@ -19,15 +19,13 @@ $( "#button" ).click(function(){ $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 ); $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 ); - return false; + return false; }); }); </script> </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. @@ -35,13 +33,8 @@ </div> <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the button above to preview the effect.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/switchClass/index.html b/demos/switchClass/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/switchClass/index.html +++ b/demos/switchClass/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html index f47c1c6a3..97d3cf8c0 100644 --- a/demos/tabs/ajax.html +++ b/demos/tabs/ajax.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -25,8 +25,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> @@ -40,14 +38,9 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p> <p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/bottom.html b/demos/tabs/bottom.html index ba35914f0..3ffb3d8b5 100644 --- a/demos/tabs/bottom.html +++ b/demos/tabs/bottom.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -32,8 +32,6 @@ </head> <body> -<div class="demo"> - <div id="tabs" class="tabs-bottom"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -53,13 +51,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>With some additional CSS (for positioning) and JS (to put the right classes on elements) the tabs can be placed below their content.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/collapsible.html b/demos/tabs/collapsible.html index 3bf4a6769..0645dd1d2 100644 --- a/demos/tabs/collapsible.html +++ b/demos/tabs/collapsible.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,8 +19,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -41,15 +39,10 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the selected tab to toggle its content closed/open. To enable this functionality, set the <code>collapsible</code> option to true.</p> <pre><code>collapsible: true </code></pre> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/default.html b/demos/tabs/default.html index 9795334cc..03aa65c8c 100644 --- a/demos/tabs/default.html +++ b/demos/tabs/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -37,13 +37,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click tabs to swap between content that is broken into logical sections.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/index.html b/demos/tabs/index.html index dbf7fee5a..779dfd2da 100644 --- a/demos/tabs/index.html +++ b/demos/tabs/index.html @@ -1,24 +1,20 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="ajax.html">Content via Ajax</a></li> - <li><a href="mouseover.html">Open on mouseover</a></li> - <li><a href="collapsible.html">Collapse content</a></li> - <li><a href="sortable.html">Sortable</a></li> - <li><a href="manipulation.html">Simple manipulation</a></li> - <li><a href="bottom.html">Tabs below content</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="ajax.html">Content via Ajax</a></li> + <li><a href="mouseover.html">Open on mouseover</a></li> + <li><a href="collapsible.html">Collapse content</a></li> + <li><a href="sortable.html">Sortable</a></li> + <li><a href="manipulation.html">Simple manipulation</a></li> + <li><a href="bottom.html">Tabs below content</a></li> +</ul> </body> </html> diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html index a115e1470..fbd85b9bf 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -85,37 +85,30 @@ </head> <body> -<div class="demo"> - - <div id="dialog" title="Tab data"> - <form> - <fieldset class="ui-helper-reset"> - <label for="tab_title">Title</label> - <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /> - <label for="tab_content">Content</label> - <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea> - </fieldset> - </form> - </div> - - <button id="add_tab">Add Tab</button> - - <div id="tabs"> - <ul> - <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li> - </ul> - <div id="tabs-1"> - <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> - </div> +<div id="dialog" title="Tab data"> + <form> + <fieldset class="ui-helper-reset"> + <label for="tab_title">Title</label> + <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /> + <label for="tab_content">Content</label> + <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea> + </fieldset> + </form> +</div> + +<button id="add_tab">Add Tab</button> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li> + </ul> + <div id="tabs-1"> + <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> - -</div><!-- End demo --> - - +</div> <div class="demo-description"> <p>Simple tabs adding and removing.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/mouseover.html b/demos/tabs/mouseover.html index ef362fbc1..052cd24b4 100644 --- a/demos/tabs/mouseover.html +++ b/demos/tabs/mouseover.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -19,8 +19,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -39,15 +37,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Toggle sections open/closed on mouseover with the <code>event</code> option. The default value for event is "click."</p> -<pre><code>event: 'mouseover' -</code></pre> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tabs/sortable.html b/demos/tabs/sortable.html index 2580ce496..3e1d3f87e 100644 --- a/demos/tabs/sortable.html +++ b/demos/tabs/sortable.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -25,8 +25,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -45,20 +43,9 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Drag the tabs above to re-order them.</p> -<p> -Making tabs sortable is as simple as calling -<code>.sortable()</code> -on the -<code>.ui-tabs-nav</code> -element. -</p> -</div><!-- End demo-description --> - +<p>Making tabs sortable is as simple as calling <code>.sortable()</code> on the <code>.ui-tabs-nav</code> element.</p> +</div> </body> </html> diff --git a/demos/tabs/vertical.html b/demos/tabs/vertical.html index 5e4716837..1d901d7fb 100644 --- a/demos/tabs/vertical.html +++ b/demos/tabs/vertical.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -26,8 +26,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -49,13 +47,8 @@ </div> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click tabs to swap between content that is broken into logical sections.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/toggle/default.html b/demos/toggle/default.html index d3d32e02e..84ac2e0ae 100644 --- a/demos/toggle/default.html +++ b/demos/toggle/default.html @@ -69,8 +69,6 @@ </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="ui-widget-content ui-corner-all"> <h3 class="ui-widget-header ui-corner-all">Toggle</h3> @@ -97,13 +95,9 @@ </select> <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> -</div><!-- End demo --> - - <div class="demo-description"> <p>Click the button above to preview the effect.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/toggle/index.html b/demos/toggle/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/toggle/index.html +++ b/demos/toggle/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> diff --git a/demos/toggleClass/default.html b/demos/toggleClass/default.html index 76373b667..f4a5ab57a 100644 --- a/demos/toggleClass/default.html +++ b/demos/toggleClass/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -24,8 +24,6 @@ </head> <body> -<div class="demo"> - <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. @@ -34,13 +32,8 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Click the button above to preview the effect.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/toggleClass/index.html b/demos/toggleClass/index.html index f5bd6a0e4..3620fd7c5 100644 --- a/demos/toggleClass/index.html +++ b/demos/toggleClass/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index 2ed468ba8..7a66daccf 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -41,21 +41,14 @@ </head> <body> -<div class="demo"> - <p>There are various ways to customize the animation of a tooltip.</p> <p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p> <p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>This demo shows how to customize animations using the show and hide options, as well as the open event.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tooltip/custom-content.html b/demos/tooltip/custom-content.html index 286e75781..31352155d 100644 --- a/demos/tooltip/custom-content.html +++ b/demos/tooltip/custom-content.html @@ -25,7 +25,7 @@ </style> <script> $(function() { - $( ".demo" ).tooltip({ + $( document ).tooltip({ items: "img, [data-geo], [title]", content: function() { var element = $( this ); @@ -49,8 +49,6 @@ </head> <body> -<div class="demo"> - <div class="ui-widget photo"> <div class="ui-widget-header ui-corner-all"> <h2>St. Stephen's Cathedral</h2> @@ -74,14 +72,9 @@ <p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p> <p>We realize you may want to interact with the map tooltips. This is a planned feature for a future version.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tooltip/custom-style.html b/demos/tooltip/custom-style.html index c9035d44b..48afe23c4 100644 --- a/demos/tooltip/custom-style.html +++ b/demos/tooltip/custom-style.html @@ -12,7 +12,7 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - $( ".demo" ).tooltip({ + $( document ).tooltip({ position: { my: "center bottom-20", at: "center top", @@ -79,8 +79,6 @@ </head> <body> -<div class="demo"> - <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> <p>But as it's not a native tooltip, it can be styled. Any themes built with @@ -90,13 +88,8 @@ will also style tooltips accordingly.</p> <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p> <p>Hover the field to see the tooltip.</p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Hover the links above or use the tab key to cycle the focus on each element.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html index a34acd41d..f1be3de9e 100644 --- a/demos/tooltip/default.html +++ b/demos/tooltip/default.html @@ -12,7 +12,7 @@ <link rel="stylesheet" href="../demos.css"> <script> $(function() { - $( ".demo" ).tooltip(); + $( document ).tooltip(); }); </script> <style> @@ -24,8 +24,6 @@ </head> <body> -<div class="demo"> - <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> <p>But as it's not a native tooltip, it can be styled. Any themes built with @@ -35,13 +33,8 @@ will also style tooltips accordingly.</p> <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p> <p>Hover the field to see the tooltip.</p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Hover the links above or use the tab key to cycle the focus on each element.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html index 760fed4d7..879a92d7f 100644 --- a/demos/tooltip/forms.html +++ b/demos/tooltip/forms.html @@ -40,8 +40,6 @@ </head> <body> -<div class="demo"> - <form> <fieldset> <div> @@ -59,14 +57,9 @@ </fieldset> </form> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p> <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html index 3753bc181..cebedd0c3 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -3,22 +3,18 @@ <head> <meta charset="utf-8"> <title>jQuery UI Tooltip Demos</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <li><a href="custom-style.html">Custom style with arrow</a></li> - <li><a href="forms.html">Forms with tooltips</a></li> - <li><a href="tracking.html">Track the mouse</a></li> - <li><a href="custom-animation.html">Custom animation</a></li> - <li><a href="custom-content.html">Custom content</a></li> - <li><a href="video-player.html">Video Player</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> + <li><a href="custom-style.html">Custom style with arrow</a></li> + <li><a href="forms.html">Forms with tooltips</a></li> + <li><a href="tracking.html">Track the mouse</a></li> + <li><a href="custom-animation.html">Custom animation</a></li> + <li><a href="custom-content.html">Custom content</a></li> + <li><a href="video-player.html">Video Player</a></li> +</ul> </body> </html> diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html index 84c40e580..9b6b5c272 100644 --- a/demos/tooltip/tracking.html +++ b/demos/tooltip/tracking.html @@ -18,7 +18,7 @@ </style> <script> $(function() { - $( ".demo" ).tooltip({ + $( document ).tooltip({ track: true }); }); @@ -26,8 +26,6 @@ </head> <body> -<div class="demo"> - <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> <p>But as it's not a native tooltip, it can be styled. Any themes built with @@ -37,13 +35,8 @@ will also style tooltips accordingly.</p> <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p> <p>Hover the field to see the tooltip.</p> -</div><!-- End demo --> - - - <div class="demo-description"> <p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index c7f1e525b..020e475d1 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -79,7 +79,7 @@ items: "button" }); - $( ".demo" ).tooltip({ + $( document ).tooltip({ position: { my: "center top", at: "center bottom+5", @@ -96,8 +96,6 @@ </head> <body> -<div class="demo"> - <div class="player">Here Be Video (HTML5?)</div> <div class="tools"> <span class="set"> @@ -112,13 +110,8 @@ <button data-icon="ui-icon-alert">Flag as inappropiate</button> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/widget/default.html b/demos/widget/default.html index 4b4913480..1faf13b66 100644 --- a/demos/widget/default.html +++ b/demos/widget/default.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -162,8 +162,6 @@ </head> <body> -<div class="demo"> - <div> <div id="my-widget1">color me</div> <div id="my-widget2">color me</div> @@ -172,15 +170,10 @@ <button id="black">Go black</button> </div> -</div><!-- End demo --> - - - <div class="demo-description"> <p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p> <p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p> <p><a href="http://wiki.jqueryui.com/w/page/12138135/Widget-factory">For more details on the widget factory, visit the jQuery UI planning wiki.</a></p> -</div><!-- End demo-description --> - +</div> </body> </html> diff --git a/demos/widget/index.html b/demos/widget/index.html index 1ecb4feea..d518b070d 100644 --- a/demos/widget/index.html +++ b/demos/widget/index.html @@ -1,18 +1,14 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Widget Demo</title> - <link rel="stylesheet" href="../demos.css"> </head> <body> -<div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - </ul> -</div> +<ul> + <li><a href="default.html">Default functionality</a></li> +</ul> </body> </html> |