diff options
| author | Felix Nagel <info@felixnagel.com> | 2012-10-03 22:37:03 +0200 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2012-10-03 22:37:03 +0200 |
| commit | cca4e77a95eb7024c204f4d0719baa2ef6195ed2 (patch) | |
| tree | 732a8e171647d9b25b1b2988f09dccc5d182bad7 /demos | |
| parent | 5e12c54be1813e1f627d3214c11d7520fb46c647 (diff) | |
| parent | e8bdf468614e59309b4a02ad4f6c29c1d06083c1 (diff) | |
| download | jquery-ui-cca4e77a95eb7024c204f4d0719baa2ef6195ed2.tar.gz jquery-ui-cca4e77a95eb7024c204f4d0719baa2ef6195ed2.zip | |
Merge branch 'master' into selectmenu
Diffstat (limited to 'demos')
167 files changed, 878 insertions, 2687 deletions
diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html index c348dfbbf..5fa3ba9a5 100644 --- a/demos/accordion/collapsible.html +++ b/demos/accordion/collapsible.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Collapse content</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.accordion.js"></script> @@ -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..660f1e198 100644 --- a/demos/accordion/custom-icons.html +++ b/demos/accordion/custom-icons.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Customize icons</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.accordion.js"></script> @@ -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..28fe7cc6d 100644 --- a/demos/accordion/default.html +++ b/demos/accordion/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.accordion.js"></script> @@ -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..bdc2939c5 100644 --- a/demos/accordion/fillspace.html +++ b/demos/accordion/fillspace.html @@ -1,16 +1,23 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Fill space</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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 65ca6f09f..232773c84 100644 --- a/demos/accordion/hoverintent.html +++ b/demos/accordion/hoverintent.html @@ -1,21 +1,21 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Open on hoverintent</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.accordion.js"></script> <link rel="stylesheet" href="../demos.css"> <script> $(function() { - $("#accordion").accordion({ + $( "#accordion" ).accordion({ event: "click hoverintent" }); }); - + var cfg = ($.hoverintent = { sensitivity: 7, interval: 100 @@ -33,7 +33,7 @@ args = arguments, target = $( event.target ), cX, cY, pX, pY; - + function track( event ) { cX = event.pageX; cY = event.pageY; @@ -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..a6356413a 100644 --- a/demos/accordion/no-auto-height.html +++ b/demos/accordion/no-auto-height.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - No auto height</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.accordion.js"></script> @@ -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..70841b3f2 100644 --- a/demos/accordion/sortable.html +++ b/demos/accordion/sortable.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Sortable</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..ad3a1058d 100644 --- a/demos/addClass/default.html +++ b/demos/addClass/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - addClass demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <link rel="stylesheet" href="../demos.css"> <style> @@ -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..589d4dc77 100644 --- a/demos/animate/default.html +++ b/demos/animate/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Animate demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <link rel="stylesheet" href="../demos.css"> <style> @@ -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..842ebfa8a 100644 --- a/demos/autocomplete/categories.html +++ b/demos/autocomplete/categories.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Categories</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..cc43f4527 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Combobox</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> @@ -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..1e64df047 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Custom data and display</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..3f996598a 100644 --- a/demos/autocomplete/default.html +++ b/demos/autocomplete/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..43b6620c8 100644 --- a/demos/autocomplete/folding.html +++ b/demos/autocomplete/folding.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Accent folding</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..4c5e8e4c9 100644 --- a/demos/autocomplete/maxheight.html +++ b/demos/autocomplete/maxheight.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Scrollable results</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..5b901db0f 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Multiple, remote</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..4fbb45722 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Multiple values</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..9f23815bb 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Remote JSONP datasource</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..bc1de7746 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Remote with caching</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -18,8 +18,7 @@ </style> <script> $(function() { - var cache = {}, - lastXhr; + var cache = {}; $( "#birds" ).autocomplete({ minLength: 2, source: function( request, response ) { @@ -29,11 +28,9 @@ return; } - lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) { + $.getJSON( "search.php", request, function( data, status, xhr ) { cache[ term ] = data; - if ( xhr === lastXhr ) { - response( data ); - } + response( data ); }); } }); @@ -42,21 +39,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..56863a8d8 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Remote datasource</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..059c33d67 100644 --- a/demos/autocomplete/xml.html +++ b/demos/autocomplete/xml.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - XML data parsed once</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..4d597049a 100644 --- a/demos/button/checkbox.html +++ b/demos/button/checkbox.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Checkboxes</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> @@ -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..2423aa1a2 100644 --- a/demos/button/default.html +++ b/demos/button/default.html @@ -1,38 +1,34 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> <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..8c4bf5a30 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -1,56 +1,49 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Icons</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> <link rel="stylesheet" href="../demos.css"> <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 - }); + $( "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 + }); }); </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..763a50385 100644 --- a/demos/button/radio.html +++ b/demos/button/radio.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Radios</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> @@ -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..5b6493de5 100644 --- a/demos/button/splitbutton.html +++ b/demos/button/splitbutton.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Split button</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> @@ -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..342ac8401 100644 --- a/demos/button/toolbar.html +++ b/demos/button/toolbar.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Toolbar</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.button.js"></script> @@ -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..2599cd145 100644 --- a/demos/datepicker/alt-field.html +++ b/demos/datepicker/alt-field.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Populate alternate field</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..8e170ad8e 100644 --- a/demos/datepicker/animation.html +++ b/demos/datepicker/animation.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Animations</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> @@ -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..b0b4650bb 100644 --- a/demos/datepicker/buttonbar.html +++ b/demos/datepicker/buttonbar.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display button bar</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..b50a92172 100644 --- a/demos/datepicker/date-formats.html +++ b/demos/datepicker/date-formats.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Format date</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..284b6b3be 100644 --- a/demos/datepicker/date-range.html +++ b/demos/datepicker/date-range.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Select a Date Range</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..5a51a538c 100644 --- a/demos/datepicker/default.html +++ b/demos/datepicker/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..ea4600a6f 100644 --- a/demos/datepicker/dropdown-month-year.html +++ b/demos/datepicker/dropdown-month-year.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display month & year menus</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..9fca9b790 100644 --- a/demos/datepicker/icon-trigger.html +++ b/demos/datepicker/icon-trigger.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Icon trigger</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..ec01533ee 100644 --- a/demos/datepicker/inline.html +++ b/demos/datepicker/inline.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display inline</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..4fd7a1c46 100644 --- a/demos/datepicker/localization.html +++ b/demos/datepicker/localization.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Localize calendar</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..cc28a7583 100644 --- a/demos/datepicker/min-max.html +++ b/demos/datepicker/min-max.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Restrict date range</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..1a8b7e0eb 100644 --- a/demos/datepicker/multiple-calendars.html +++ b/demos/datepicker/multiple-calendars.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display multiple months</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..e735385ec 100644 --- a/demos/datepicker/other-months.html +++ b/demos/datepicker/other-months.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Dates in other months</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..931e85be8 100644 --- a/demos/datepicker/show-week.html +++ b/demos/datepicker/show-week.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Show week of the year</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.datepicker.js"></script> @@ -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..8a27150de 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Animation</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.bgiframe-2.1.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..5dcb1a05c 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.bgiframe-2.1.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..cca3b296d 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Modal confirmation</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.bgiframe-2.1.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..48452f862 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Modal form</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.bgiframe-2.1.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..d44331017 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Modal message</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.bgiframe-2.1.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..2b1ac2574 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Basic modal</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.bgiframe-2.1.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..0bbcdf147 100644 --- a/demos/draggable/constrain-movement.html +++ b/demos/draggable/constrain-movement.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Constrain movement</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..5ee09386c 100644 --- a/demos/draggable/cursor-style.html +++ b/demos/draggable/cursor-style.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Cursor style</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..9d9d1a8ec 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..fe74e908f 100644 --- a/demos/draggable/delay-start.html +++ b/demos/draggable/delay-start.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Delay start</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..9c2f2c046 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Events</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..b2863bff6 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Handles</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..b898d632a 100644 --- a/demos/draggable/revert.html +++ b/demos/draggable/revert.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Revert position</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..c4498096c 100644 --- a/demos/draggable/scroll.html +++ b/demos/draggable/scroll.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Auto-scroll</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..33feb68d4 100644 --- a/demos/draggable/snap-to.html +++ b/demos/draggable/snap-to.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Snap to element or grid</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..55bfd591f 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable + Sortable</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..d0b058366 100644 --- a/demos/draggable/visual-feedback.html +++ b/demos/draggable/visual-feedback.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Visual feedback</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..455e8bd5f 100644 --- a/demos/droppable/accepted-elements.html +++ b/demos/droppable/accepted-elements.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Accept</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..381098b4b 100644 --- a/demos/droppable/default.html +++ b/demos/droppable/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..315473761 100644 --- a/demos/droppable/photo-manager.html +++ b/demos/droppable/photo-manager.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Simple photo manager</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..4aae2fcab 100644 --- a/demos/droppable/propagation.html +++ b/demos/droppable/propagation.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Prevent propagation</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..1d2ce2aa7 100644 --- a/demos/droppable/revert.html +++ b/demos/droppable/revert.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Revert draggable position</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..60468aab7 100644 --- a/demos/droppable/shopping-cart.html +++ b/demos/droppable/shopping-cart.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Shopping Cart Demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..08f96ed2d 100644 --- a/demos/droppable/visual-feedback.html +++ b/demos/droppable/visual-feedback.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Visual feedback</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..455fb1f34 100644 --- a/demos/effect/default.html +++ b/demos/effect/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Effect demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..4ccc9691b 100644 --- a/demos/effect/easing.html +++ b/demos/effect/easing.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Easing demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <link rel="stylesheet" href="../demos.css"> <style> @@ -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..2ca1587e2 100644 --- a/demos/hide/default.html +++ b/demos/hide/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Hide Demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..27b1f249c 100644 --- a/demos/menu/default.html +++ b/demos/menu/default.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Menu - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.menu.js"></script> @@ -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..c2bb307ba 100644 --- a/demos/menu/navigationmenu.html +++ b/demos/menu/navigationmenu.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Menu - Navigation Menu</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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 9a3779733..4f34b98c2 100644 --- a/demos/menu/topalignmenu.html +++ b/demos/menu/topalignmenu.html @@ -5,7 +5,7 @@ <title>Menu Demo: Top-aligned Menu</title> <link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -80,5 +80,8 @@ </li> </ul> +<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> +</div> </body> </html> diff --git a/demos/position/cycler.html b/demos/position/cycler.html index 16542b962..dc3bbc86e 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -4,11 +4,22 @@ <meta charset="utf-8"> <title>jQuery UI Position - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <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..223788b1f 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Position - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..df82d047e 100644 --- a/demos/progressbar/animated.html +++ b/demos/progressbar/animated.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Progressbar - Animated</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.progressbar.js"></script> @@ -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..a814adbe2 100644 --- a/demos/progressbar/default.html +++ b/demos/progressbar/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Progressbar - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.progressbar.js"></script> @@ -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..d7209fbbc 100644 --- a/demos/progressbar/resize.html +++ b/demos/progressbar/resize.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Progressbar - Resizable</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..6cdcac62b 100644 --- a/demos/removeClass/default.html +++ b/demos/removeClass/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - removeClass Demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <link rel="stylesheet" href="../demos.css"> <style> @@ -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..c5373b45d 100644 --- a/demos/resizable/animate.html +++ b/demos/resizable/animate.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Animate</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..ad853073f 100644 --- a/demos/resizable/aspect-ratio.html +++ b/demos/resizable/aspect-ratio.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Preserve aspect ratio</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..562a1c29b 100644 --- a/demos/resizable/constrain-area.html +++ b/demos/resizable/constrain-area.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Constrain resize area</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..17388197d 100644 --- a/demos/resizable/default.html +++ b/demos/resizable/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..2cf2245e7 100644 --- a/demos/resizable/delay-start.html +++ b/demos/resizable/delay-start.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Delay start</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..57d284cc2 100644 --- a/demos/resizable/helper.html +++ b/demos/resizable/helper.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Helper</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..301d93c20 100644 --- a/demos/resizable/max-min.html +++ b/demos/resizable/max-min.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Maximum / minimum size</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..4b973efac 100644 --- a/demos/resizable/snap-to-grid.html +++ b/demos/resizable/snap-to-grid.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Snap to grid</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..77812df3d 100644 --- a/demos/resizable/synchronous-resize.html +++ b/demos/resizable/synchronous-resize.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Synchronous resize</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..c6ac48806 100644 --- a/demos/resizable/textarea.html +++ b/demos/resizable/textarea.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Textarea</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..3577c7556 100644 --- a/demos/resizable/visual-feedback.html +++ b/demos/resizable/visual-feedback.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Visual feedback</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..da39ffe84 100644 --- a/demos/selectable/default.html +++ b/demos/selectable/default.html @@ -1,16 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Selectable - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..221490f88 100644 --- a/demos/selectable/display-grid.html +++ b/demos/selectable/display-grid.html @@ -1,21 +1,21 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Selectable - Display as grid</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..09935b130 100644 --- a/demos/selectable/serialize.html +++ b/demos/selectable/serialize.html @@ -1,16 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Selectable - Serialize</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..207cd0ece 100644 --- a/demos/show/default.html +++ b/demos/show/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - Show Demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..db0339ff3 100644 --- a/demos/slider/colorpicker.html +++ b/demos/slider/colorpicker.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Colorpicker</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..ff30e41e4 100644 --- a/demos/slider/default.html +++ b/demos/slider/default.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8" > <title>jQuery UI Slider - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..d866261b5 100644 --- a/demos/slider/hotelrooms.html +++ b/demos/slider/hotelrooms.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed minimum</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..5a529b287 100644 --- a/demos/slider/multiple-vertical.html +++ b/demos/slider/multiple-vertical.html @@ -1,17 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Multiple sliders</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..8f6da21da 100644 --- a/demos/slider/range-vertical.html +++ b/demos/slider/range-vertical.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Vertical range slider</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..052c2f5a8 100644 --- a/demos/slider/range.html +++ b/demos/slider/range.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range slider</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..8107c66d2 100644 --- a/demos/slider/rangemax.html +++ b/demos/slider/rangemax.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed maximum</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..5a0bed662 100644 --- a/demos/slider/rangemin.html +++ b/demos/slider/rangemin.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed minimum</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..4ca49b9c2 100644 --- a/demos/slider/side-scroll.html +++ b/demos/slider/side-scroll.html @@ -1,17 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Slider scrollbar</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..45e93330d 100644 --- a/demos/slider/slider-vertical.html +++ b/demos/slider/slider-vertical.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Vertical slider</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..7f1ec6314 100644 --- a/demos/slider/steps.html +++ b/demos/slider/steps.html @@ -1,18 +1,15 @@ -<!DOCTYPE html> +<!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="../../jquery-1.8.2.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.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..92ebb7e6f 100644 --- a/demos/sortable/connect-lists-through-tabs.html +++ b/demos/sortable/connect-lists-through-tabs.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Connect lists with Tabs</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..1ed6165da 100644 --- a/demos/sortable/connect-lists.html +++ b/demos/sortable/connect-lists.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Connect lists</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..9fc4afabe 100644 --- a/demos/sortable/default.html +++ b/demos/sortable/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..3afe83ae0 100644 --- a/demos/sortable/delay-start.html +++ b/demos/sortable/delay-start.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Delay start</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..e471a58b0 100644 --- a/demos/sortable/display-grid.html +++ b/demos/sortable/display-grid.html @@ -1,17 +1,17 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Display as grid</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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.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..4d5d425b7 100644 --- a/demos/sortable/empty-lists.html +++ b/demos/sortable/empty-lists.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Handle empty lists</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..7ecc616ae 100644 --- a/demos/sortable/items.html +++ b/demos/sortable/items.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Include / exclude items</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..158226672 100644 --- a/demos/sortable/placeholder.html +++ b/demos/sortable/placeholder.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Drop placeholder</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..545c4df59 100644 --- a/demos/sortable/portlets.html +++ b/demos/sortable/portlets.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Portlets</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..f15511ab7 100644 --- a/demos/spinner/currency.html +++ b/demos/spinner/currency.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.mousewheel.js"></script> <script src="../../external/globalize.js"></script> <script src="../../external/globalize.culture.de-DE.js"></script> @@ -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..3ab3ea073 100644 --- a/demos/spinner/decimal.html +++ b/demos/spinner/decimal.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Decimal</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.mousewheel.js"></script> <script src="../../external/globalize.js"></script> <script src="../../external/globalize.culture.de-DE.js"></script> @@ -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..a79f4d45d 100644 --- a/demos/spinner/default.html +++ b/demos/spinner/default.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.mousewheel.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..4a662b42e 100644 --- a/demos/spinner/latlong.html +++ b/demos/spinner/latlong.html @@ -5,7 +5,7 @@ <title>jQuery UI Spinner - Map</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.mousewheel.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..6889f5feb 100644 --- a/demos/spinner/overflow.html +++ b/demos/spinner/overflow.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Overflow</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.mousewheel.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..155a04fe9 100644 --- a/demos/spinner/time.html +++ b/demos/spinner/time.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Spinner - Time</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../external/jquery.mousewheel.js"></script> <script src="../../external/globalize.js"></script> <script src="../../external/globalize.culture.de-DE.js"></script> @@ -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..a2162103b 100644 --- a/demos/switchClass/default.html +++ b/demos/switchClass/default.html @@ -1,16 +1,16 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - switchClass Demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <link rel="stylesheet" href="../demos.css"> <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..a7146c7af 100644 --- a/demos/tabs/ajax.html +++ b/demos/tabs/ajax.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Content via Ajax</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -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..1618166d3 100644 --- a/demos/tabs/bottom.html +++ b/demos/tabs/bottom.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Tabs at bottom</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -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..7faac574d 100644 --- a/demos/tabs/collapsible.html +++ b/demos/tabs/collapsible.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Collapse content</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -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..5b95757ea 100644 --- a/demos/tabs/default.html +++ b/demos/tabs/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -17,8 +17,6 @@ </head> <body> -<div class="demo"> - <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> @@ -37,13 +35,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..67ed3d304 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Simple manipulation</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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..631fd84c0 100644 --- a/demos/tabs/mouseover.html +++ b/demos/tabs/mouseover.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Open on mouseover</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -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..59a0ba963 100644 --- a/demos/tabs/sortable.html +++ b/demos/tabs/sortable.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Sortable</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..b68ec50c8 100644 --- a/demos/tabs/vertical.html +++ b/demos/tabs/vertical.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Tabs - Vertical Tabs functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script> @@ -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..6801d9deb 100644 --- a/demos/toggle/default.html +++ b/demos/toggle/default.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Effects - Toggle Demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.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> @@ -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..073b1b11f 100644 --- a/demos/toggleClass/default.html +++ b/demos/toggleClass/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Effects - toggleClass Demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.effect.js"></script> <link rel="stylesheet" href="../demos.css"> <style> @@ -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..774a9d2a7 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Tooltip - Custom animation demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..93172524a 100644 --- a/demos/tooltip/custom-content.html +++ b/demos/tooltip/custom-content.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Tooltip - Custom content</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..f18522e54 100644 --- a/demos/tooltip/custom-style.html +++ b/demos/tooltip/custom-style.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Tooltip - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..8392e5504 100644 --- a/demos/tooltip/default.html +++ b/demos/tooltip/default.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Tooltip - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..da3affa2d 100644 --- a/demos/tooltip/forms.html +++ b/demos/tooltip/forms.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Tooltip - Default demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..1bb1c773a 100644 --- a/demos/tooltip/tracking.html +++ b/demos/tooltip/tracking.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Tooltip - Track the mouse</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..8be3c52ef 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -4,7 +4,7 @@ <meta charset="utf-8"> <title>jQuery UI Tooltip - Video Player demo</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.position.js"></script> @@ -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..5959bccdb 100644 --- a/demos/widget/default.html +++ b/demos/widget/default.html @@ -1,10 +1,10 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Widget - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> - <script src="../../jquery-1.8.0.js"></script> + <script src="../../jquery-1.8.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> @@ -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,9 @@ <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> |