diff options
Diffstat (limited to 'demos')
181 files changed, 3765 insertions, 3056 deletions
diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html index 6618baff2..8e27e2125 100644 --- a/demos/accordion/collapsible.html +++ b/demos/accordion/collapsible.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Collapse content</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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({ collapsible: true }); }); @@ -50,10 +50,7 @@ <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 --> </body> diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html index c81fb3120..7dff971f6 100644 --- a/demos/accordion/custom-icons.html +++ b/demos/accordion/custom-icons.html @@ -1,28 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Customize icons</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { var icons = { header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circle-arrow-s" }; - $("#accordion").accordion({ + $( "#accordion" ).accordion({ icons: icons }); - $("#toggle").button().toggle(function() { - $("#accordion").accordion("option", "icons", false); + $( "#toggle" ).button().toggle(function() { + $( "#accordion" ).accordion( "option", "icons", false ); }, function() { - $("#accordion").accordion("option", "icons", icons); + $( "#accordion" ).accordion( "option", "icons", icons ); }); }); </script> @@ -62,9 +62,7 @@ <div class="demo-description"> - <p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and selected (open) state. Use any class from the UI CSS framework, or create custom classes with background images.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/accordion/default.html b/demos/accordion/default.html index 2eb93dd7a..974dc0569 100644 --- a/demos/accordion/default.html +++ b/demos/accordion/default.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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(); }); </script> </head> diff --git a/demos/accordion/fillspace.html b/demos/accordion/fillspace.html index 77507821c..f874feb39 100644 --- a/demos/accordion/fillspace.html +++ b/demos/accordion/fillspace.html @@ -1,28 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Fill space</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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"> + <script> $(function() { - $("#accordion").accordion({ + $( "#accordion" ).accordion({ fillSpace: true }); }); $(function() { - $("#accordionResizer").resizable({ + $( "#accordionResizer" ).resizable({ + minHeight: 140, resize: function() { - $("#accordion").accordion("resize"); - }, - minHeight: 140 + $( "#accordion" ).accordion( "resize" ); + } }); }); </script> @@ -69,11 +69,8 @@ <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 boolean <code>fillSpace</code> option to true, and the script will automatically set the dimensions of the accordion to the height of its parent container. The accordion will also resize with its container if the container is <code>resizable</code>.</p> - </div><!-- End demo-description --> - </body> </html> diff --git a/demos/accordion/hoverintent.html b/demos/accordion/hoverintent.html new file mode 100644 index 000000000..6633408b6 --- /dev/null +++ b/demos/accordion/hoverintent.html @@ -0,0 +1,134 @@ +<!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.4.4.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({ + event: "click hoverintent" + }); + }); + + var cfg = ($.hoverintent = { + sensitivity: 7, + interval: 100 + }); + + $.event.special.hoverintent = { + setup: function() { + $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler ); + }, + teardown: function() { + $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler ); + }, + handler: function( event ) { + event.type = "hoverintent"; + var self = this, + args = arguments, + target = $( event.target ), + cX, cY, pX, pY; + + function track( event ) { + cX = event.pageX; + cY = event.pageY; + }; + pX = event.pageX; + pY = event.pageY; + function clear() { + target + .unbind( "mousemove", track ) + .unbind( "mouseout", arguments.callee ); + clearTimeout( timeout ); + } + function handler() { + if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) { + clear(); + jQuery.event.handle.apply( self, args ); + } else { + pX = cX; + pY = cY; + timeout = setTimeout( handler, cfg.interval ); + } + } + var timeout = setTimeout( handler, cfg.interval ); + target.mousemove( track ).mouseout( clear ); + return true; + } + }; + </script> +</head> +<body> + +<div class="demo"> + +<div id="accordion"> + <h3><a href="#">Section 1</a></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><a href="#">Section 2</a></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><a href="#">Section 3</a></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><a href="#">Section 4</a></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><!-- End demo --> + +<div class="demo-description"> +<p> +Click headers to expand/collapse content that is broken into logical sections, much like tabs. +Optionally, toggle sections open/closed on mouseover. +</p> +<p> +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 --> + +</body> +</html> diff --git a/demos/accordion/index.html b/demos/accordion/index.html index de3751128..d107dd881 100644 --- a/demos/accordion/index.html +++ b/demos/accordion/index.html @@ -1,22 +1,25 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <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="mouseover.html">Open on mouseover</a></li> - <li><a href="custom-icons.html">Customize icons</a></li> - <li><a href="sortable.html">Sortable</a></li> - </ul> - </div> + +<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="mouseover.html">Open on mouseover</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> + </body> </html> diff --git a/demos/accordion/mouseover.html b/demos/accordion/mouseover.html index 374fc7536..836f35530 100644 --- a/demos/accordion/mouseover.html +++ b/demos/accordion/mouseover.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Open on mouseover</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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: "mouseover" }); }); @@ -50,9 +50,7 @@ <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> - </div><!-- End demo-description --> </body> diff --git a/demos/accordion/no-auto-height.html b/demos/accordion/no-auto-height.html index 5cd89c61c..96183c92c 100644 --- a/demos/accordion/no-auto-height.html +++ b/demos/accordion/no-auto-height.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Accordion - No Auto Height</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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({ autoHeight: false, navigation: true }); @@ -52,11 +52,8 @@ <div class="demo-description"> - <p>Setting <code>autoHeight: false</code> allows to accordion panels to keep their native height.</p> - <p>In addition, the <code>navigation</code> option is enabled, opening the panel based on the current location, eg. no-auto-height.html#panel2 would open the second panel on page load. It also finds anchors within the content, so #othercontent will open the third section, as it contains a link with that href.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/accordion/sortable.html b/demos/accordion/sortable.html index 80487290f..e0925c4fc 100644 --- a/demos/accordion/sortable.html +++ b/demos/accordion/sortable.html @@ -1,35 +1,37 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Sortable</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { var stop = false; - $("#accordion h3").click(function(event) { - if (stop) { + $( "#accordion h3" ).click(function( event ) { + if ( stop ) { event.stopImmediatePropagation(); event.preventDefault(); stop = false; } }); - $("#accordion").accordion({ - header: "> div > h3" - }).sortable({ - axis: "y", - handle: "h3", - stop: function(event, ui) { - stop = true; - } - }); + $( "#accordion" ) + .accordion({ + header: "> div > h3" + }) + .sortable({ + axis: "y", + handle: "h3", + stop: function() { + stop = true; + } + }); }); </script> </head> @@ -74,9 +76,7 @@ <div class="demo-description"> - <p>Drag the header to re-order panels.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/addClass/default.html b/demos/addClass/default.html index 1bb33b362..cb1d7408d 100644 --- a/demos/addClass/default.html +++ b/demos/addClass/default.html @@ -1,29 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effects - addClass Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} + <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.4.4.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } - #effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#button").click(function() { - $('#effect').addClass('newClass', 1000, callback); + $( "#button" ).click(function() { + $( "#effect" ).addClass( "newClass", 1000, callback ); return false; }); - - function callback(){ - setTimeout(function(){ - $('#effect').removeClass('newClass'); - }, 1500); + + function callback() { + setTimeout(function() { + $( "#effect" ).removeClass( "newClass" ); + }, 1500 ); } }); </script> @@ -42,10 +42,10 @@ </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 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 --> </body> diff --git a/demos/addClass/index.html b/demos/addClass/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/addClass/index.html +++ b/demos/addClass/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/animate/default.html b/demos/animate/default.html index 21afff719..3c5725a81 100644 --- a/demos/animate/default.html +++ b/demos/animate/default.html @@ -1,26 +1,34 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effects - Animate Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} + <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.4.4.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#button").toggle( + $( "#button" ).toggle( function() { - $("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000); + $( "#effect" ).animate({ + backgroundColor: "#aa0000", + color: "#fff", + width: 500 + }, 1000 ); }, function() { - $("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000); + $( "#effect" ).animate({ + backgroundColor: "#fff", + color: "#000", + width: 240 + }, 1000 ); } ); }); @@ -43,10 +51,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/animate/index.html b/demos/animate/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/animate/index.html +++ b/demos/animate/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html index 2a2ac2f48..163c969dd 100644 --- a/demos/autocomplete/categories.html +++ b/demos/autocomplete/categories.html @@ -1,26 +1,26 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Custom Data Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Categories</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> .ui-autocomplete-category { - font-weight:bold; - padding:.2em .4em; - margin:.8em 0 .2em; - line-height:1.5; + font-weight: bold; + padding: .2em .4em; + margin: .8em 0 .2em; + line-height: 1.5; } </style> - <script type="text/javascript"> - $.widget("custom.catcomplete", $.ui.autocomplete, { + <script> + $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; @@ -34,7 +34,7 @@ } }); </script> - <script type="text/javascript"> + <script> $(function() { var data = [ { label: "anders", category: "" }, @@ -48,7 +48,7 @@ { label: "andreas johnson", category: "People" } ]; - $('#search').catcomplete({ + $( "#search" ).catcomplete({ delay: 0, source: data }); @@ -62,10 +62,10 @@ <input id="search" /> </div><!-- End demo --> + + <div class="demo-description"> -<p> - A categorized search result. Try typing "a" or "n". -</p> +<p>A categorized search result. Try typing "a" or "n".</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 0ca32775b..f74f0f106 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -1,90 +1,126 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Combobox Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - /* TODO shouldn't be necessary */ - .ui-button { margin-left: -1px; } - .ui-button-icon-only .ui-button-text { padding: 0.35em; } - .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Combobox</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-button { margin-left: -1px; } + .ui-button-icon-only .ui-button-text { padding: 0.35em; } + .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } </style> - <script type="text/javascript"> - (function($) { - $.widget("ui.combobox", { + <script> + (function( $ ) { + $.widget( "ui.combobox", { _create: function() { - var self = this; - var select = this.element.hide(); - var input = $("<input>") - .insertAfter(select) + var self = this, + select = this.element.hide(), + selected = select.children( ":selected" ), + value = selected.val() ? selected.text() : ""; + var input = this.input = $( "<input>" ) + .insertAfter( select ) + .val( value ) .autocomplete({ - source: function(request, response) { - var matcher = new RegExp(request.term, "i"); - response(select.children("option").map(function() { - var text = $(this).text(); - if (this.value && (!request.term || matcher.test(text))) + delay: 0, + minLength: 0, + source: function( request, response ) { + var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); + response( select.children( "option" ).map(function() { + var text = $( this ).text(); + if ( this.value && ( !request.term || matcher.test(text) ) ) return { - id: this.value, - label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), - value: text + label: text.replace( + new RegExp( + "(?![^&;]+;)(?!<[^<>]*)(" + + $.ui.autocomplete.escapeRegex(request.term) + + ")(?![^<>]*>)(?![^&;]+;)", "gi" + ), "<strong>$1</strong>" ), + value: text, + option: this }; - })); + }) ); }, - delay: 0, - change: function(event, ui) { - if (!ui.item) { - // remove invalid value, as it didn't match anything - $(this).val(""); - return false; - } - select.val(ui.item.id); - self._trigger("selected", event, { - item: select.find("[value='" + ui.item.id + "']") + select: function( event, ui ) { + ui.item.option.selected = true; + self._trigger( "selected", event, { + item: ui.item.option }); - }, - minLength: 0 + change: function( event, ui ) { + if ( !ui.item ) { + var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ), + valid = false; + select.children( "option" ).each(function() { + if ( $( this ).text().match( matcher ) ) { + this.selected = valid = true; + return false; + } + }); + if ( !valid ) { + // remove invalid value, as it didn't match anything + $( this ).val( "" ); + select.val( "" ); + input.data( "autocomplete" ).term = ""; + return false; + } + } + } + }) + .addClass( "ui-widget ui-widget-content ui-corner-left" ); + + input.data( "autocomplete" )._renderItem = function( ul, item ) { + return $( "<li></li>" ) + .data( "item.autocomplete", item ) + .append( "<a>" + item.label + "</a>" ) + .appendTo( ul ); + }; + + this.button = $( "<button type='button'> </button>" ) + .attr( "tabIndex", -1 ) + .attr( "title", "Show All Items" ) + .insertAfter( input ) + .button({ + icons: { + primary: "ui-icon-triangle-1-s" + }, + text: false }) - .addClass("ui-widget ui-widget-content ui-corner-left"); - $("<button> </button>") - .attr("tabIndex", -1) - .attr("title", "Show All Items") - .insertAfter(input) - .button({ - icons: { - primary: "ui-icon-triangle-1-s" - }, - text: false - }).removeClass("ui-corner-all") - .addClass("ui-corner-right ui-button-icon") - .click(function() { - // close if already visible - if (input.autocomplete("widget").is(":visible")) { - input.autocomplete("close"); - return; - } - // pass empty string as value to search for, displaying all results - input.autocomplete("search", ""); - input.focus(); - }); + .removeClass( "ui-corner-all" ) + .addClass( "ui-corner-right ui-button-icon" ) + .click(function() { + // close if already visible + if ( input.autocomplete( "widget" ).is( ":visible" ) ) { + input.autocomplete( "close" ); + return; + } + + // pass empty string as value to search for, displaying all results + input.autocomplete( "search", "" ); + input.focus(); + }); + }, + + destroy: function() { + this.input.remove(); + this.button.remove(); + this.element.show(); + $.Widget.prototype.destroy.call( this ); } }); + })( jQuery ); - })(jQuery); - $(function() { - $("#combobox").combobox(); - $("#toggle").click(function() { - $("#combobox").toggle(); + $( "#combobox" ).combobox(); + $( "#toggle" ).click(function() { + $( "#combobox" ).toggle(); }); }); </script> @@ -97,32 +133,39 @@ <label>Your preferred programming language: </label> <select id="combobox"> <option value="">Select one...</option> - <option value="a">asp</option> - <option value="c">c</option> - <option value="cpp">c++</option> - <option value="cf">coldfusion</option> - <option value="g">groovy</option> - <option value="h">haskell</option> - <option value="j">java</option> - <option value="js">javascript</option> - <option value="p1">perl</option> - <option value="p2">php</option> - <option value="p3">python</option> - <option value="r">ruby</option> - <option value="s">scala</option> + <option value="ActionScript">ActionScript</option> + <option value="AppleScript">AppleScript</option> + <option value="Asp">Asp</option> + <option value="BASIC">BASIC</option> + <option value="C">C</option> + <option value="C++">C++</option> + <option value="Clojure">Clojure</option> + <option value="COBOL">COBOL</option> + <option value="ColdFusion">ColdFusion</option> + <option value="Erlang">Erlang</option> + <option value="Fortran">Fortran</option> + <option value="Groovy">Groovy</option> + <option value="Haskell">Haskell</option> + <option value="Java">Java</option> + <option value="JavaScript">JavaScript</option> + <option value="Lisp">Lisp</option> + <option value="Perl">Perl</option> + <option value="PHP">PHP</option> + <option value="Python">Python</option> + <option value="Ruby">Ruby</option> + <option value="Scala">Scala</option> + <option value="Scheme">Scheme</option> </select> </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>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> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index 92263332d..8a3a0b235 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Custom Data Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #project-label { display: block; font-weight: bold; @@ -27,42 +27,42 @@ padding: 0; } </style> - <script type="text/javascript"> + <script> $(function() { var projects = [ { - value: 'jquery', - label: 'jQuery', - desc: 'the write less, do more, JavaScript library', - icon: 'jquery_32x32.png' + value: "jquery", + label: "jQuery", + desc: "the write less, do more, JavaScript library", + icon: "jquery_32x32.png" }, { - value: 'jquery-ui', - label: 'jQuery UI', - desc: 'the official user interface library for jQuery', - icon: 'jqueryui_32x32.png' + value: "jquery-ui", + label: "jQuery UI", + desc: "the official user interface library for jQuery", + icon: "jqueryui_32x32.png" }, { - value: 'sizzlejs', - label: 'Sizzle JS', - desc: 'a pure-JavaScript CSS selector engine', - icon: 'sizzlejs_32x32.png' + value: "sizzlejs", + label: "Sizzle JS", + desc: "a pure-JavaScript CSS selector engine", + icon: "sizzlejs_32x32.png" } ]; - - $('#project').autocomplete({ + + $( "#project" ).autocomplete({ minLength: 0, source: projects, - focus: function(event, ui) { - $('#project').val(ui.item.label); + focus: function( event, ui ) { + $( "#project" ).val( ui.item.label ); return false; }, - select: function(event, ui) { - $('#project').val(ui.item.label); - $('#project-id').val(ui.item.value); - $('#project-description').html(ui.item.desc); - $('#project-icon').attr('src', '../images/' + ui.item.icon); - + select: function( event, ui ) { + $( "#project" ).val( ui.item.label ); + $( "#project-id" ).val( ui.item.value ); + $( "#project-description" ).html( ui.item.desc ); + $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); + return false; } }) @@ -79,19 +79,17 @@ <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"/> + <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/> <input id="project"/> <input type="hidden" id="project-id"/> <p id="project-description"></p> </div><!-- End demo --> + + <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> +<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 --> </body> diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html index 4d476d9a6..9de61467f 100644 --- a/demos/autocomplete/default.html +++ b/demos/autocomplete/default.html @@ -1,20 +1,43 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Default Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; - $("#tags").autocomplete({ + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + $( "#tags" ).autocomplete({ source: availableTags }); }); @@ -31,13 +54,11 @@ </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> +<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 --> </body> diff --git a/demos/autocomplete/folding.html b/demos/autocomplete/folding.html index 5b665237e..cea358a8d 100644 --- a/demos/autocomplete/folding.html +++ b/demos/autocomplete/folding.html @@ -1,26 +1,26 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Accent Folding Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { - 'á':'a', - 'ö':'o' + "á": "a", + "ö": "o" }; var normalize = function( term ) { - var ret = ''; + var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } @@ -52,13 +52,11 @@ </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> +<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 --> </body> diff --git a/demos/autocomplete/images/jquery_32x32.png b/demos/autocomplete/images/jquery_32x32.png Binary files differnew file mode 100644 index 000000000..9312f02d5 --- /dev/null +++ b/demos/autocomplete/images/jquery_32x32.png diff --git a/demos/autocomplete/images/jqueryui_32x32.png b/demos/autocomplete/images/jqueryui_32x32.png Binary files differnew file mode 100644 index 000000000..e003d16c1 --- /dev/null +++ b/demos/autocomplete/images/jqueryui_32x32.png diff --git a/demos/autocomplete/images/sizzlejs_32x32.png b/demos/autocomplete/images/sizzlejs_32x32.png Binary files differnew file mode 100644 index 000000000..4ce0704d1 --- /dev/null +++ b/demos/autocomplete/images/sizzlejs_32x32.png diff --git a/demos/autocomplete/images/transparent_1x1.png b/demos/autocomplete/images/transparent_1x1.png Binary files differnew file mode 100644 index 000000000..c2da5b889 --- /dev/null +++ b/demos/autocomplete/images/transparent_1x1.png diff --git a/demos/autocomplete/images/ui-anim_basic_16x16.gif b/demos/autocomplete/images/ui-anim_basic_16x16.gif Binary files differnew file mode 100644 index 000000000..084ecb879 --- /dev/null +++ b/demos/autocomplete/images/ui-anim_basic_16x16.gif diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index ba96d994e..77f801996 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Autocomplete Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> <div class="demos-nav"> @@ -13,10 +13,12 @@ <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> diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html new file mode 100644 index 000000000..7e0e0f903 --- /dev/null +++ b/demos/autocomplete/maxheight.html @@ -0,0 +1,79 @@ +<!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.4.4.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> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-autocomplete { + max-height: 100px; + overflow-y: auto; + /* prevent horizontal scrollbar */ + overflow-x: hidden; + /* add padding to account for vertical scrollbar */ + padding-right: 20px; + } + /* IE 6 doesn't support max-height + * we use height instead, but this forces the menu to always be this tall + */ + * html .ui-autocomplete { + height: 100px; + } + </style> + <script> + $(function() { + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + $( "#tags" ).autocomplete({ + source: availableTags + }); + }); + </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>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 --> + +</body> +</html> diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index 5855ce0fb..f0ea7aafd 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -1,54 +1,66 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete multiple demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> +<<<<<<< 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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> + <script> $(function() { - function split(val) { - return val.split(/,\s*/); + function split( val ) { + return val.split( /,\s*/ ); } - function extractLast(term) { - return split(term).pop(); + function extractLast( term ) { + return split( term ).pop(); } - - $("#birds").autocomplete({ - source: function(request, response) { - $.getJSON("search.php", { - term: extractLast(request.term) - }, response); - }, - search: function() { - // custom minLength - var term = extractLast(this.value); - if (term.length < 2) { + + $( "#birds" ) + // don't navigate away from the field on tab when selecting an item + .bind( "keydown", function( event ) { + if ( event.keyCode === $.ui.keyCode.TAB && + $( this ).data( "autocomplete" ).menu.active ) { + event.preventDefault(); + } + }) + .autocomplete({ + source: function( request, response ) { + $.getJSON( "search.php", { + term: extractLast( request.term ) + }, response ); + }, + search: function() { + // custom minLength + var term = extractLast( this.value ); + if ( term.length < 2 ) { + return false; + } + }, + focus: function() { + // prevent value inserted on focus + return false; + }, + select: function( event, ui ) { + var terms = split( this.value ); + // remove the current input + terms.pop(); + // add the selected item + terms.push( ui.item.value ); + // add placeholder to get the comma-and-space at the end + terms.push( "" ); + this.value = terms.join( ", " ); return false; } - }, - focus: function() { - // prevent value inserted on focus - return false; - }, - select: function(event, ui) { - var terms = split( this.value ); - // remove the current input - terms.pop(); - // add the selected item - terms.push( ui.item.value ); - // add placeholder to get the comma-and-space at the end - terms.push(""); - this.value = terms.join(", "); - return false; - } - }); + }); }); </script> </head> @@ -63,13 +75,11 @@ </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> +<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 --> </body> diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html index fe353255d..0b8e14478 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -1,48 +1,80 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete multiple demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; - function split(val) { - return val.split(/,\s*/); + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + function split( val ) { + return val.split( /,\s*/ ); } - function extractLast(term) { - return split(term).pop(); + function extractLast( term ) { + return split( term ).pop(); } - - $("#tags").autocomplete({ - minLength: 0, - source: function(request, response) { - // delegate back to autocomplete, but extract the last term - response($.ui.autocomplete.filter(availableTags, extractLast(request.term))); - }, - focus: function() { - // prevent value inserted on focus - return false; - }, - select: function(event, ui) { - var terms = split( this.value ); - // remove the current input - terms.pop(); - // add the selected item - terms.push( ui.item.value ); - // add placeholder to get the comma-and-space at the end - terms.push(""); - this.value = terms.join(", "); - return false; - } - }); + + $( "#tags" ) + // don't navigate away from the field on tab when selecting an item + .bind( "keydown", function( event ) { + if ( event.keyCode === $.ui.keyCode.TAB && + $( this ).data( "autocomplete" ).menu.active ) { + event.preventDefault(); + } + }) + .autocomplete({ + minLength: 0, + source: function( request, response ) { + // delegate back to autocomplete, but extract the last term + response( $.ui.autocomplete.filter( + availableTags, extractLast( request.term ) ) ); + }, + focus: function() { + // prevent value inserted on focus + return false; + }, + select: function( event, ui ) { + var terms = split( this.value ); + // remove the current input + terms.pop(); + // add the selected item + terms.push( ui.item.value ); + // add placeholder to get the comma-and-space at the end + terms.push( "" ); + this.value = terms.join( ", " ); + return false; + } + }); }); </script> </head> @@ -57,13 +89,11 @@ </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> +<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 --> </body> diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index 6de227d33..986e9f0f0 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -1,25 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote JSONP datasource demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + #city { width: 25em; } + </style> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); + function log( message ) { + $( "<div/>" ).text( message ).prependTo( "#log" ); + $( "#log" ).attr( "scrollTop", 0 ); } - - $("#city").autocomplete({ - source: function(request, response) { + + $( "#city" ).autocomplete({ + source: function( request, response ) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", @@ -29,33 +33,31 @@ maxRows: 12, name_startsWith: request.term }, - success: function(data) { - response($.map(data.geonames, function(item) { + success: function( data ) { + response( $.map( data.geonames, function( item ) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } - })) + })); } - }) + }); }, minLength: 2, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value); + select: function( event, ui ) { + log( ui.item ? + "Selected: " + ui.item.label : + "Nothing selected, input was " + this.value); }, open: function() { - $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); + $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { - $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); + $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script> - <style> - .ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; } - #city { width: 25em; } - </style> </head> <body> @@ -74,13 +76,11 @@ </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> +<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 --> </body> diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index 664a9989e..a6b02f255 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -1,48 +1,38 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote with caching demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); - } - - var cache = {}; - $("#birds").autocomplete({ - source: function(request, response) { - if (cache.term == request.term && cache.content) { - response(cache.content); - return; - } - if (new RegExp(cache.term).test(request.term) && cache.content && cache.content.length < 13) { - response($.ui.autocomplete.filter(cache.content, request.term)); + var cache = {}, + lastXhr; + $( "#birds" ).autocomplete({ + minLength: 2, + source: function( request, response ) { + var term = request.term; + if ( term in cache ) { + response( cache[ term ] ); return; } - $.ajax({ - url: "search.php", - dataType: "json", - data: request, - success: function(data) { - cache.term = request.term; - cache.content = data; - response(data); + + lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) { + cache[ term ] = data; + if ( xhr === lastXhr ) { + response( data ); } }); - }, - minLength: 2, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value); } }); }); @@ -57,20 +47,13 @@ <input id="birds" /> </div> -<div class="ui-widget" style="margin-top:2em; font-family:Arial"> - Result: - <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> -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> +<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 --> </body> diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 8b800b2d8..c8ee849fe 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -1,28 +1,33 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote datasource demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); + function log( message ) { + $( "<div/>" ).text( message ).prependTo( "#log" ); + $( "#log" ).attr( "scrollTop", 0 ); } - - $("#birds").autocomplete({ + + $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value); + select: function( event, ui ) { + log( ui.item ? + "Selected: " + ui.item.value + " aka " + ui.item.id : + "Nothing selected, input was " + this.value ); } }); }); @@ -44,13 +49,11 @@ </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> +<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 --> </body> diff --git a/demos/autocomplete/search.php b/demos/autocomplete/search.php index 01206489a..8fa9d28f8 100644 --- a/demos/autocomplete/search.php +++ b/demos/autocomplete/search.php @@ -3,8 +3,8 @@ $q = strtolower($_GET["term"]); if (!$q) return; $items = array( -"Great <em>Bittern</em>"=>"Botaurus stellaris", -"Little <em>Grebe</em>"=>"Tachybaptus ruficollis", +"Great Bittern"=>"Botaurus stellaris", +"Little Grebe"=>"Tachybaptus ruficollis", "Black-necked Grebe"=>"Podiceps nigricollis", "Little Bittern"=>"Ixobrychus minutus", "Black-crowned Night Heron"=>"Nycticorax nycticorax", diff --git a/demos/autocomplete/xml.html b/demos/autocomplete/xml.html index 83ffcf5c9..fff432e58 100644 --- a/demos/autocomplete/xml.html +++ b/demos/autocomplete/xml.html @@ -1,43 +1,48 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote datasource demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + </style> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); + function log( message ) { + $( "<div/>" ).text( message ).prependTo( "#log" ); + $( "#log" ).attr( "scrollTop", 0 ); } - + $.ajax({ url: "london.xml", dataType: "xml", - success: function(xmlResponse) { - var data = $("geoname", xmlResponse).map(function() { + success: function( xmlResponse ) { + var data = $( "geoname", xmlResponse ).map(function() { return { - value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"), - id: $("geonameId", this).text() + value: $( "name", this ).text() + ", " + + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ), + id: $( "geonameId", this ).text() }; }).get(); - $("#birds").autocomplete({ + $( "#birds" ).autocomplete({ source: data, minLength: 0, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value); + select: function( event, ui ) { + log( ui.item ? + "Selected: " + ui.item.value + ", geonameId: " + ui.item.id : + "Nothing selected, input was " + this.value ); } }); } - }) - + }); }); </script> </head> @@ -57,13 +62,11 @@ </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> +<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 --> </body> diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html index b6192ee28..13af61ff9 100644 --- a/demos/button/checkbox.html +++ b/demos/button/checkbox.html @@ -1,49 +1,44 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Checkboxes demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Button - Checkboxes</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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() { - $("#check").button(); - $("#format").buttonset(); + $( "#check" ).button(); + $( "#format" ).buttonset(); }); </script> <style> - #format { margin-top: 2em; } + #format { margin-top: 2em; } </style> </head> <body> <div class="demo"> - <input type="checkbox" id="check" /><label for="check">Toggle</label> - - <div id="format"> - <input type="checkbox" id="check1" /><label for="check1">B</label> - <input type="checkbox" id="check2" /><label for="check2">I</label> - <input type="checkbox" id="check3" /><label for="check3">U</label> - </div> +<input type="checkbox" id="check" /><label for="check">Toggle</label> + +<div id="format"> + <input type="checkbox" id="check1" /><label for="check1">B</label> + <input type="checkbox" id="check2" /><label for="check2">I</label> + <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 --> - - </body> </html> diff --git a/demos/button/default.html b/demos/button/default.html index 700c64bcc..f11fba2f7 100644 --- a/demos/button/default.html +++ b/demos/button/default.html @@ -1,46 +1,38 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Default demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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() { - $("button, input:submit, a", ".demo").button(); - - $("a", ".demo").click(function() { return false; }); + $( "button, input:submit, a", ".demo" ).button(); + $( "a", ".demo" ).click(function() { return false; }); }); </script> - <style> - - </style> </head> <body> <div class="demo"> - <button>A button element</button> - - <input type="submit" value="A submit button"/> - - <a href="#">An anchor</a> +<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 --> - - </body> </html> diff --git a/demos/button/icons.html b/demos/button/icons.html index 2dc11c5d8..423a19fcc 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -1,63 +1,56 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Icons demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Button - Icons</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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({ + $( ".demo button:first" ).button({ icons: { - primary: 'ui-icon-locked' + primary: "ui-icon-locked" }, text: false }).next().button({ icons: { - primary: 'ui-icon-locked' + primary: "ui-icon-locked" } }).next().button({ icons: { - primary: 'ui-icon-gear', - secondary: 'ui-icon-triangle-1-s' + primary: "ui-icon-gear", + secondary: "ui-icon-triangle-1-s" } }).next().button({ icons: { - primary: 'ui-icon-gear', - secondary: 'ui-icon-triangle-1-s' + primary: "ui-icon-gear", + secondary: "ui-icon-triangle-1-s" }, text: false }); }); </script> - <style> - - </style> </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> +<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 --> - - </body> </html> diff --git a/demos/button/index.html b/demos/button/index.html index c2b37200d..23977c820 100644 --- a/demos/button/index.html +++ b/demos/button/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Button Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/button/radio.html b/demos/button/radio.html index 3e5dc2379..5c1f87da1 100644 --- a/demos/button/radio.html +++ b/demos/button/radio.html @@ -1,46 +1,39 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Radio Buttons demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Button - Radios</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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() { - $("#radio").buttonset(); + $( "#radio" ).buttonset(); }); </script> - <style> - - </style> </head> <body> <div class="demo"> - <form> - <div id="radio"> - <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> - <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> - <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> - </div> - </form> +<form> + <div id="radio"> + <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> + <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> + <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> + </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 --> - - </body> </html> diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html index a6d1f47cd..8baf12f00 100644 --- a/demos/button/splitbutton.html +++ b/demos/button/splitbutton.html @@ -1,21 +1,21 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Default demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <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.4.4.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> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#rerun") + $( "#rerun" ) .button() - .click( function() { + .click(function() { alert( "Running the last action" ); }) .next() @@ -74,7 +74,5 @@ and no text. Both are grouped together in a set.</p> </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html index 5573872a7..647c4fca8 100644 --- a/demos/button/toolbar.html +++ b/demos/button/toolbar.html @@ -1,86 +1,86 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Toolbar demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Button - Toolbar</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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"> + <style> #toolbar { padding: 10px 4px; } </style> - <script type="text/javascript"> + <script> $(function() { - $('#beginning').button({ + $( "#beginning" ).button({ text: false, icons: { - primary: 'ui-icon-seek-start' + primary: "ui-icon-seek-start" } }); - $('#rewind').button({ + $( "#rewind" ).button({ text: false, icons: { - primary: 'ui-icon-seek-prev' + primary: "ui-icon-seek-prev" } }); - $('#play').button({ + $( "#play" ).button({ text: false, icons: { - primary: 'ui-icon-play' + primary: "ui-icon-play" } }) .click(function() { var options; - if ($(this).text() == 'play') { + if ( $( this ).text() === "play" ) { options = { - label: 'pause', + label: "pause", icons: { - primary: 'ui-icon-pause' + primary: "ui-icon-pause" } }; } else { options = { - label: 'play', + label: "play", icons: { - primary: 'ui-icon-play' + primary: "ui-icon-play" } }; } - $(this).button('option', options); + $( this ).button( "option", options ); }); - $('#stop').button({ + $( "#stop" ).button({ text: false, icons: { - primary: 'ui-icon-stop' + primary: "ui-icon-stop" } }) .click(function() { - $('#play').button('option', { - label: 'play', + $( "#play" ).button( "option", { + label: "play", icons: { - primary: 'ui-icon-play' + primary: "ui-icon-play" } }); }); - $('#forward').button({ + $( "#forward" ).button({ text: false, icons: { - primary: 'ui-icon-seek-next' + primary: "ui-icon-seek-next" } }); - $('#end').button({ + $( "#end" ).button({ text: false, icons: { - primary: 'ui-icon-seek-end' + primary: "ui-icon-seek-end" } }); - $("#shuffle").button(); - $("#repeat").buttonset(); + $( "#shuffle" ).button(); + $( "#repeat" ).buttonset(); }); </script> </head> @@ -88,37 +88,33 @@ <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> - <button id="play">play</button> - <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> - <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> - </span> +<span id="toolbar" class="ui-widget-header ui-corner-all"> + <button id="beginning">go to beginning</button> + <button id="rewind">rewind</button> + <button id="play">play</button> + <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> + <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> </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 --> - - </body> </html> diff --git a/demos/datepicker/alt-field.html b/demos/datepicker/alt-field.html index d51bf0634..aade17748 100644 --- a/demos/datepicker/alt-field.html +++ b/demos/datepicker/alt-field.html @@ -1,17 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Populate alternate field</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({altField: '#alternate', altFormat: 'DD, d MM, yy'}); + $( "#datepicker" ).datepicker({ + altField: "#alternate", + altFormat: "DD, d MM, yy" + }); }); </script> </head> @@ -23,10 +26,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/animation.html b/demos/datepicker/animation.html index 27f20ffb8..3bfa66730 100644 --- a/demos/datepicker/animation.html +++ b/demos/datepicker/animation.html @@ -1,25 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Animations</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.slide.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker(); - $("#anim").change(function() { $('#datepicker').datepicker('option', {showAnim: $(this).val()}); }); + $( "#datepicker" ).datepicker(); + $( "#anim" ).change(function() { + $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); + }); }); </script> </head> @@ -34,22 +36,22 @@ <option value="show">Show (default)</option> <option value="slideDown">Slide down</option> <option value="fadeIn">Fade in</option> - <!-- <option value="blind">Blind (UI Effect)</option> + <option value="blind">Blind (UI Effect)</option> <option value="bounce">Bounce (UI Effect)</option> <option value="clip">Clip (UI Effect)</option> <option value="drop">Drop (UI Effect)</option> <option value="fold">Fold (UI Effect)</option> - <option value="slide">Slide (UI Effect)</option> --> + <option value="slide">Slide (UI Effect)</option> <option value="">None</option> </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 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 --> </body> diff --git a/demos/datepicker/buttonbar.html b/demos/datepicker/buttonbar.html index 6cd4dbedc..4e95b1c16 100644 --- a/demos/datepicker/buttonbar.html +++ b/demos/datepicker/buttonbar.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display button bar</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $('#datepicker').datepicker({ + $( "#datepicker" ).datepicker({ showButtonPanel: true }); }); @@ -25,10 +25,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/date-formats.html b/demos/datepicker/date-formats.html index 435ef7096..e208cf62b 100644 --- a/demos/datepicker/date-formats.html +++ b/demos/datepicker/date-formats.html @@ -1,18 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Format date</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker(); - $("#format").change(function() { $('#datepicker').datepicker('option', {dateFormat: $(this).val()}); }); + $( "#datepicker" ).datepicker(); + $( "#format" ).change(function() { + $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); + }); }); </script> </head> @@ -35,10 +37,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/date-range.html b/demos/datepicker/date-range.html new file mode 100644 index 000000000..1e3beb2a2 --- /dev/null +++ b/demos/datepicker/date-range.html @@ -0,0 +1,49 @@ +<!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.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + var dates = $( "#from, #to" ).datepicker({ + defaultDate: "+1w", + changeMonth: true, + numberOfMonths: 3, + onSelect: function( selectedDate ) { + var option = this.id == "from" ? "minDate" : "maxDate", + instance = $( this ).data( "datepicker" ); + date = $.datepicker.parseDate( + instance.settings.dateFormat || + $.datepicker._defaults.dateFormat, + selectedDate, instance.settings ); + dates.not( this ).datepicker( "option", option, date ); + } + }); + }); + </script> +</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 --> + +</body> +</html> diff --git a/demos/datepicker/default.html b/demos/datepicker/default.html index 4ab50e174..5b87830a1 100644 --- a/demos/datepicker/default.html +++ b/demos/datepicker/default.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker(); + $( "#datepicker" ).datepicker(); }); </script> </head> @@ -23,10 +23,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/dropdown-month-year.html b/demos/datepicker/dropdown-month-year.html index c31d8ba85..db833db84 100644 --- a/demos/datepicker/dropdown-month-year.html +++ b/demos/datepicker/dropdown-month-year.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display month & year menus</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $('#datepicker').datepicker({ + $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); @@ -26,10 +26,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/event-search.html b/demos/datepicker/event-search.html deleted file mode 100644 index c87ae17a4..000000000 --- a/demos/datepicker/event-search.html +++ /dev/null @@ -1,46 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8" /> - <title>jQuery UI Datepicker - Display multiple months</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> - $(function() { - var dates = $('#from, #to').datepicker({ - defaultDate: "+1w", - changeMonth: true, - numberOfMonths: 3, - onSelect: function(selectedDate) { - var option = this.id == "from" ? "minDate" : "maxDate"; - var instance = $(this).data("datepicker"); - var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); - dates.not(this).datepicker("option", option, date); - } - }); - }); - </script> -</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 --> - -</body> -</html> diff --git a/demos/datepicker/icon-trigger.html b/demos/datepicker/icon-trigger.html index 6da3a7792..95da8dd4b 100644 --- a/demos/datepicker/icon-trigger.html +++ b/demos/datepicker/icon-trigger.html @@ -1,19 +1,19 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Icon trigger</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({ - showOn: 'button', - buttonImage: 'images/calendar.gif', + $( "#datepicker" ).datepicker({ + showOn: "button", + buttonImage: "images/calendar.gif", buttonImageOnly: true }); }); @@ -27,10 +27,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/index.html b/demos/datepicker/index.html index 5749ae757..ed2477402 100644 --- a/demos/datepicker/index.html +++ b/demos/datepicker/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> @@ -23,7 +23,7 @@ <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="event-search.html">Event Search</a></li> + <li><a href="date-range.html">Date Range</a></li> </ul> </div> diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html index bf21fc927..8d8cac6ee 100644 --- a/demos/datepicker/inline.html +++ b/demos/datepicker/inline.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display inline</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker(); + $( "#datepicker" ).datepicker(); }); </script> </head> @@ -23,10 +23,10 @@ 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 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 --> </body> diff --git a/demos/datepicker/localization.html b/demos/datepicker/localization.html index 079ae0537..9d32a4863 100644 --- a/demos/datepicker/localization.html +++ b/demos/datepicker/localization.html @@ -1,72 +1,76 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Localize calendar</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-af.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ar.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-az.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-bg.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-bs.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ca.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-cs.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-da.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-de.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-el.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-en-GB.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-eo.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-es.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-et.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-eu.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fa.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fi.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fo.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fr.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-he.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-hr.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-hu.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-hy.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-id.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-is.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-it.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ja.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ko.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-lt.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-lv.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ms.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-nl.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-no.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-pl.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ro.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ru.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sk.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sl.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sq.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sr.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sv.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ta.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-th.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-tr.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-uk.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-vi.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <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-az.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-bg.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-bs.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-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-GB.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-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-ko.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-kz.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-ms.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-nl.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-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-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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $.datepicker.setDefaults($.datepicker.regional['']); - $("#datepicker").datepicker($.datepicker.regional['fr']); - $("#locale").change(function() { - $('#datepicker').datepicker('option', $.datepicker.regional[$(this).val()]); + $.datepicker.setDefaults( $.datepicker.regional[ "" ] ); + $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ); + $( "#locale" ).change(function() { + $( "#datepicker" ).datepicker( "option", + $.datepicker.regional[ $( this ).val() ] ); }); }); </script> @@ -90,7 +94,7 @@ <option value="zh-CN">Chinese Simplified (简体中文)</option> <option value="zh-TW">Chinese Traditional (繁體中文)</option> <option value="hr">Croatian (Hrvatski jezik)</option> - <option value="cs">Czech (Ceötina)</option> + <option value="cs">Czech (čeština)</option> <option value="da">Danish (Dansk)</option> <option value="nl">Dutch (Nederlands)</option> <option value="en-GB">English/UK</option> @@ -101,6 +105,7 @@ <option value="fi">Finnish (suomi)</option> <option value="fr" selected="selected">French (Français)</option> <option value="fr-CH">French/Swiss (Français de Suisse)</option> + <option value="gl">Galician</option> <option value="de">German (Deutsch)</option> <option value="el">Greek (Ελληνικά)</option> <option value="he">Hebrew (‫(עברית</option> @@ -110,11 +115,13 @@ <option value="it">Italian (Italiano)</option> <option value="ja">Japanese (日本語)</option> <option value="ko">Korean (한국어)</option> + <option value="kz">Kazakhstan (Kazakh)</option> <option value="lv">Latvian (Latvieöu Valoda)</option> <option value="lt">Lithuanian (lietuviu kalba)</option> <option value="ms">Malaysian (Bahasa Malaysia)</option> <option value="no">Norwegian (Norsk)</option> <option value="pl">Polish (Polski)</option> + <option value="pt">Portuguese (Português)</option> <option value="pt-BR">Portuguese/Brazilian (Português)</option> <option value="ro">Romanian (Română)</option> <option value="ru">Russian (Русский)</option> @@ -133,10 +140,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/min-max.html b/demos/datepicker/min-max.html index 7573e6926..eb01daacf 100644 --- a/demos/datepicker/min-max.html +++ b/demos/datepicker/min-max.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Restrict date range</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({minDate: -20, maxDate: '+1M +10D'}); + $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); }); </script> </head> @@ -23,10 +23,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/multiple-calendars.html b/demos/datepicker/multiple-calendars.html index 8051ca524..2098941ef 100644 --- a/demos/datepicker/multiple-calendars.html +++ b/demos/datepicker/multiple-calendars.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display multiple months</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $('#datepicker').datepicker({ + $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); @@ -26,10 +26,10 @@ </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 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 --> </body> diff --git a/demos/datepicker/other-months.html b/demos/datepicker/other-months.html index 1c0b65559..ce1d63073 100644 --- a/demos/datepicker/other-months.html +++ b/demos/datepicker/other-months.html @@ -1,17 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Dates in other months</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({showOtherMonths: true, selectOtherMonths: true}); + $( "#datepicker" ).datepicker({ + showOtherMonths: true, + selectOtherMonths: true + }); }); </script> </head> @@ -23,11 +26,11 @@ </div><!-- End demo --> -<div class="demo-description"> + +<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 --> </body> diff --git a/demos/datepicker/show-week.html b/demos/datepicker/show-week.html index f6015a2af..5390463c4 100644 --- a/demos/datepicker/show-week.html +++ b/demos/datepicker/show-week.html @@ -1,17 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Show week of the year</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({showWeek: true, firstDay: 1}); + $( "#datepicker" ).datepicker({ + showWeek: true, + firstDay: 1 + }); }); </script> </head> @@ -23,13 +26,13 @@ </div><!-- End demo --> -<div class="demo-description"> + +<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 --> </body> diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html index 26f298acc..f96fa196d 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -1,34 +1,34 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Animation</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> // increase the default animation speed to exaggerate the effect $.fx.speeds._default = 1000; $(function() { - $('#dialog').dialog({ + $( "#dialog" ).dialog({ autoOpen: false, - show: 'blind', - hide: 'explode' + show: "blind", + hide: "explode" }); - - $('#opener').click(function() { - $('#dialog').dialog('open'); + + $( "#opener" ).click(function() { + $( "#dialog" ).dialog( "open" ); return false; }); }); @@ -46,10 +46,10 @@ </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 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 --> </body> diff --git a/demos/dialog/default.html b/demos/dialog/default.html index a0d4481c7..5dbea3497 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -1,22 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#dialog").dialog(); + $( "#dialog" ).dialog(); }); </script> </head> @@ -44,10 +44,10 @@ </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 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 --> </body> diff --git a/demos/dialog/index.html b/demos/dialog/index.html index 45d4a9f43..460e4fb36 100644 --- a/demos/dialog/index.html +++ b/demos/dialog/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html index 4affb5964..3853056f0 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -1,34 +1,34 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Modal confirmation</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <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").dialog("destroy"); + $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $("#dialog-confirm").dialog({ + $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { - 'Delete all items': function() { - $(this).dialog('close'); + "Delete all items": function() { + $( this ).dialog( "close" ); }, Cancel: function() { - $(this).dialog('close'); + $( this ).dialog( "close" ); } } }); @@ -59,10 +59,10 @@ </div><!-- End demo --> -<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 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 --> </body> diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html index 592b4ab3c..bd8d90cfe 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -1,22 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Modal form</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> body { font-size: 62.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } @@ -27,97 +27,90 @@ div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } - </style> - <script type="text/javascript"> + <script> $(function() { // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $("#dialog").dialog("destroy"); + $( "#dialog:ui-dialog" ).dialog( "destroy" ); - var name = $("#name"), - email = $("#email"), - password = $("#password"), - allFields = $([]).add(name).add(email).add(password), - tips = $(".validateTips"); + var name = $( "#name" ), + email = $( "#email" ), + password = $( "#password" ), + allFields = $( [] ).add( name ).add( email ).add( password ), + tips = $( ".validateTips" ); - function updateTips(t) { + function updateTips( t ) { tips - .text(t) - .addClass('ui-state-highlight'); + .text( t ) + .addClass( "ui-state-highlight" ); setTimeout(function() { - tips.removeClass('ui-state-highlight', 1500); - }, 500); + tips.removeClass( "ui-state-highlight", 1500 ); + }, 500 ); } - function checkLength(o,n,min,max) { - + function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { - o.addClass('ui-state-error'); - updateTips("Length of " + n + " must be between "+min+" and "+max+"."); + o.addClass( "ui-state-error" ); + updateTips( "Length of " + n + " must be between " + + min + " and " + max + "." ); return false; } else { return true; } - } - function checkRegexp(o,regexp,n) { - + function checkRegexp( o, regexp, n ) { if ( !( regexp.test( o.val() ) ) ) { - o.addClass('ui-state-error'); - updateTips(n); + o.addClass( "ui-state-error" ); + updateTips( n ); return false; } else { return true; } - } - $("#dialog-form").dialog({ + $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { - 'Create an account': function() { + "Create an account": function() { var bValid = true; - allFields.removeClass('ui-state-error'); + allFields.removeClass( "ui-state-error" ); - bValid = bValid && checkLength(name,"username",3,16); - bValid = bValid && checkLength(email,"email",6,80); - bValid = bValid && checkLength(password,"password",5,16); + bValid = bValid && checkLength( name, "username", 3, 16 ); + bValid = bValid && checkLength( email, "email", 6, 80 ); + bValid = bValid && checkLength( password, "password", 5, 16 ); - bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter."); + bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." ); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ - bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com"); - bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9"); - - if (bValid) { - $('#users tbody').append('<tr>' + - '<td>' + name.val() + '</td>' + - '<td>' + email.val() + '</td>' + - '<td>' + password.val() + '</td>' + - '</tr>'); - $(this).dialog('close'); + bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" ); + bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" ); + + if ( bValid ) { + $( "#users tbody" ).append( "<tr>" + + "<td>" + name.val() + "</td>" + + "<td>" + email.val() + "</td>" + + "<td>" + password.val() + "</td>" + + "</tr>" ); + $( this ).dialog( "close" ); } }, Cancel: function() { - $(this).dialog('close'); + $( this ).dialog( "close" ); } }, close: function() { - allFields.val('').removeClass('ui-state-error'); + allFields.val( "" ).removeClass( "ui-state-error" ); } }); - - - - $('#create-user') + + $( "#create-user" ) .button() .click(function() { - $('#dialog-form').dialog('open'); + $( "#dialog-form" ).dialog( "open" ); }); - }); </script> </head> @@ -142,10 +135,7 @@ <div id="users-contain" class="ui-widget"> - - <h1>Existing Users:</h1> - - + <h1>Existing Users:</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> @@ -167,10 +157,10 @@ </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 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 --> </body> diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html index a0ab01b21..bbac87769 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -1,30 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Modal message</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <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").dialog("destroy"); + $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $("#dialog-message").dialog({ + $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { - $(this).dialog('close'); + $( this ).dialog( "close" ); } } }); @@ -61,10 +61,10 @@ </div><!-- End demo --> -<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 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 --> </body> diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index 1eb69f028..abde0f4fe 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -1,25 +1,25 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Basic modal</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <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").dialog("destroy"); + $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $("#dialog-modal").dialog({ + $( "#dialog-modal" ).dialog({ height: 140, modal: true }); @@ -28,7 +28,6 @@ </head> <body> - <div class="demo"> <div id="dialog-modal" title="Basic modal dialog"> @@ -51,10 +50,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed. To add a semi-transparent layer that dims out the page content behind the dialog, set the background color and opacity of the <code>overlay</code> option.</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 --> </body> diff --git a/demos/draggable/constrain-movement.html b/demos/draggable/constrain-movement.html index 3bb9075e4..644802497 100644 --- a/demos/draggable/constrain-movement.html +++ b/demos/draggable/constrain-movement.html @@ -1,35 +1,35 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Constrain movement</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable, #draggable2 { margin-bottom:20px; } #draggable { cursor: n-resize; } #draggable2 { cursor: e-resize; } - #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px;} + #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ axis: 'y' }); - $("#draggable2").draggable({ axis: 'x' }); - - $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false }); - $("#draggable4").draggable({ containment: '#demo-frame' }); - $("#draggable5").draggable({ containment: 'parent' }); + $( "#draggable" ).draggable({ axis: "y" }); + $( "#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 class="docs">Constrain movement along an axis:</h3> @@ -59,12 +59,11 @@ </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 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 --> + </body> </html> diff --git a/demos/draggable/cursor-style.html b/demos/draggable/cursor-style.html index 3263029b0..258a29b5d 100644 --- a/demos/draggable/cursor-style.html +++ b/demos/draggable/cursor-style.html @@ -1,27 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Cursor style</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ cursorAt: { cursor: 'move', top: 56, left: 56 } }); - $("#draggable2").draggable({ cursorAt: { cursor: 'crosshair', top: -5, left: -5 } }); - $("#draggable3").draggable({ cursorAt: { bottom: 0 } }); + $( "#draggable" ).draggable({ cursorAt: { cursor: "move", top: 56, left: 56 } }); + $( "#draggable2" ).draggable({ cursorAt: { cursor: "crosshair", top: -5, left: -5 } }); + $( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } }); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -38,12 +39,11 @@ </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 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 --> + </body> </html> diff --git a/demos/draggable/default.html b/demos/draggable/default.html index b50c54ab1..fb5e880e2 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -1,21 +1,21 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable(); + $( "#draggable" ).draggable(); }); </script> </head> @@ -29,12 +29,10 @@ </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 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 --> </body> diff --git a/demos/draggable/delay-start.html b/demos/draggable/delay-start.html index c997e28e2..34dbcbdf7 100644 --- a/demos/draggable/delay-start.html +++ b/demos/draggable/delay-start.html @@ -1,27 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Delay start</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ distance: 20 }); - $("#draggable2").draggable({ delay: 1000 }); - $(".ui-draggable").disableSelection(); + $( "#draggable" ).draggable({ distance: 20 }); + $( "#draggable2" ).draggable({ delay: 1000 }); + $( ".ui-draggable" ).disableSelection(); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -34,12 +35,11 @@ </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 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 --> + </body> </html> diff --git a/demos/draggable/events.html b/demos/draggable/events.html index 194598ffb..accf8b562 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,51 +1,53 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Events</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #draggable { width: 16em; padding: 0 1em; } - #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; } - #draggable ul li span.ui-icon { float: left; } - #draggable ul li span.count { font-weight: bold; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #draggable { width: 16em; padding: 0 1em; } + #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; } + #draggable ul li span.ui-icon { float: left; } + #draggable ul li span.count { font-weight: bold; } </style> - <script type="text/javascript"> - $(function() { - var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop'); - var counts = [0,0,0]; + <script> + $(function() { + var $start_counter = $( "#event-start" ), + $drag_counter = $( "#event-drag" ), + $stop_counter = $( "#event-stop" ), + counts = [ 0, 0, 0 ]; - $("#draggable").draggable({ - start: function() { - counts[0]++; - updateCounterStatus($start_counter,counts[0]); - }, - drag: function() { - counts[1]++; - updateCounterStatus($drag_counter,counts[1]); - }, - stop: function() { - counts[2]++; - updateCounterStatus($stop_counter,counts[2]); - } - }); + $( "#draggable" ).draggable({ + start: function() { + counts[ 0 ]++; + updateCounterStatus( $start_counter, counts[ 0 ] ); + }, + drag: function() { + counts[ 1 ]++; + updateCounterStatus( $drag_counter, counts[ 1 ] ); + }, + stop: function() { + counts[ 2 ]++; + updateCounterStatus( $stop_counter, counts[ 2 ] ); + } }); - function updateCounterStatus($event_counter,new_count) { + function updateCounterStatus( $event_counter, new_count ) { // first update the status visually... - if (!$event_counter.hasClass('ui-state-hover')) { - $event_counter.addClass('ui-state-hover') - .siblings().removeClass('ui-state-hover'); + if ( !$event_counter.hasClass( "ui-state-hover" ) ) { + $event_counter.addClass( "ui-state-hover" ) + .siblings().removeClass( "ui-state-hover" ); } // ...then update the numbers - $('span.count',$event_counter).text(new_count); + $( "span.count", $event_counter ).text( new_count ); } + }); </script> </head> <body> @@ -65,12 +67,10 @@ </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 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 --> </body> diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html index 16bd8a8d7..6a3a51c5e 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -1,28 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Handles</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable p { cursor: move; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ handle: 'p' }); - $("#draggable2").draggable({ cancel: "p.ui-widget-header" }); - $("div, p").disableSelection(); + $( "#draggable" ).draggable({ handle: "p" }); + $( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" }); + $( "div, p" ).disableSelection(); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -38,11 +39,12 @@ </div><!-- End demo --> -<div class="demo-description"> + +<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 --> + </body> </html> diff --git a/demos/draggable/index.html b/demos/draggable/index.html index 65b900c91..0beda8e72 100644 --- a/demos/draggable/index.html +++ b/demos/draggable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html index 77b79599c..7558008ad 100644 --- a/demos/draggable/revert.html +++ b/demos/draggable/revert.html @@ -1,26 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Revert position</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ revert: true }); - $("#draggable2").draggable({ revert: true, helper: 'clone' }); + $( "#draggable" ).draggable({ revert: true }); + $( "#draggable2" ).draggable({ revert: true, helper: "clone" }); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -33,12 +34,11 @@ </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 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 --> + </body> </html> diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html index c7033b34e..943cd0ae1 100644 --- a/demos/draggable/scroll.html +++ b/demos/draggable/scroll.html @@ -1,27 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Auto-scroll</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ scroll: true }); - $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 }); - $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 }); + $( "#draggable" ).draggable({ scroll: true }); + $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 }); + $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 }); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -40,12 +41,11 @@ </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 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 --> + </body> </html> diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html index a9ad84642..0e4c210aa 100644 --- a/demos/draggable/snap-to.html +++ b/demos/draggable/snap-to.html @@ -1,31 +1,32 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Snap to element or grid</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .ui-widget-header p, .ui-widget-content p { margin: 0; } #snaptarget { height: 140px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ snap: true }); - $("#draggable2").draggable({ snap: '.ui-widget-header' }); - $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' }); - $("#draggable4").draggable({ grid: [20,20] }); - $("#draggable5").draggable({ grid: [80, 80] }); + $( "#draggable" ).draggable({ snap: true }); + $( "#draggable2" ).draggable({ snap: ".ui-widget-header" }); + $( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" }); + $( "#draggable4" ).draggable({ grid: [ 20,20 ] }); + $( "#draggable5" ).draggable({ grid: [ 80, 80 ] }); }); </script> </head> <body> + <div class="demo"> <div id="snaptarget" class="ui-widget-header"> @@ -56,15 +57,12 @@ </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> +<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 --> - - </body> </html> diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html index a87ddc0ef..2e526a4ce 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -1,35 +1,36 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable + Sortable</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <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; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable").sortable({ + $( "#sortable" ).sortable({ revert: true }); - $("#draggable").draggable({ - connectToSortable: '#sortable', - helper: 'clone', - revert: 'invalid' + $( "#draggable" ).draggable({ + connectToSortable: "#sortable", + helper: "clone", + revert: "invalid" }); - $("ul, li").disableSelection(); + $( "ul, li" ).disableSelection(); }); </script> </head> <body> + <div class="demo"> <ul> @@ -46,12 +47,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Draggables are built to interact seamlessly with <a href="#">sortables</a>. -</p> +<div class="demo-description"> +<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html index 4644472f0..f78c8e9f7 100644 --- a/demos/draggable/visual-feedback.html +++ b/demos/draggable/visual-feedback.html @@ -1,37 +1,38 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Visual feedback</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable, #draggable2, #draggable3 { margin-bottom:20px; } #set { clear:both; float:left; width: 368px; height: 120px; } p { clear:both; margin:0; padding:1em 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ helper: 'original' }); - $("#draggable2").draggable({ opacity: 0.7, helper: 'clone' }); - $("#draggable3").draggable({ - cursor: 'move', + $( "#draggable" ).draggable({ helper: "original" }); + $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" }); + $( "#draggable3" ).draggable({ + cursor: "move", cursorAt: { top: -12, left: -20 }, - helper: function(event) { - return $('<div class="ui-widget-header">I\'m a custom helper</div>'); + helper: function( event ) { + return $( "<div class='ui-widget-header'>I'm a custom helper</div>" ); } }); - $("#set div").draggable({ stack: '#set div' }); + $( "#set div" ).draggable({ stack: "#set div" }); }); </script> </head> <body> + <div class="demo"> <h3 class="docs">With helpers:</h3> @@ -65,12 +66,12 @@ </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> +<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 --> + </body> </html> diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html index 0ba0207e3..18ce747e2 100644 --- a/demos/droppable/accepted-elements.html +++ b/demos/droppable/accepted-elements.html @@ -1,38 +1,39 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Droppable - Accept Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Accept</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } </style> - <script type="text/javascript"> + <script> $(function() { - - $("#draggable, #draggable-nonvalid").draggable(); - - $("#droppable").droppable({ - accept: '#draggable', - activeClass: 'ui-state-hover', - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + $( "#draggable, #draggable-nonvalid" ).draggable(); + $( "#droppable" ).droppable({ + accept: "#draggable", + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="draggable-nonvalid" class="ui-widget-content"> @@ -49,10 +50,11 @@ </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 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 --> + </body> </html> diff --git a/demos/droppable/default.html b/demos/droppable/default.html index 4134dc942..6f91a3d99 100644 --- a/demos/droppable/default.html +++ b/demos/droppable/default.html @@ -1,33 +1,36 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Droppable - Default Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <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.4.4.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable(); - $("#droppable").droppable({ - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + $( "#draggable" ).draggable(); + $( "#droppable" ).droppable({ + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -40,10 +43,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Enable any DOM element to be droppable, a target for draggable elements.</p> +<div class="demo-description"> +<p>Enable any DOM element to be droppable, a target for draggable elements.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/droppable/images/high_tatras.jpg b/demos/droppable/images/high_tatras.jpg Binary files differindex e2365c29e..5723680df 100644 --- a/demos/droppable/images/high_tatras.jpg +++ b/demos/droppable/images/high_tatras.jpg diff --git a/demos/droppable/images/high_tatras2.jpg b/demos/droppable/images/high_tatras2.jpg Binary files differindex 909024a57..1acad3afb 100644 --- a/demos/droppable/images/high_tatras2.jpg +++ b/demos/droppable/images/high_tatras2.jpg diff --git a/demos/droppable/images/high_tatras3.jpg b/demos/droppable/images/high_tatras3.jpg Binary files differindex 05a43956f..e158b1ae0 100644 --- a/demos/droppable/images/high_tatras3.jpg +++ b/demos/droppable/images/high_tatras3.jpg diff --git a/demos/droppable/images/high_tatras4.jpg b/demos/droppable/images/high_tatras4.jpg Binary files differindex ed753d1e3..da4124d88 100644 --- a/demos/droppable/images/high_tatras4.jpg +++ b/demos/droppable/images/high_tatras4.jpg diff --git a/demos/droppable/index.html b/demos/droppable/index.html index e0c4e6ae2..13ae9855e 100644 --- a/demos/droppable/index.html +++ b/demos/droppable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html index a611c0c50..e1a74b08b 100644 --- a/demos/droppable/photo-manager.html +++ b/demos/droppable/photo-manager.html @@ -1,167 +1,184 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Simple photo manager</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */ - .gallery.custom-state-active { background: #eee; } - .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } - .gallery li h5 { margin: 0 0 0.4em; cursor: move; } - .gallery li a { float: right; } - .gallery li a.ui-icon-zoomin { float: left; } - .gallery li img { width: 100%; cursor: move; } - - #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */ - #trash h4 { line-height: 16px; margin: 0 0 0.4em; } - #trash h4 .ui-icon { float: left; } - #trash .gallery h5 { display: none; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */ + .gallery.custom-state-active { background: #eee; } + .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } + .gallery li h5 { margin: 0 0 0.4em; cursor: move; } + .gallery li a { float: right; } + .gallery li a.ui-icon-zoomin { float: left; } + .gallery li img { width: 100%; cursor: move; } + + #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */ + #trash h4 { line-height: 16px; margin: 0 0 0.4em; } + #trash h4 .ui-icon { float: left; } + #trash .gallery h5 { display: none; } </style> - <script type="text/javascript"> - $(function() { - // there's the gallery and the trash - var $gallery = $('#gallery'), $trash = $('#trash'); - - // let the gallery items be draggable - $('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 - helper: 'clone', - cursor: 'move' - }); - - // let the trash be droppable, accepting the gallery items - $trash.droppable({ - accept: '#gallery > li', - activeClass: 'ui-state-highlight', - drop: function(ev, ui) { - deleteImage(ui.draggable); - } - }); - - // let the gallery be droppable as well, accepting items from the trash - $gallery.droppable({ - accept: '#trash li', - activeClass: 'custom-state-active', - drop: function(ev, ui) { - recycleImage(ui.draggable); - } - }); + <script> + $(function() { + // there's the gallery and the trash + var $gallery = $( "#gallery" ), + $trash = $( "#trash" ); + + // let the gallery items be draggable + $( "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 + helper: "clone", + cursor: "move" + }); - // image deletion function - var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>'; - function deleteImage($item) { - $item.fadeOut(function() { - var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash); + // let the trash be droppable, accepting the gallery items + $trash.droppable({ + accept: "#gallery > li", + activeClass: "ui-state-highlight", + drop: function( event, ui ) { + deleteImage( ui.draggable ); + } + }); - $item.find('a.ui-icon-trash').remove(); - $item.append(recycle_icon).appendTo($list).fadeIn(function() { - $item.animate({ width: '48px' }).find('img').animate({ height: '36px' }); - }); - }); + // let the gallery be droppable as well, accepting items from the trash + $gallery.droppable({ + accept: "#trash li", + activeClass: "custom-state-active", + drop: function( event, ui ) { + recycleImage( ui.draggable ); } + }); - // image recycle function - var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>'; - function recycleImage($item) { - $item.fadeOut(function() { - $item.find('a.ui-icon-refresh').remove(); - $item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn(); + // image deletion function + var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>"; + function deleteImage( $item ) { + $item.fadeOut(function() { + var $list = $( "ul", $trash ).length ? + $( "ul", $trash ) : + $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash ); + + $item.find( "a.ui-icon-trash" ).remove(); + $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() { + $item + .animate({ width: "48px" }) + .find( "img" ) + .animate({ height: "36px" }); }); + }); + } + + // image recycle function + var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>"; + function recycleImage( $item ) { + $item.fadeOut(function() { + $item + .find( "a.ui-icon-refresh" ) + .remove() + .end() + .css( "width", "96px") + .append( trash_icon ) + .find( "img" ) + .css( "height", "72px" ) + .end() + .appendTo( $gallery ) + .fadeIn(); + }); + } + + // image preview function, demonstrating the ui.dialog used as a modal window + function viewLargerImage( $link ) { + var src = $link.attr( "href" ), + title = $link.siblings( "img" ).attr( "alt" ), + $modal = $( "img[src$='" + src + "']" ); + + if ( $modal.length ) { + $modal.dialog( "open" ); + } else { + var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" ) + .attr( "src", src ).appendTo( "body" ); + setTimeout(function() { + img.dialog({ + title: title, + width: 400, + modal: true + }); + }, 1 ); } - - // image preview function, demonstrating the ui.dialog used as a modal window - function viewLargerImage($link) { - var src = $link.attr('href'); - var title = $link.siblings('img').attr('alt'); - var $modal = $('img[src$="'+src+'"]'); - - if ($modal.length) { - $modal.dialog('open') - } else { - var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />') - .attr('src',src).appendTo('body'); - setTimeout(function() { - img.dialog({ - title: title, - width: 400, - modal: true - }); - }, 1); - } + } + + // resolve the icons behavior with event delegation + $( "ul.gallery > li" ).click(function( event ) { + var $item = $( this ), + $target = $( event.target ); + + if ( $target.is( "a.ui-icon-trash" ) ) { + deleteImage( $item ); + } else if ( $target.is( "a.ui-icon-zoomin" ) ) { + viewLargerImage( $target ); + } else if ( $target.is( "a.ui-icon-refresh" ) ) { + recycleImage( $item ); } - // resolve the icons behavior with event delegation - $('ul.gallery > li').click(function(ev) { - var $item = $(this); - var $target = $(ev.target); - - if ($target.is('a.ui-icon-trash')) { - deleteImage($item); - } else if ($target.is('a.ui-icon-zoomin')) { - viewLargerImage($target); - } else if ($target.is('a.ui-icon-refresh')) { - recycleImage($item); - } - - return false; - }); + return false; }); + }); </script> </head> <body> - <div class="demo ui-widget ui-helper-clearfix"> - - <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> - <li class="ui-widget-content ui-corner-tr"> - <h5 class="ui-widget-header">High Tatras</h5> - <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /> - <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> - <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> - </li> - <li class="ui-widget-content ui-corner-tr"> - <h5 class="ui-widget-header">High Tatras 2</h5> - <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /> - <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> - <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> - </li> - <li class="ui-widget-content ui-corner-tr"> - <h5 class="ui-widget-header">High Tatras 3</h5> - <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" /> - <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> - <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> - </li> - <li class="ui-widget-content ui-corner-tr"> - <h5 class="ui-widget-header">High Tatras 4</h5> - <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /> - <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> - <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> - </li> - </ul> - - <div id="trash" class="ui-widget-content ui-state-default"> - <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> - </div> - - </div><!-- End demo --> - - <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 class="demo ui-widget ui-helper-clearfix"> + +<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras</h5> + <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /> + <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 2</h5> + <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /> + <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 3</h5> + <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" /> + <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 4</h5> + <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /> + <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> +</ul> + +<div id="trash" class="ui-widget-content ui-state-default"> + <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> +</div> + +</div><!-- End demo --> + + +<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 --> + </body> </html> diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html index e6cf3c212..4842f0db4 100644 --- a/demos/droppable/propagation.html +++ b/demos/droppable/propagation.html @@ -1,48 +1,53 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Prevent propagation</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; } #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; } </style> - <script type="text/javascript"> + <script> $(function() { + $( "#draggable" ).draggable(); - $("#draggable").draggable(); - - $("#droppable, #droppable-inner").droppable({ - activeClass: 'ui-state-hover', - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('> p').html('Dropped!'); + $( "#droppable, #droppable-inner" ).droppable({ + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "> p" ) + .html( "Dropped!" ); return false; } }); - $("#droppable2, #droppable2-inner").droppable({ + $( "#droppable2, #droppable2-inner" ).droppable({ greedy: true, - activeClass: 'ui-state-hover', - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('> p').html('Dropped!'); + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "> p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -65,10 +70,11 @@ </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 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 --> + </body> </html> diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html index 1f36c7178..7bcf545fe 100644 --- a/demos/droppable/revert.html +++ b/demos/droppable/revert.html @@ -1,38 +1,40 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Revert draggable position</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> - <script type="text/javascript"> + <script> $(function() { - - $("#draggable").draggable({ revert: 'valid' }); - $("#draggable2").draggable({ revert: 'invalid' }); - - $("#droppable").droppable({ - activeClass: 'ui-state-hover', - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + $( "#draggable" ).draggable({ revert: "valid" }); + $( "#draggable2" ).draggable({ revert: "invalid" }); + + $( "#droppable" ).droppable({ + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -49,10 +51,11 @@ </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 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 --> + </body> </html> diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html index de8ce4fe3..39098f5d0 100644 --- a/demos/droppable/shopping-cart.html +++ b/demos/droppable/shopping-cart.html @@ -1,53 +1,53 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Shopping Cart Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> h1 { padding: .2em; margin: 0; } #products { float:left; width: 500px; margin-right: 2em; } #cart { width: 200px; float: left; } /* style the list to maximize the droppable hitarea */ #cart ol { margin: 0; padding: 1em 0 1em 3em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#catalog").accordion(); - $("#catalog li").draggable({ + $( "#catalog" ).accordion(); + $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); - $("#cart ol").droppable({ + $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", - drop: function(event, ui) { - $(this).find(".placeholder").remove(); - $("<li></li>").text(ui.draggable.text()).appendTo(this); + drop: function( event, ui ) { + $( this ).find( ".placeholder" ).remove(); + $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { // gets added unintentionally by droppable interacting with sortable // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options - $(this).removeClass("ui-state-default"); + $( this ).removeClass( "ui-state-default" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="products"> @@ -91,11 +91,11 @@ </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 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 --> + </body> </html> diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html index 1bb6c6038..6b58d034e 100644 --- a/demos/droppable/visual-feedback.html +++ b/demos/droppable/visual-feedback.html @@ -1,43 +1,49 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Visual feedback</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <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; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable(); - $("#droppable").droppable({ - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + $( "#draggable" ).draggable(); + $( "#droppable" ).droppable({ + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - - $("#draggable2").draggable(); - $("#droppable2").droppable({ + + $( "#draggable2" ).draggable(); + $( "#droppable2" ).droppable({ accept: "#draggable2", - activeClass: 'ui-state-hover', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + activeClass: "ui-state-hover", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <h3 class="docs">Feedback on hover:</h3> @@ -60,14 +66,13 @@ <p>Drop here</p> </div> -<!-- add active class demo --> - </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 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 --> + </body> </html> diff --git a/demos/effect/default.html b/demos/effect/default.html index f2988c5c3..b711f739f 100644 --- a/demos/effect/default.html +++ b/demos/effect/default.html @@ -1,60 +1,63 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effects - Effect Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} + <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.4.4.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <script src="../../ui/jquery.effects.fade.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.highlight.js"></script> + <script src="../../ui/jquery.effects.pulsate.js"></script> + <script src="../../ui/jquery.effects.scale.js"></script> + <script src="../../ui/jquery.effects.shake.js"></script> + <script src="../../ui/jquery.effects.slide.js"></script> + <script src="../../ui/jquery.effects.transfer.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; position: relative; } #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; } </style> - <script type="text/javascript"> + <script> $(function() { - - //run the currently selected effect - function runEffect(){ - //get effect type from - var selectedEffect = $('#effectTypes').val(); + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); - //most effect types need no options passed by default + // most effect types need no options passed by default var options = {}; - //check if it's scale, transfer, or size - they need options explicitly set - if(selectedEffect == 'scale'){ options = {percent: 0}; } - else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; } - else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } - - //run the effect - $("#effect").effect(selectedEffect,options,500,callback); + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 0 }; + } else if ( selectedEffect === "transfer" ) { + options = { to: "#button", className: "ui-effects-transfer" }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 200, height: 60 } }; + } + + // run the effect + $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; - - //callback function to bring a hidden box back - function callback(){ - setTimeout(function(){ - $("#effect:hidden").removeAttr('style').hide().fadeIn(); - }, 1000); + + // callback function to bring a hidden box back + function callback() { + setTimeout(function() { + $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); + }, 1000 ); }; - - //set effect from select menu value - $("#button").click(function() { + + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); @@ -94,13 +97,12 @@ <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 class="demo-description"> +<p>Click the button above to show the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/effect/easing.html b/demos/effect/easing.html index 12d18fe70..b4901f505 100644 --- a/demos/effect/easing.html +++ b/demos/effect/easing.html @@ -1,81 +1,90 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effects - Effect Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .graph { - float: left; - margin-left: 10px; - } + <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.4.4.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .graph { + float: left; + margin-left: 10px; + } </style> - <script type="text/javascript"> + <script> $(function() { - if (!$("<canvas/>")[0].getContext) { - $("<div/>").text("Your browser doesn't support canvas, which is required for this demo. Give Firefox 3 a try!").appendTo("#graphs"); + if ( !$( "<canvas/>" )[0].getContext ) { + $( "<div/>" ).text( + "Your browser doesn't support canvas, which is required for this demo. " + + "Give Firefox 3 a try!" + ).appendTo( "#graphs" ); return; } - var i = 0; - var width = 100, + + var i = 0, + width = 100, height = 100; - $.each($.easing, function(name, impl) { - // skip linera/jswing and any non functioning implementation - if (!$.isFunction(impl) || /jswing/.test(name)) + $.each( $.easing, function( name, impl ) { + // skip linear/jswing and any non functioning implementation + if ( !$.isFunction( impl ) || /jswing/.test( name ) ) { return; - var graph = $("<div/>").addClass("graph").appendTo("#graphs"); - var text = $("<div/>").text(++i + ". " + name).appendTo(graph); - - var canvas = $("<canvas/>").appendTo(graph)[0] + } + var graph = $( "<div/>" ).addClass( "graph" ).appendTo( "#graphs" ), + text = $( "<div/>" ).text( ++i + ". " + name ).appendTo( graph ), + canvas = $( "<canvas/>" ).appendTo( graph )[ 0 ]; canvas.width = width; canvas.height = height; - var drawHeight = height * 0.8; - var cradius = 10; - var ctx = canvas.getContext("2d"); + var drawHeight = height * 0.8, + cradius = 10; + ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black"; - + ctx.beginPath(); - ctx.moveTo(cradius, 0); - ctx.quadraticCurveTo(0, 0, 0, cradius); - ctx.lineTo(0, height - cradius); - ctx.quadraticCurveTo(0, height, cradius, height); - ctx.lineTo(width - cradius, height); - ctx.quadraticCurveTo(width, height, width, height - cradius); - ctx.lineTo(width, 0); - ctx.lineTo(cradius, 0); + ctx.moveTo( cradius, 0 ); + ctx.quadraticCurveTo( 0, 0, 0, cradius ); + ctx.lineTo( 0, height - cradius ); + ctx.quadraticCurveTo( 0, height, cradius, height ); + ctx.lineTo( width - cradius, height ); + ctx.quadraticCurveTo( width, height, width, height - cradius ); + ctx.lineTo( width, 0 ); + ctx.lineTo( cradius, 0 ); ctx.fill(); - + ctx.strokeStyle = "#555"; ctx.beginPath(); - ctx.moveTo(width * 0.1, drawHeight + .5); - ctx.lineTo(width * 0.9, drawHeight + .5); + ctx.moveTo( width * 0.1, drawHeight + .5 ); + ctx.lineTo( width * 0.9, drawHeight + .5 ); ctx.stroke(); ctx.strokeStyle = "#555"; ctx.beginPath(); - ctx.moveTo(width * 0.1, drawHeight * .3 - .5); - ctx.lineTo(width * 0.9, drawHeight * .3 - .5); + ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); + ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); ctx.stroke(); ctx.strokeStyle = "white"; ctx.beginPath(); ctx.lineWidth = 2; - ctx.moveTo(width * 0.1, drawHeight); - $.each(new Array(width), function(position) { - var val = impl(0, position, 0, 1, height); - if (/linear|jswing/.test(name)) val = position / width; - ctx.lineTo(position * 0.8 + width * 0.1, drawHeight - drawHeight * val * 0.7); + ctx.moveTo( width * 0.1, drawHeight ); + $.each( new Array( width ), function( position ) { + var val = impl( 0, position, 0, 1, height ); + if ( /linear|jswing/.test( name ) ) { + val = position / width; + } + ctx.lineTo( position * 0.8 + width * 0.1, + drawHeight - drawHeight * val * 0.7 ); }); ctx.stroke(); graph.click(function() { - $(canvas).animate({height: "hide"}, 2000, name).animate({"left": "0"}, 800).animate({height: "show"}, 2000, name); + $( canvas ) + .animate( { height: "hide" }, 2000, name ) + .animate( { left: 0 }, 800 ) + .animate( { height: "show" }, 2000, name ); }); - - graph.width(width).height(height + text.height() + 10); - //return false; + + graph.width( width ).height( height + text.height() + 10 ); }); }); </script> @@ -84,18 +93,15 @@ <div class="demo"> - <div id="graphs"></div> - - <div id="animted"></div> +<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 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 --> </body> </html> - diff --git a/demos/effect/index.html b/demos/effect/index.html index cecceb6cd..65aa3993a 100644 --- a/demos/effect/index.html +++ b/demos/effect/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effect Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <meta charset="utf-8"> + <title>jQuery UI Effects Demos</title> + <link rel="stylesheet" href="../demos.css"> </head> <body> @@ -12,11 +12,6 @@ <ul> <li class="demo-config-on"><a href="default.html">Effect showcase</a></li> <li><a href="easing.html">Easing showcase</a></li> - <!-- WIP - <li class="demo-config-on"><a href="scale.html">Scale effect</a></li> - <li class="demo-config-on"><a href="size.html">Size effect</a></li> - <li class="demo-config-on"><a href="transfer.html">Transfer effect</a></li> - --> </ul> </div> diff --git a/demos/hide/default.html b/demos/hide/default.html index 0e18a5581..6a2113ee0 100644 --- a/demos/hide/default.html +++ b/demos/hide/default.html @@ -1,63 +1,61 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - Hide Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; } - #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; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.highlight.js"></script> + <script src="../../ui/jquery.effects.pulsate.js"></script> + <script src="../../ui/jquery.effects.scale.js"></script> + <script src="../../ui/jquery.effects.shake.js"></script> + <script src="../../ui/jquery.effects.slide.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; } + #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; } </style> - <script type="text/javascript"> + <script> $(function() { + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); - //run the currently selected effect - function runEffect(){ - //get effect type from - var selectedEffect = $('#effectTypes').val(); - - //most effect types need no options passed by default + // most effect types need no options passed by default var options = {}; - //check if it's scale, transfer, or size - they need options explicitly set - if(selectedEffect == 'scale'){ options = {percent: 0}; } - else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; } - else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } - - //run the effect - $("#effect").hide(selectedEffect,options,500,callback); + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 0 }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 200, height: 60 } }; + } + + // run the effect + $( "#effect" ).hide( selectedEffect, options, 1000, callback ); }; - - //callback function to bring a hidden box back - function callback(){ - setTimeout(function(){ - $("#effect:hidden").removeAttr('style').hide().fadeIn(); - }, 1000); + + // callback function to bring a hidden box back + function callback() { + setTimeout(function() { + $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); + }, 1000 ); }; - - //set effect from select menu value - $("#button").click(function() { + + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); - }); </script> </head> @@ -88,18 +86,16 @@ <option value="shake">Shake</option> <option value="size">Size</option> <option value="slide">Slide</option> - <option value="transfer">Transfer</option> </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 class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/hide/index.html b/demos/hide/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/hide/index.html +++ b/demos/hide/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/images/demo-config-on-tile.gif b/demos/images/demo-config-on-tile.gif Binary files differindex 359da95a7..a96b5bf33 100644 --- a/demos/images/demo-config-on-tile.gif +++ b/demos/images/demo-config-on-tile.gif diff --git a/demos/images/demo-config-on.gif b/demos/images/demo-config-on.gif Binary files differindex 9fcec1ac1..e3b6d7c0f 100644 --- a/demos/images/demo-config-on.gif +++ b/demos/images/demo-config-on.gif diff --git a/demos/images/demo-spindown-closed.gif b/demos/images/demo-spindown-closed.gif Binary files differindex b247824e9..ad4bd3781 100644 --- a/demos/images/demo-spindown-closed.gif +++ b/demos/images/demo-spindown-closed.gif diff --git a/demos/images/icon-docs-info.gif b/demos/images/icon-docs-info.gif Binary files differindex 6b0464e01..ea6d2bece 100644 --- a/demos/images/icon-docs-info.gif +++ b/demos/images/icon-docs-info.gif diff --git a/demos/images/jquery_32x32.png b/demos/images/jquery_32x32.png Binary files differdeleted file mode 100644 index 1cd42c9fe..000000000 --- a/demos/images/jquery_32x32.png +++ /dev/null diff --git a/demos/images/jqueryui_32x32.png b/demos/images/jqueryui_32x32.png Binary files differdeleted file mode 100644 index 23ca0f8b9..000000000 --- a/demos/images/jqueryui_32x32.png +++ /dev/null diff --git a/demos/images/pbar-ani.gif b/demos/images/pbar-ani.gif Binary files differindex 0dfd45b88..cb59a04f9 100644 --- a/demos/images/pbar-ani.gif +++ b/demos/images/pbar-ani.gif diff --git a/demos/images/sizzlejs_32x32.png b/demos/images/sizzlejs_32x32.png Binary files differdeleted file mode 100644 index 8d7ae1e0b..000000000 --- a/demos/images/sizzlejs_32x32.png +++ /dev/null diff --git a/demos/images/transparent_1x1.png b/demos/images/transparent_1x1.png Binary files differdeleted file mode 100644 index 209a43864..000000000 --- a/demos/images/transparent_1x1.png +++ /dev/null diff --git a/demos/index.html b/demos/index.html index 6d14ee6bd..298803d2f 100644 --- a/demos/index.html +++ b/demos/index.html @@ -1,98 +1,103 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta charset="utf-8"> <title>jQuery UI Demos</title> - <link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <link type="text/css" href="demos.css" rel="stylesheet" /> - <script type="text/javascript" src="../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.accordion.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.autocomplete.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.datepicker.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.droppable.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.menu.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.progressbar.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.selectable.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.slider.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript" src="../ui/jquery.ui.tabs.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.slide.js"></script> - <script type="text/javascript" src="../ui/jquery.effects.transfer.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-af.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ar.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-az.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-bs.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-bg.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ca.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-cs.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-da.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-de.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-el.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-eo.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-es.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-et.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-eu.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fa.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fi.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fo.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fr.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-he.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hr.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hu.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hy.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-id.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-is.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-it.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ja.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ko.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-lt.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-lv.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ms.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-nl.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-no.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pl.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ro.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ru.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sk.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sl.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sq.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sr.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-sv.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ta.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-th.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-tr.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-uk.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-vi.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script> - <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script> - <script type="text/javascript"> - jQuery(function($) { + <link rel="stylesheet" href="../themes/base/jquery.ui.all.css"> + <link rel="stylesheet" href="demos.css"> + <script src="../jquery-1.4.4.js"></script> + <script src="../external/jquery.bgiframe-2.1.2.js"></script> + <script src="../external/glob.js"></script> + <script src="../external/glob.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.effects.core.js"></script> + <script src="../ui/jquery.effects.blind.js"></script> + <script src="../ui/jquery.effects.bounce.js"></script> + <script src="../ui/jquery.effects.clip.js"></script> + <script src="../ui/jquery.effects.drop.js"></script> + <script src="../ui/jquery.effects.explode.js"></script> + <script src="../ui/jquery.effects.fold.js"></script> + <script src="../ui/jquery.effects.highlight.js"></script> + <script src="../ui/jquery.effects.pulsate.js"></script> + <script src="../ui/jquery.effects.scale.js"></script> + <script src="../ui/jquery.effects.shake.js"></script> + <script src="../ui/jquery.effects.slide.js"></script> + <script src="../ui/jquery.effects.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-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-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-GB.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-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-ko.js"></script> + <script src="../ui/i18n/jquery.ui.datepicker-kz.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-ms.js"></script> + <script src="../ui/i18n/jquery.ui.datepicker-nl.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-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-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'; @@ -269,6 +274,7 @@ <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> <dt>Effects</dt> <dd><a href="animate/index.html">Color Animation</a></dd> diff --git a/demos/position/cycler.html b/demos/position/cycler.html index fa0571e33..69b7fa0f8 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -1,30 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Position - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> html, body { margin: 0; padding: 0 } </style> - - <script type="text/javascript"> + <script> $(function() { - - $.fn.position2 = function(options) { - return this.position($.extend({ + $.fn.position2 = function( options ) { + return this.position( $.extend({ of: window, - using: function(to) { - $(this).css({ + using: function( to ) { + $( this ).css({ top: to.top, left: to.left }) @@ -32,8 +29,8 @@ collision: "none" }, options)); } - - $.fn.left = function(using) { + + $.fn.left = function( using ) { return this.position2({ my: "right middle", at: "left middle", @@ -41,7 +38,7 @@ using: using }); } - $.fn.right = function(using) { + $.fn.right = function( using ) { return this.position2({ my: "left middle", at: "right middle", @@ -49,76 +46,76 @@ using: using }); } - $.fn.center = function(using) { + $.fn.center = function( using ) { return this.position2({ my: "center middle", at: "center middle", using: using }); }; - - $("img:eq(0)").left(); - $("img:eq(1)").center(); - $("img:eq(2)").right(); - - $("body").css({ + + $( "img:eq(0)" ).left(); + $( "img:eq(1)" ).center(); + $( "img:eq(2)" ).right(); + + $( "body" ).css({ overflow: "hidden" }) - $(".demo").css({ + $( ".demo" ).css({ position: "relative", }); - $(".demo img").css({ + $( ".demo img" ).css({ position: "absolute", }); - - function animate(to) { - $(this).animate(to); + + function animate( to ) { + $(this).animate( to ); } function next() { - $("img:eq(2)").center(animate); - $("img:eq(1)").left(animate) - $("img:eq(0)").right().appendTo(".demo"); + $( "img:eq(2)" ).center( animate ); + $( "img:eq(1)" ).left( animate ) + $( "img:eq(0)" ).right().appendTo( ".demo" ); } function previous() { - $("img:eq(0)").center(animate); - $("img:eq(1)").right(animate); - $("img:eq(2)").left().prependTo(".demo"); + $( "img:eq(0)" ).center( animate ); + $( "img:eq(1)" ).right( animate ); + $( "img:eq(2)" ).left().prependTo( ".demo" ); } - $("#previous").click(previous); - $("#next").click(next); - - $(".demo img").click(function() { - $(".demo img").index(this) == 0 ? previous() : next(); + $( "#previous" ).click( previous ); + $( "#next" ).click( next ); + + $( ".demo img" ).click(function() { + $( ".demo img" ).index( this ) === 0 ? previous() : next(); + }); + + $( window ).resize(function() { + $( "img:eq(0)" ).left( animate ); + $( "img:eq(1)" ).center( animate ); + $( "img:eq(2)" ).right( animate ); }); - - $(window).resize(function() { - $("img:eq(0)").left(animate); - $("img:eq(1)").center(animate); - $("img:eq(2)").right(animate); - }) }); </script> - </head> <body> <div class="demo"> - <img src="images/earth.jpg" /> - <img src="images/flight.jpg" /> - <img src="images/rocket.jpg" /> +<img src="images/earth.jpg" /> +<img src="images/flight.jpg" /> +<img src="images/rocket.jpg" /> - <a id="previous" href="#">Previous</a> - <a id="next" href="#">Next</a> -</div> +<a id="previous" href="#">Previous</a> +<a id="next" href="#">Next</a> + +</div><!-- End demo --> -<div class="demo-description"> + +<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 --> </body> diff --git a/demos/position/default.html b/demos/position/default.html index d26959b96..13b2315f7 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -1,28 +1,25 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Position - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> div#parent { width: 60%; margin: 10px auto; padding: 5px; - border: 1px solid #777; background-color: #fbca93; text-align: center; } - div.positionable { width: 75px; height: 75px; @@ -33,49 +30,46 @@ background-color: #bcd5e6; text-align: center; } - select, input { margin-left: 15px; } - </style> - <script type="text/javascript"> + <script> $(function() { - - function position(using) { - $('.positionable').position({ - of: $('#parent'), - my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), - at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(), - offset: $('#offset').val(), + function position( using ) { + $( ".positionable" ).position({ + of: $( "#parent" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + offset: $( "#offset" ).val(), using: using, - collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() + collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val() }); } - - $('.positionable').css("opacity", 0.5); - - $(':input').bind('click keyup change', function() { position(); }); - - $("#parent").draggable({ + + $( ".positionable" ).css( "opacity", 0.5 ); + + $( ":input" ).bind( "click keyup change", function() { position(); }); + + $( "#parent" ).draggable({ drag: function() { position(); } }); - - $('.positionable').draggable({ - drag: function(event, ui) { + + $( ".positionable" ).draggable({ + drag: function( event, ui ) { // reset offset before calculating it - $("#offset").val("0"); - position(function(result) { - $("#offset").val("" + (ui.offset.left - result.left) + " " + (ui.offset.top - result.top)); + $( "#offset" ).val( "0" ); + position(function( result ) { + $( "#offset" ).val( "" + ( ui.offset.left - result.left ) + + " " + ( ui.offset.top - result.top ) ); position(); }); } }); - + position(); }); </script> - </head> <body> @@ -148,11 +142,11 @@ </div><!-- End demo --> -<div class="demo-description"> + +<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 --> </body> diff --git a/demos/position/images/earth.jpg b/demos/position/images/earth.jpg Binary files differindex 87ea48803..e5477f754 100644 --- a/demos/position/images/earth.jpg +++ b/demos/position/images/earth.jpg diff --git a/demos/position/images/flight.jpg b/demos/position/images/flight.jpg Binary files differindex 9721986c0..362bd1a22 100644 --- a/demos/position/images/flight.jpg +++ b/demos/position/images/flight.jpg diff --git a/demos/position/images/rocket.jpg b/demos/position/images/rocket.jpg Binary files differindex d3bff6123..9c0495c61 100644 --- a/demos/position/images/rocket.jpg +++ b/demos/position/images/rocket.jpg diff --git a/demos/position/index.html b/demos/position/index.html index 54a6d54c6..498c09b2b 100644 --- a/demos/position/index.html +++ b/demos/position/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Position Demo</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/progressbar/animated.html b/demos/progressbar/animated.html index e094f64a3..bf8dbb8d5 100644 --- a/demos/progressbar/animated.html +++ b/demos/progressbar/animated.html @@ -1,20 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Progressbar - Animated</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .ui-progressbar-value { background-image: url(images/pbar-ani.gif); } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-progressbar-value { background-image: url(images/pbar-ani.gif); } </style> - <script type="text/javascript"> + <script> $(function() { - $("#progressbar").progressbar({ + $( "#progressbar" ).progressbar({ value: 59 }); }); @@ -28,8 +28,9 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p> This progressbar has an animated fill by setting the <code>background-image</code> @@ -37,7 +38,6 @@ on the <code>.ui-progressbar-value</code> element, using css. </p> - </div><!-- End demo-description --> </body> diff --git a/demos/progressbar/default.html b/demos/progressbar/default.html index 86c7c9c54..15133bb8c 100644 --- a/demos/progressbar/default.html +++ b/demos/progressbar/default.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Progressbar - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#progressbar").progressbar({ + $( "#progressbar" ).progressbar({ value: 37 }); }); @@ -21,19 +21,15 @@ <div class="demo"> - <div id="progressbar"></div> +<div id="progressbar"></div> </div><!-- End demo --> <div class="demo-description"> - <p>Default determinate progress bar.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/progressbar/images/pbar-ani.gif b/demos/progressbar/images/pbar-ani.gif Binary files differindex 0dfd45b88..cb59a04f9 100644 --- a/demos/progressbar/images/pbar-ani.gif +++ b/demos/progressbar/images/pbar-ani.gif diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html index cf8ee9fe3..9836f59aa 100644 --- a/demos/progressbar/index.html +++ b/demos/progressbar/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Progressbar Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/progressbar/resize.html b/demos/progressbar/resize.html index fb99ab8ee..6674c85c3 100644 --- a/demos/progressbar/resize.html +++ b/demos/progressbar/resize.html @@ -1,21 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Progressbar - Resizable</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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.progressbar.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#progressbar").progressbar({ + $( "#progressbar" ).progressbar({ value: 37 }); - $("#progressbarWrapper").resizable(); + $( "#progressbarWrapper" ).resizable(); }); </script> </head> @@ -23,16 +24,16 @@ <div class="demo"> - <div id="progressbarWrapper" style="height:30px; " class="ui-widget-default"> - <div id="progressbar" style="height:100%;"></div> - </div> +<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 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 --> </body> diff --git a/demos/removeClass/default.html b/demos/removeClass/default.html index 15a5a5756..11e5cdfa5 100644 --- a/demos/removeClass/default.html +++ b/demos/removeClass/default.html @@ -1,29 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - removeClass Demo</title> - <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.4.2.js"></script> - <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.effects.core.js"></script> - <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} - #button { padding: .5em 1em; text-decoration: none; } - #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } - #effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../ui/jquery.effects.core.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; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } + .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#button").click(function() { - $('#effect').removeClass('newClass', 1000, callback); + $( "#button" ).click(function() { + $( "#effect" ).removeClass( "newClass", 1000, callback ); return false; }); - - function callback(){ - setTimeout(function(){ - $('#effect').addClass('newClass'); - }, 1500); + + function callback() { + setTimeout(function() { + $( "#effect" ).addClass( "newClass" ); + }, 1500 ); } }); </script> @@ -34,7 +34,7 @@ <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> - Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. + Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div> </div> @@ -42,10 +42,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/removeClass/index.html b/demos/removeClass/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/removeClass/index.html +++ b/demos/removeClass/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/resizable/animate.html b/demos/resizable/animate.html index 36739e3dd..6a4e853de 100644 --- a/demos/resizable/animate.html +++ b/demos/resizable/animate.html @@ -1,29 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Animate</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 1px dotted gray; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ animate: true }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -32,10 +33,11 @@ </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 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 --> + </body> </html> diff --git a/demos/resizable/aspect-ratio.html b/demos/resizable/aspect-ratio.html index ae236ec59..dbfa38690 100644 --- a/demos/resizable/aspect-ratio.html +++ b/demos/resizable/aspect-ratio.html @@ -1,28 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Preserve aspect ratio</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable { width: 160px; height: 90px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ - aspectRatio: 16/9 + $( "#resizable" ).resizable({ + aspectRatio: 16 / 9 }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -31,10 +32,11 @@ </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 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 --> + </body> </html> diff --git a/demos/resizable/constrain-area.html b/demos/resizable/constrain-area.html index 2fdbbd957..edd3870f6 100644 --- a/demos/resizable/constrain-area.html +++ b/demos/resizable/constrain-area.html @@ -1,30 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Constrain resize area</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style\> #container { width: 300px; height: 300px; } #container h3 { text-align: center; margin: 0; margin-bottom: 10px; } #resizable { background-position: top left; width: 150px; height: 150px; } #resizable, #container { padding: 0.5em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ - containment: '#container' + $( "#resizable" ).resizable({ + containment: "#container" }); }); </script> </head> <body> + <div class="demo"> <div id="container" class="ui-widget-content"> @@ -36,10 +37,11 @@ </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 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 --> + </body> </html> diff --git a/demos/resizable/default.html b/demos/resizable/default.html index a8dfd251c..01efa472d 100644 --- a/demos/resizable/default.html +++ b/demos/resizable/default.html @@ -1,26 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable(); + $( "#resizable" ).resizable(); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -29,10 +30,11 @@ </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 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 --> + </body> </html> diff --git a/demos/resizable/delay-start.html b/demos/resizable/delay-start.html index 16e024230..66e047a81 100644 --- a/demos/resizable/delay-start.html +++ b/demos/resizable/delay-start.html @@ -1,32 +1,33 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Delay start</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; } #resizable h3, #resizable2 h3 { text-align: center; margin: 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ delay: 1000 }); - $("#resizable2").resizable({ + $( "#resizable2" ).resizable({ distance: 40 }); }); </script> </head> <body> + <div class="demo"> <h3 class="docs">Time delay (ms):</h3> @@ -39,14 +40,13 @@ <h3 class="ui-widget-header">Distance</h3> </div> -<!-- ADD DISTANCE DEMO --> - </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 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 --> + </body> </html> diff --git a/demos/resizable/helper.html b/demos/resizable/helper.html index 49e8114ab..6e986c646 100644 --- a/demos/resizable/helper.html +++ b/demos/resizable/helper.html @@ -1,29 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Helper</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 2px dotted #00F; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ - helper: 'ui-resizable-helper' + $( "#resizable" ).resizable({ + helper: "ui-resizable-helper" }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -32,10 +33,11 @@ </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 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 --> + </body> </html> diff --git a/demos/resizable/index.html b/demos/resizable/index.html index 93198d03c..45f400621 100644 --- a/demos/resizable/index.html +++ b/demos/resizable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/resizable/max-min.html b/demos/resizable/max-min.html index a1c9f6f86..11cb407bd 100644 --- a/demos/resizable/max-min.html +++ b/demos/resizable/max-min.html @@ -1,22 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Maximum / minimum size</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable { width: 200px; height: 150px; padding: 5px; } #resizable h3 { text-align: center; margin: 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ maxHeight: 250, maxWidth: 350, minHeight: 150, @@ -26,6 +26,7 @@ </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -34,10 +35,11 @@ </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 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 --> + </body> </html> diff --git a/demos/resizable/snap-to-grid.html b/demos/resizable/snap-to-grid.html index 91ebbcd6f..45e299aea 100644 --- a/demos/resizable/snap-to-grid.html +++ b/demos/resizable/snap-to-grid.html @@ -1,28 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Snap to grid</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ grid: 50 }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -31,10 +32,11 @@ </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 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 --> + </body> </html> diff --git a/demos/resizable/synchronous-resize.html b/demos/resizable/synchronous-resize.html index 3b3b37241..45f0a3eab 100644 --- a/demos/resizable/synchronous-resize.html +++ b/demos/resizable/synchronous-resize.html @@ -1,31 +1,32 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Synchronous resize</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable { background-position: top left; } #resizable, #also { width: 150px; height: 120px; padding: 0.5em; } #resizable h3, #also h3 { text-align: center; margin: 0; } #also { margin-top: 1em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ - alsoResize: '#also' + $( "#resizable" ).resizable({ + alsoResize: "#also" }); - $("#also").resizable(); + $( "#also" ).resizable(); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-header"> @@ -38,10 +39,11 @@ </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 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 --> + </body> </html> diff --git a/demos/resizable/textarea.html b/demos/resizable/textarea.html index 2e6e42f9e..50f7ee70e 100644 --- a/demos/resizable/textarea.html +++ b/demos/resizable/textarea.html @@ -1,39 +1,41 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Textarea</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .ui-resizable-se { - bottom: 17px; - } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-resizable-se { + bottom: 17px; + } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ handles: "se" }); }); </script> </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 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 --> + </body> </html> diff --git a/demos/resizable/visual-feedback.html b/demos/resizable/visual-feedback.html index 44178423c..79ef57f17 100644 --- a/demos/resizable/visual-feedback.html +++ b/demos/resizable/visual-feedback.html @@ -1,29 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Visual feedback</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-ghost { border: 1px dotted gray; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ ghost: true }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -32,10 +33,11 @@ </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 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 --> + </body> </html> diff --git a/demos/selectable/default.html b/demos/selectable/default.html index f7d6d8693..bb3cc05dd 100644 --- a/demos/selectable/default.html +++ b/demos/selectable/default.html @@ -1,30 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Selectable - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/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; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#selectable").selectable(); + $( "#selectable" ).selectable(); }); </script> </head> <body> + <div class="demo"> <ol id="selectable"> @@ -39,10 +40,11 @@ </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 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 --> + </body> </html> diff --git a/demos/selectable/display-grid.html b/demos/selectable/display-grid.html index 654a68d5b..e486f8301 100644 --- a/demos/selectable/display-grid.html +++ b/demos/selectable/display-grid.html @@ -1,30 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Selectable - Display as grid</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/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 li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#selectable").selectable(); + $( "#selectable" ).selectable(); }); </script> </head> <body> + <div class="demo"> <ol id="selectable"> @@ -44,10 +45,11 @@ </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 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 --> + </body> </html> diff --git a/demos/selectable/index.html b/demos/selectable/index.html index 19ef9b1fa..21fa4d5a7 100644 --- a/demos/selectable/index.html +++ b/demos/selectable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Selectable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/selectable/serialize.html b/demos/selectable/serialize.html index 9744944a5..924a7cc2a 100644 --- a/demos/selectable/serialize.html +++ b/demos/selectable/serialize.html @@ -1,31 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Selectable - Serialize</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/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; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#selectable").selectable({ - stop: function(){ - var result = $("#select-result").empty(); - $(".ui-selected", this).each(function(){ - var index = $("#selectable li").index(this); - result.append(" #" + (index + 1)); + $( "#selectable" ).selectable({ + stop: function() { + var result = $( "#select-result" ).empty(); + $( ".ui-selected", this ).each(function() { + var index = $( "#selectable li" ).index( this ); + result.append( " #" + ( index + 1 ) ); }); } }); @@ -33,10 +33,11 @@ </script> </head> <body> + <div class="demo"> <p id="feedback"> -You've selected: <span id="select-result">none</span>. +<span>You've selected:</span> <span id="select-result">none</span>. </p> <ol id="selectable"> @@ -50,10 +51,11 @@ You've selected: <span id="select-result">none</span>. </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 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 --> + </body> </html> diff --git a/demos/show/default.html b/demos/show/default.html index 24bbba6ec..9386ff1e1 100644 --- a/demos/show/default.html +++ b/demos/show/default.html @@ -1,64 +1,63 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - Show Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; } - #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; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.highlight.js"></script> + <script src="../../ui/jquery.effects.pulsate.js"></script> + <script src="../../ui/jquery.effects.scale.js"></script> + <script src="../../ui/jquery.effects.shake.js"></script> + <script src="../../ui/jquery.effects.slide.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; } + #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; } </style> - <script type="text/javascript"> + <script> $(function() { + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); - //run the currently selected effect - function runEffect(){ - //get effect type from - var selectedEffect = $('#effectTypes').val(); - - //most effect types need no options passed by default + // most effect types need no options passed by default var options = {}; - //check if it's scale, transfer, or size - they need options explicitly set - if(selectedEffect == 'scale'){ options = {percent: 100}; } - else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; } - else if(selectedEffect == 'size'){ options = { to: {width: 280,height: 185} }; } - - //run the effect - $("#effect").show(selectedEffect,options,500,callback); + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 100 }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 280, height: 185 } }; + } + + // run the effect + $( "#effect" ).show( selectedEffect, options, 500, callback ); }; - + //callback function to bring a hidden box back - function callback(){ - setTimeout(function(){ - $("#effect:visible").removeAttr('style').hide().fadeOut(); - }, 1000); + function callback() { + setTimeout(function() { + $( "#effect:visible" ).removeAttr( "style" ).fadeOut(); + }, 1000 ); }; - - //set effect from select menu value - $("#button").click(function() { + + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); - - $("#effect").hide(); + + $( "#effect" ).hide(); }); </script> </head> @@ -89,18 +88,16 @@ <option value="shake">Shake</option> <option value="size">Size</option> <option value="slide">Slide</option> - <option value="transfer">Transfer</option> </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 class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/show/index.html b/demos/show/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/show/index.html +++ b/demos/show/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/slider/colorpicker.html b/demos/slider/colorpicker.html index 121249e22..7aa90d49b 100644 --- a/demos/slider/colorpicker.html +++ b/demos/slider/colorpicker.html @@ -1,16 +1,16 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Colorpicker</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> #red, #green, #blue { float: left; clear: left; @@ -32,39 +32,39 @@ #blue .ui-slider-handle { border-color: #729fcf; } #demo-frame > div.demo { padding: 10px !important; }; </style> - <script type="text/javascript"> - function hexFromRGB (r, g, b) { + <script> + function hexFromRGB(r, g, b) { var hex = [ - r.toString(16), - g.toString(16), - b.toString(16) + r.toString( 16 ), + g.toString( 16 ), + b.toString( 16 ) ]; - $.each(hex, function (nr, val) { - if (val.length == 1) { - hex[nr] = '0' + val; + $.each( hex, function( nr, val ) { + if ( val.length === 1 ) { + hex[ nr ] = "0" + val; } }); - return hex.join('').toUpperCase(); + return hex.join( "" ).toUpperCase(); } function refreshSwatch() { - var red = $("#red").slider("value") - ,green = $("#green").slider("value") - ,blue = $("#blue").slider("value") - ,hex = hexFromRGB(red, green, blue); - $("#swatch").css("background-color", "#" + hex); + var red = $( "#red" ).slider( "value" ), + green = $( "#green" ).slider( "value" ), + blue = $( "#blue" ).slider( "value" ), + hex = hexFromRGB( red, green, blue ); + $( "#swatch" ).css( "background-color", "#" + hex ); } $(function() { - $("#red, #green, #blue").slider({ - orientation: 'horizontal', + $( "#red, #green, #blue" ).slider({ + orientation: "horizontal", range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); - $("#red").slider("value", 255); - $("#green").slider("value", 140); - $("#blue").slider("value", 60); + $( "#red" ).slider( "value", 255 ); + $( "#green" ).slider( "value", 140 ); + $( "#blue" ).slider( "value", 60 ); }); </script> </head> @@ -73,8 +73,8 @@ <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 + <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> + Simple Colorpicker </p> <div id="red"></div> @@ -85,10 +85,10 @@ Simple Colorpicker </div><!-- End demo --> -<div class="demo-description" style="clear:left;"> -<p>Combine three sliders to create a simple RGB colorpicker.</p> +<div class="demo-description" style="clear:left;"> +<p>Combine three sliders to create a simple RGB colorpicker.</p> </div><!-- End demo-description --> </body> diff --git a/demos/slider/default.html b/demos/slider/default.html index d63086b4d..e1aabef4f 100644 --- a/demos/slider/default.html +++ b/demos/slider/default.html @@ -1,21 +1,21 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8" > <title>jQuery UI Slider - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - $("#slider").slider(); + $( "#slider" ).slider(); }); </script> </head> @@ -27,10 +27,10 @@ </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 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 --> </body> diff --git a/demos/slider/hotelrooms.html b/demos/slider/hotelrooms.html index 02f8b772f..c5a4954c0 100644 --- a/demos/slider/hotelrooms.html +++ b/demos/slider/hotelrooms.html @@ -1,32 +1,32 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed minimum</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; }; + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - var select = $("#minbeds"); - var slider = $('<div id="slider"></div>').insertAfter(select).slider({ + var select = $( "#minbeds" ); + var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({ min: 1, max: 6, range: "min", - value: select[0].selectedIndex + 1, - slide: function(event, ui) { - select[0].selectedIndex = ui.value - 1; + value: select[ 0 ].selectedIndex + 1, + slide: function( event, ui ) { + select[ 0 ].selectedIndex = ui.value - 1; } }); - $("#minbeds").click(function() { - slider.slider("value", this.selectedIndex + 1); + $( "#minbeds" ).change(function() { + slider.slider( "value", this.selectedIndex + 1 ); }); }); </script> @@ -49,10 +49,10 @@ </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 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 --> </body> diff --git a/demos/slider/index.html b/demos/slider/index.html index ec9a2f4f3..caf68fe97 100644 --- a/demos/slider/index.html +++ b/demos/slider/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/slider/multiple-vertical.html b/demos/slider/multiple-vertical.html index 62d0b1634..36cde9c64 100644 --- a/demos/slider/multiple-vertical.html +++ b/demos/slider/multiple-vertical.html @@ -1,35 +1,35 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Multiple sliders</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; } - #eq span { - height:120px; float:left; margin:15px - } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 + } </style> - <script type="text/javascript"> + <script> $(function() { // setup master volume - $("#master").slider({ + $( "#master" ).slider({ value: 60, orientation: "horizontal", range: "min", animate: true }); // setup graphic EQ - $("#eq > span").each(function() { + $( "#eq > span" ).each(function() { // read initial values from markup and remove that - var value = parseInt($(this).text()); - $(this).empty().slider({ + var value = parseInt( $( this ).text(), 10 ); + $( this ).empty().slider({ value: value, range: "min", animate: true, @@ -44,15 +44,15 @@ <div class="demo"> <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> -Master volume + <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span> + Master volume </p> <div id="master" style="width:260px; margin:15px;"></div> <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;"> -<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> -Graphic EQ + <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span> + Graphic EQ </p> <div id="eq"> @@ -67,10 +67,10 @@ Graphic EQ </div><!-- End demo --> -<div class="demo-description" style="clear:left;"> -<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> +<div class="demo-description" style="clear:left;"> +<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p> </div><!-- End demo-description --> </body> diff --git a/demos/slider/range-vertical.html b/demos/slider/range-vertical.html index 70fbb47b3..eef1e6f99 100644 --- a/demos/slider/range-vertical.html +++ b/demos/slider/range-vertical.html @@ -1,29 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Vertical range slider</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; }; + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - $("#slider-range").slider({ + $( "#slider-range" ).slider({ orientation: "vertical", range: true, - values: [17, 67], - slide: function(event, ui) { - $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]); + values: [ 17, 67 ], + slide: function( event, ui ) { + $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); - $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1)); + $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script> </head> @@ -32,18 +33,18 @@ <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;" /> + <label for="amount">Target sales goal (Millions):</label> + <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <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 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 --> </body> diff --git a/demos/slider/range.html b/demos/slider/range.html index be4e19af4..4ee752b68 100644 --- a/demos/slider/range.html +++ b/demos/slider/range.html @@ -1,30 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Range slider</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; }; + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - $("#slider-range").slider({ + $( "#slider-range" ).slider({ range: true, min: 0, max: 500, - values: [75, 300], - slide: function(event, ui) { - $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]); + values: [ 75, 300 ], + slide: function( event, ui ) { + $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); - $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1)); + $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); }); </script> </head> @@ -33,18 +34,18 @@ <div class="demo"> <p> -<label for="amount">Price range:</label> -<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> + <label for="amount">Price range:</label> + <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <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 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 --> </body> diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html index b4f4e1e08..8a8a3ce80 100644 --- a/demos/slider/rangemax.html +++ b/demos/slider/rangemax.html @@ -1,30 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed maximum</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; }; + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - $("#slider-range-max").slider({ + $( "#slider-range-max" ).slider({ range: "max", min: 1, max: 10, value: 2, - slide: function(event, ui) { - $("#amount").val(ui.value); + slide: function( event, ui ) { + $( "#amount" ).val( ui.value ); } }); - $("#amount").val($("#slider-range-max").slider("value")); + $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); }); </script> </head> @@ -33,17 +33,17 @@ <div class="demo"> <p> -<labe for="amount">Minimum number of bedrooms:</label> -<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> + <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 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 --> </body> diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html index 4f146824a..e9527dc3c 100644 --- a/demos/slider/rangemin.html +++ b/demos/slider/rangemin.html @@ -1,30 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed minimum</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; }; + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - $("#slider-range-min").slider({ + $( "#slider-range-min" ).slider({ range: "min", value: 37, min: 1, max: 700, - slide: function(event, ui) { - $("#amount").val('$' + ui.value); + slide: function( event, ui ) { + $( "#amount" ).val( "$" + ui.value ); } }); - $("#amount").val('$' + $("#slider-range-min").slider("value")); + $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); }); </script> </head> @@ -33,18 +33,18 @@ <div class="demo"> <p> -<label for="amount">Maximum price:</label> -<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> + <label for="amount">Maximum price:</label> + <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <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 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 --> </body> diff --git a/demos/slider/side-scroll.html b/demos/slider/side-scroll.html index fe5599bee..c159653a8 100644 --- a/demos/slider/side-scroll.html +++ b/demos/slider/side-scroll.html @@ -1,92 +1,98 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Slider scrollbar</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #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; } - * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */ - .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } - .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } - .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } - .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } - .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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; } + * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */ + .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } + .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } + .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } + .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } + .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } </style> - <script type="text/javascript"> + <script> $(function() { //scrollpane parts - var scrollPane = $('.scroll-pane'); - var scrollContent = $('.scroll-content'); + var scrollPane = $( ".scroll-pane" ), + scrollContent = $( ".scroll-content" ); //build slider - var scrollbar = $(".scroll-bar").slider({ - slide:function(e, ui){ - if( scrollContent.width() > scrollPane.width() ){ scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); } - else { scrollContent.css('margin-left', 0); } + var scrollbar = $( ".scroll-bar" ).slider({ + slide: function( event, ui ) { + if ( scrollContent.width() > scrollPane.width() ) { + scrollContent.css( "margin-left", Math.round( + ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) + ) + "px" ); + } else { + scrollContent.css( "margin-left", 0 ); + } } }); //append icon to handle - var handleHelper = scrollbar.find('.ui-slider-handle') - .mousedown(function(){ + var handleHelper = scrollbar.find( ".ui-slider-handle" ) + .mousedown(function() { scrollbar.width( handleHelper.width() ); }) - .mouseup(function(){ - scrollbar.width( '100%' ); + .mouseup(function() { + scrollbar.width( "100%" ); }) - .append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>') - .wrap('<div class="ui-handle-helper-parent"></div>').parent(); + .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) + .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); //change overflow to hidden now that slider handles the scrolling - scrollPane.css('overflow','hidden'); + scrollPane.css( "overflow", "hidden" ); //size scrollbar and handle proportionally to scroll distance - function sizeScrollbar(){ + function sizeScrollbar() { var remainder = scrollContent.width() - scrollPane.width(); var proportion = remainder / scrollContent.width(); - var handleSize = scrollPane.width() - (proportion * scrollPane.width()); - scrollbar.find('.ui-slider-handle').css({ + var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); + scrollbar.find( ".ui-slider-handle" ).css({ width: handleSize, - 'margin-left': -handleSize/2 + "margin-left": -handleSize / 2 }); - handleHelper.width('').width( scrollbar.width() - handleSize); + handleHelper.width( "" ).width( scrollbar.width() - handleSize ); } //reset slider value based on scroll content position - function resetValue(){ + function resetValue() { var remainder = scrollPane.width() - scrollContent.width(); - var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left')); - var percentage = Math.round(leftVal / remainder * 100); - scrollbar.slider("value", percentage); + var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : + parseInt( scrollContent.css( "margin-left" ) ); + var percentage = Math.round( leftVal / remainder * 100 ); + scrollbar.slider( "value", percentage ); } + //if the slider is 100% and window gets larger, reveal content - function reflowContent(){ - var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') ); + function reflowContent() { + var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); var gap = scrollPane.width() - showing; - if(gap > 0){ - scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap); + if ( gap > 0 ) { + scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); } } //change handle position on window resize - $(window) - .resize(function(){ - resetValue(); - sizeScrollbar(); - reflowContent(); + $( window ).resize(function() { + resetValue(); + sizeScrollbar(); + reflowContent(); }); //init scrollbar size - setTimeout(sizeScrollbar,10);//safari wants a timeout + setTimeout( sizeScrollbar, 10 );//safari wants a timeout }); </script> </head> @@ -122,16 +128,12 @@ </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 --> </body> diff --git a/demos/slider/slider-vertical.html b/demos/slider/slider-vertical.html index b6b4027b1..006f45ec0 100644 --- a/demos/slider/slider-vertical.html +++ b/demos/slider/slider-vertical.html @@ -1,31 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Vertical slider</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; }; + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - $("#slider-vertical").slider({ + $( "#slider-vertical" ).slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 60, - slide: function(event, ui) { - $("#amount").val(ui.value); + slide: function( event, ui ) { + $( "#amount" ).val( ui.value ); } }); - $("#amount").val($("#slider-vertical").slider("value")); + $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) ); }); </script> </head> @@ -34,18 +34,18 @@ <div class="demo"> <p> -<label for="amount">Volume:</label> -<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> + <label for="amount">Volume:</label> + <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <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 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 --> </body> diff --git a/demos/slider/steps.html b/demos/slider/steps.html index 66c84b0c3..6a84b2f8a 100644 --- a/demos/slider/steps.html +++ b/demos/slider/steps.html @@ -1,30 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Snap to increments</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; }; + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - $("#slider").slider({ + $( "#slider" ).slider({ value:100, min: 0, max: 500, step: 50, - slide: function(event, ui) { - $("#amount").val('$' + ui.value); + slide: function( event, ui ) { + $( "#amount" ).val( "$" + ui.value ); } }); - $("#amount").val('$' + $("#slider").slider("value")); + $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) ); }); </script> </head> @@ -33,18 +33,18 @@ <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;" /> + <label for="amount">Donation amount ($50 increments):</label> + <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <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 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 --> </body> diff --git a/demos/slider/tabs.html b/demos/slider/tabs.html index 40916c46a..eabda00aa 100644 --- a/demos/slider/tabs.html +++ b/demos/slider/tabs.html @@ -1,31 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Slider - Snap to increments</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #demo-frame > div.demo { padding: 10px !important; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 type="text/javascript"> + <script> $(function() { - $("#tabs").tabs({ - select: function(event, ui) { - $("#slider").slider("value", ui.index); + $( "#tabs" ).tabs({ + select: function( event, ui ) { + $( "#slider" ).slider( "value", ui.index ); } }); - $("#slider").slider({ + $( "#slider" ).slider({ min: 0, - max: $("#tabs").tabs("length") - 1, - slide: function(event, ui) { - $("#tabs").tabs("select", ui.value); + max: $( "#tabs" ).tabs( "length" ) - 1, + slide: function( event, ui ) { + $( "#tabs" ).tabs( "select", ui.value ); } }); }); @@ -57,10 +57,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Control tabs with a slider.</p> +<div class="demo-description"> +<p>Control tabs with a slider.</p> </div><!-- End demo-description --> </body> diff --git a/demos/sortable/connect-lists-through-tabs.html b/demos/sortable/connect-lists-through-tabs.html index d432afe9c..c5c2dfad1 100644 --- a/demos/sortable/connect-lists-through-tabs.html +++ b/demos/sortable/connect-lists-through-tabs.html @@ -1,36 +1,37 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Connect lists with Tabs</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable1, #sortable2").sortable().disableSelection(); + $( "#sortable1, #sortable2" ).sortable().disableSelection(); - var $tabs = $("#tabs").tabs(); + var $tabs = $( "#tabs" ).tabs(); - var $tab_items = $("ul:first li",$tabs).droppable({ + var $tab_items = $( "ul:first li", $tabs ).droppable({ accept: ".connectedSortable li", hoverClass: "ui-state-hover", - drop: function(ev, ui) { - var $item = $(this); - var $list = $($item.find('a').attr('href')).find('.connectedSortable'); + drop: function( event, ui ) { + var $item = $( this ); + var $list = $( $item.find( "a" ).attr( "href" ) ) + .find( ".connectedSortable" ); - ui.draggable.hide('slow', function() { - $tabs.tabs('select', $tab_items.index($item)); - $(this).appendTo($list).show('slow'); + ui.draggable.hide( "slow", function() { + $tabs.tabs( "select", $tab_items.index( $item ) ); + $( this ).appendTo( $list ).show( "slow" ); }); } }); @@ -67,12 +68,10 @@ </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 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 --> </body> diff --git a/demos/sortable/connect-lists.html b/demos/sortable/connect-lists.html index b08678d61..e75e23193 100644 --- a/demos/sortable/connect-lists.html +++ b/demos/sortable/connect-lists.html @@ -1,23 +1,23 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Connect lists</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable1, #sortable2").sortable({ - connectWith: '.connectedSortable' + $( "#sortable1, #sortable2" ).sortable({ + connectWith: ".connectedSortable" }).disableSelection(); }); </script> @@ -43,15 +43,15 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p> Sort items from one list into another and vice versa, by passing a selector into the <code>connectWith</code> option. The simplest way to do this is to 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 --> </body> diff --git a/demos/sortable/default.html b/demos/sortable/default.html index ab81a8bc0..adf8343c9 100644 --- a/demos/sortable/default.html +++ b/demos/sortable/default.html @@ -1,24 +1,24 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable").sortable(); - $("#sortable").disableSelection(); + $( "#sortable" ).sortable(); + $( "#sortable" ).disableSelection(); }); </script> </head> @@ -37,14 +37,14 @@ </div><!-- End demo --> -<div class="demo-description"> + +<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 --> </body> diff --git a/demos/sortable/delay-start.html b/demos/sortable/delay-start.html index 7afb6be37..35d1d52f5 100644 --- a/demos/sortable/delay-start.html +++ b/demos/sortable/delay-start.html @@ -1,30 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Delay start</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable1").sortable({ + $( "#sortable1" ).sortable({ delay: 300 }); - $("#sortable2").sortable({ + $( "#sortable2" ).sortable({ distance: 15 }); - $("li").disableSelection(); + $( "li" ).disableSelection(); }); </script> </head> @@ -51,8 +51,9 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p> Prevent accidental sorting either by delay (time) or distance. Set a number of milliseconds the element needs to be dragged before sorting starts @@ -60,7 +61,6 @@ needs to be dragged before sorting starts with the <code>distance</code> option. </p> - </div><!-- End demo-description --> </body> diff --git a/demos/sortable/display-grid.html b/demos/sortable/display-grid.html index e90a38c25..aed60cdf6 100644 --- a/demos/sortable/display-grid.html +++ b/demos/sortable/display-grid.html @@ -1,23 +1,23 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Display as grid</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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 li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable").sortable(); - $("#sortable").disableSelection(); + $( "#sortable" ).sortable(); + $( "#sortable" ).disableSelection(); }); </script> </head> @@ -41,13 +41,13 @@ </div><!-- End demo --> -<div class="demo-description"> + +<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 --> </body> diff --git a/demos/sortable/empty-lists.html b/demos/sortable/empty-lists.html index b68ad5983..ac269dfe2 100644 --- a/demos/sortable/empty-lists.html +++ b/demos/sortable/empty-lists.html @@ -1,31 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Handle empty lists</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("ul.droptrue").sortable({ - connectWith: 'ul' + $( "ul.droptrue" ).sortable({ + connectWith: "ul" }); - $("ul.dropfalse").sortable({ - connectWith: 'ul', + $( "ul.dropfalse" ).sortable({ + connectWith: "ul", dropOnEmpty: false }); - $("#sortable1, #sortable2, #sortable3").disableSelection(); + $( "#sortable1, #sortable2, #sortable3" ).disableSelection(); }); </script> </head> @@ -55,14 +55,14 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p> Prevent all items in a list from being dropped into a separate, empty list 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 --> </body> diff --git a/demos/sortable/index.html b/demos/sortable/index.html index 9fa93801f..b307ef777 100644 --- a/demos/sortable/index.html +++ b/demos/sortable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/sortable/items.html b/demos/sortable/items.html index 3f1cbb6c3..8858b3019 100644 --- a/demos/sortable/items.html +++ b/demos/sortable/items.html @@ -1,30 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Include / exclude items</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable1").sortable({ - items: 'li:not(.ui-state-disabled)' + $( "#sortable1" ).sortable({ + items: "li:not(.ui-state-disabled)" }); - $("#sortable2").sortable({ - cancel: '.ui-state-disabled' + $( "#sortable2" ).sortable({ + cancel: ".ui-state-disabled" }); - $("#sortable1 li, #sortable2 li").disableSelection(); + $( "#sortable1 li, #sortable2 li" ).disableSelection(); }); </script> </head> @@ -51,20 +51,19 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p> Specify which items are eligible to sort by passing a jQuery selector into the <code>items</code> option. Items excluded from this option are not sortable, nor are they valid targets for sortable items. </p> - <p> To only prevent sorting on certain items, pass a jQuery selector into the <code>cancel</code> option. Cancelled items remain valid sort targets for others. </p> - </div><!-- End demo-description --> </body> diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html index d9c7e838c..400c8dce8 100644 --- a/demos/sortable/placeholder.html +++ b/demos/sortable/placeholder.html @@ -1,27 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Drop placeholder</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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; width: 60%; } #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } html>body #sortable li { height: 1.5em; line-height: 1.2em; } .ui-state-highlight { height: 1.5em; line-height: 1.2em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable").sortable({ - placeholder: 'ui-state-highlight' + $( "#sortable" ).sortable({ + placeholder: "ui-state-highlight" }); - $("#sortable").disableSelection(); + $( "#sortable" ).disableSelection(); }); </script> </head> @@ -40,8 +40,9 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p> When dragging a sortable item to a new location, other items will make room for the that item by shifting to allow white space between them. Pass a @@ -49,7 +50,6 @@ be visible. Use the boolean <code>forcePlaceholderSize</code> option to set dimensions on the placeholder. </p> - </div><!-- End demo-description --> </body> diff --git a/demos/sortable/portlets.html b/demos/sortable/portlets.html index fefef3d9f..fc72c8229 100644 --- a/demos/sortable/portlets.html +++ b/demos/sortable/portlets.html @@ -1,16 +1,16 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Sortable - Portlets</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> .column { width: 170px; float: left; padding-bottom: 100px; } .portlet { margin: 0 1em 1em 0; } .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } @@ -19,25 +19,25 @@ .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } .ui-sortable-placeholder * { visibility: hidden; } </style> - <script type="text/javascript"> + <script> $(function() { - $(".column").sortable({ - connectWith: '.column' + $( ".column" ).sortable({ + connectWith: ".column" }); - $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") - .find(".portlet-header") - .addClass("ui-widget-header ui-corner-all") - .prepend('<span class="ui-icon ui-icon-minusthick"></span>') + $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ) + .find( ".portlet-header" ) + .addClass( "ui-widget-header ui-corner-all" ) + .prepend( "<span class='ui-icon ui-icon-minusthick'></span>") .end() - .find(".portlet-content"); + .find( ".portlet-content" ); - $(".portlet-header .ui-icon").click(function() { - $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); - $(this).parents(".portlet:first").find(".portlet-content").toggle(); + $( ".portlet-header .ui-icon" ).click(function() { + $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" ); + $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle(); }); - $(".column").disableSelection(); + $( ".column" ).disableSelection(); }); </script> </head> @@ -83,13 +83,13 @@ </div><!-- End demo --> -<div class="demo-description"> + +<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 --> </body> diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html new file mode 100644 index 000000000..6ecd43c1e --- /dev/null +++ b/demos/spinner/currency.html @@ -0,0 +1,61 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Default functionality</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.3.js"></script>
+ <script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
+ <script type="text/javascript" src="../../external/glob.js"></script>
+ <script type="text/javascript" src="../../external/glob.de-DE.js"></script>
+ <script type="text/javascript" src="../../external/glob.ja-JP.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#currency").change(function() {
+ var current = $("#spinner").spinner("value");
+ Globalization.preferCulture($(this).val());
+ $("#spinner").spinner("value", current);
+ })
+
+ $("#spinner").spinner({
+ min: 5,
+ max: 2500,
+ step: 25,
+ start: 1000,
+ numberformat: "C"
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p>
+ <label for="currency">Currency to donate</label>
+ <select id="currency" name="currency">
+ <option value="en-US">US $</option>
+ <option value="de-DE">EUR €</option>
+ <option value="ja-JP">YEN ¥</option>
+ </select>
+</p>
+<p>
+ <label for="spinner">Amount to donate:</label>
+ <input id="spinner" name="spinner" value="5" />
+</p>
+</div>
+
+<div class="demo-description">
+<p>
+ Example of a donation form, with currency selection and amout spinner.
+</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html new file mode 100644 index 000000000..ae45da1e7 --- /dev/null +++ b/demos/spinner/decimal.html @@ -0,0 +1,59 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - decimal</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.3.js"></script>
+ <script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
+ <script type="text/javascript" src="../../external/glob.js"></script>
+ <script type="text/javascript" src="../../external/glob.de-DE.js"></script>
+ <script type="text/javascript" src="../../external/glob.ja-JP.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#spinner").spinner({
+ step: 0.01,
+ numberformat: "n"
+ });
+
+ $("#culture").change(function() {
+ var current = $("#spinner").spinner("value");
+ Globalization.preferCulture($(this).val());
+ $("#spinner").spinner("value", current);
+ })
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+<p>
+ <label for="spinner">Decimal spinner:</label>
+ <input id="spinner" name="spinner" value="5.06" />
+</p>
+<p>
+ <label for="culture">Select a culture to use for formatting:</label>
+ <select id="culture">
+ <option value="en-EN" selected="selected">English</option>
+ <option value="de-DE">German</option>
+ <option value="ja-JP">Japanese</option>
+ </select>
+</p>
+</div>
+
+<div class="demo-description">
+<p>
+ Example of a decimal spinner. Step is set to 0.01.
+ <br/>The code handling the culture change reads the current spinner value,
+ then changes the culture, then sets the value again, resulting in an updated
+ formatting, based on the new culture.
+</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/spinner/default.html b/demos/spinner/default.html new file mode 100644 index 000000000..b0f62308d --- /dev/null +++ b/demos/spinner/default.html @@ -0,0 +1,65 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Default functionality</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.3.js"></script>
+ <script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#spinner").spinner();
+
+ $("#disable").toggle(function() {
+ $("#spinner").spinner("disable");
+ }, function() {
+ $("#spinner").spinner("enable");
+ });
+ $("#destroy").toggle(function() {
+ $("#spinner").spinner("destroy");
+ }, function() {
+ $("#spinner").spinner();
+ });
+ $("#getvalue").click(function() {
+ alert($("#spinner").spinner("value"));
+ });
+ $("#setvalue").click(function() {
+ $("#spinner").spinner("value", 5);
+ });
+
+ $("button").button();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<p><label for="spinner">Select a value:</label>
+<input id="spinner" name="value" /></p>
+
+<p>
+<button id="disable">Toggle disable/enable</button>
+<button id="destroy">Toggle widget</button>
+</p>
+
+<p>
+<button id="getvalue">Get value</button>
+<button id="setvalue">Set value to 5</button>
+</p>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+Default spinner.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/spinner/index.html b/demos/spinner/index.html new file mode 100644 index 000000000..a49fa1368 --- /dev/null +++ b/demos/spinner/index.html @@ -0,0 +1,20 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Spinner Demos</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+</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>
+</body>
+</html>
diff --git a/demos/spinner/latlong.html b/demos/spinner/latlong.html new file mode 100644 index 000000000..7c0c9b21a --- /dev/null +++ b/demos/spinner/latlong.html @@ -0,0 +1,60 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Map</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+ <script type="text/javascript" src="../../jquery-1.4.3.js"></script>
+ <script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ function latlong() {
+ return new google.maps.LatLng($("#lat").val(),$("#lng").val());
+ }
+ function position() {
+ map.setCenter(latlong());
+ }
+ $("#lat, #lng").spinner({
+ precision: 6,
+ change: position
+ });
+
+ var map = new google.maps.Map($("#map")[0], {
+ zoom: 8,
+ center: latlong(),
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ });
+ });
+ </script>
+ <style>
+ #map { width:500px; height:500px; }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<label for="lat">Latitude</label>
+<input id="lat" name="lat" value="44.797916" />
+<br/>
+<label for="lng">Longitude</label>
+<input id="lng" name="lng" value="-93.278046" />
+
+<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 -->
+
+</body>
+</html>
diff --git a/demos/spinner/overflow.html b/demos/spinner/overflow.html new file mode 100644 index 000000000..716489155 --- /dev/null +++ b/demos/spinner/overflow.html @@ -0,0 +1,47 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Default functionality</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.3.js"></script>
+ <script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#spinner").spinner({
+ spin: function(event, ui) {
+ if (ui.value > 10) {
+ $(this).spinner("value", -10);
+ return false;
+ } else if (ui.value < -10) {
+ $(this).spinner("value", 10);
+ return false;
+ }
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+ <p>
+ <label for="spinner">Select a value:</label>
+ <input id="spinner" name="value" />
+ </p>
+</div>
+
+<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>
+
+</body>
+</html>
diff --git a/demos/spinner/time.html b/demos/spinner/time.html new file mode 100644 index 000000000..3f1efcad2 --- /dev/null +++ b/demos/spinner/time.html @@ -0,0 +1,72 @@ +<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - decimal</title>
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.4.3.js"></script>
+ <script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
+ <script type="text/javascript" src="../../external/glob.js"></script>
+ <script type="text/javascript" src="../../external/glob.de-DE.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $.widget("ui.timespinner", $.ui.spinner, {
+ options: {
+ // seconds
+ step: 60 * 1000,
+ // hours
+ page: 60
+ },
+
+ _parse: function(value) {
+ if (typeof value == 'string') {
+ return +Globalization.parseDate(value)
+ }
+ return value;
+ },
+ _format: function() {
+ this.element.val( Globalization.format(new Date(this.options.value), "t") );
+ }
+ })
+ $(function() {
+ $("#spinner").timespinner();
+
+
+ $("#culture").change(function() {
+ var current = $("#spinner").timespinner("value");
+ Globalization.preferCulture($(this).val());
+ $("#spinner").timespinner("value", current);
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+<p>
+ <label for="spinner">Time spinner:</label>
+ <input id="spinner" name="spinner" value="08:30 PM" />
+</p>
+<p>
+ <label for="culture">Select a culture to use for formatting:</label>
+ <select id="culture">
+ <option value="en-EN" selected="selected">English</option>
+ <option value="de-DE">German</option>
+ </select>
+</p>
+</div>
+
+<div class="demo-description">
+<p>
+ A custom widget extending spinner. Use the Globalization plugin to parse and output
+ a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down
+ spins hours.
+</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/switchClass/default.html b/demos/switchClass/default.html index bfb0c9c8b..d7257af45 100644 --- a/demos/switchClass/default.html +++ b/demos/switchClass/default.html @@ -1,24 +1,24 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - switchClass Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} - #button { padding: .5em 1em; text-decoration: none; } - #effect {position: relative; } - #effect.newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; } - #effect.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../ui/jquery.effects.core.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; } + .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> - <script type="text/javascript"> + <script> $(function() { - $("#button").click(function(){ - $(".newClass").switchClass('newClass', 'anotherNewClass', 1000); - $(".anotherNewClass").switchClass('anotherNewClass', 'newClass', 1000); + $( "#button" ).click(function(){ + $( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 ); + $( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 ); return false; }); }); @@ -28,7 +28,6 @@ <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. @@ -38,10 +37,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/switchClass/index.html b/demos/switchClass/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/switchClass/index.html +++ b/demos/switchClass/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html index efbdf590a..da976ae75 100644 --- a/demos/tabs/ajax.html +++ b/demos/tabs/ajax.html @@ -1,20 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Content via Ajax</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#tabs").tabs({ + $( "#tabs" ).tabs({ ajaxOptions: { - error: function(xhr, status, index, anchor) { - $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo."); + error: function( xhr, status, index, anchor ) { + $( anchor.hash ).html( + "Couldn't load this tab. We'll try to fix this as soon as possible. " + + "If this wouldn't be a demo." ); } } }); @@ -40,10 +42,10 @@ </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> +<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 --> diff --git a/demos/tabs/ajax/content1.html b/demos/tabs/ajax/content1.html index 759bf134e..472bdfb36 100644 --- a/demos/tabs/ajax/content1.html +++ b/demos/tabs/ajax/content1.html @@ -1,4 +1,4 @@ -<p><strong>This content was loaded via ajax.</strong> +<p><strong>This content was loaded via ajax.</strong></p> <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> <p>Mauris vitae ante. Curabitur augue. Nulla purus nibh, lobortis ut, feugiat at, aliquam id, purus. Sed venenatis, lorem venenatis volutpat commodo, purus quam lacinia justo, mattis interdum pede pede a odio. Fusce nibh. Morbi nisl mauris, dapibus in, tristique eget, accumsan et, pede. Donec mauris risus, pulvinar ut, faucibus eu, mollis in, nunc. In augue massa, commodo a, cursus vehicula, varius eu, dui. Suspendisse sodales suscipit lorem. Morbi malesuada, eros quis condimentum dignissim, lectus nibh tristique urna, non bibendum diam massa vel risus. Morbi suscipit. Proin egestas, eros at scelerisque scelerisque, dolor lacus fringilla lacus, ut ullamcorper mi magna at quam. Aliquam sed elit. Aliquam turpis purus, congue quis, iaculis id, ullamcorper sit amet, justo. Maecenas sed mauris. Proin magna justo, interdum in, tincidunt eu, viverra eu, turpis. Suspendisse mollis. In magna. Phasellus pellentesque, urna pellentesque convallis pellentesque, augue sem blandit pede, at rhoncus libero nisl a odio.</p> <p>Sed vitae nibh non magna semper tempor. Duis dolor. Nam congue laoreet arcu. Fusce lobortis enim quis ligula. Maecenas commodo odio id mi. Maecenas scelerisque tellus eu odio. Etiam dolor purus, lacinia a, imperdiet in, aliquam et, eros. In pellentesque. Nullam ac massa. Integer et turpis. Ut quam augue, congue non, imperdiet id, eleifend ac, nisi. Etiam ac arcu. Cras iaculis accumsan erat. Nullam vulputate sapien nec nisi pretium rhoncus. Aliquam a nibh. Vivamus est ante, fermentum a, tincidunt ut, imperdiet nec, velit. Aenean non tortor. Sed nec mauris eget tellus condimentum rutrum.</p>
\ No newline at end of file diff --git a/demos/tabs/ajax/content2.html b/demos/tabs/ajax/content2.html index 95c25dae0..18b03e40b 100644 --- a/demos/tabs/ajax/content2.html +++ b/demos/tabs/ajax/content2.html @@ -1,4 +1,4 @@ -<p><strong>This other content was loaded via ajax.</strong> +<p><strong>This other content was loaded via ajax.</strong></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p> <p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p> <p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p>
\ No newline at end of file diff --git a/demos/tabs/ajax/content3-slow.php b/demos/tabs/ajax/content3-slow.php index 9e50dc3ac..7ad43ec06 100644 --- a/demos/tabs/ajax/content3-slow.php +++ b/demos/tabs/ajax/content3-slow.php @@ -1,7 +1,7 @@ <?php sleep(1); ?> -<p><strong>This content was loaded via ajax, though it took a second.</strong> +<p><strong>This content was loaded via ajax, though it took a second.</strong></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p> <p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p> <p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p>
\ No newline at end of file diff --git a/demos/tabs/bottom.html b/demos/tabs/bottom.html index c4ab31329..6d2148596 100644 --- a/demos/tabs/bottom.html +++ b/demos/tabs/bottom.html @@ -1,29 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Tabs at bottom</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#tabs").tabs(); - $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *") - .removeClass("ui-corner-all ui-corner-top") - .addClass("ui-corner-bottom"); + $( "#tabs" ).tabs(); + $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" ) + .removeClass( "ui-corner-all ui-corner-top" ) + .addClass( "ui-corner-bottom" ); }); </script> <style> - #tabs { height: 200px; } - .tabs-bottom { position: relative; } - .tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; } - .tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } - .tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; } - .ui-tabs-selected { margin-top: -3px !important; } + #tabs { height: 200px; } + .tabs-bottom { position: relative; } + .tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; } + .tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } + .tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; } + .ui-tabs-selected { margin-top: -3px !important; } </style> </head> <body> @@ -50,10 +50,10 @@ </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 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 --> </body> diff --git a/demos/tabs/collapsible.html b/demos/tabs/collapsible.html index 7a638e295..9c3c2615a 100644 --- a/demos/tabs/collapsible.html +++ b/demos/tabs/collapsible.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Collapse content</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#tabs").tabs({ + $( "#tabs" ).tabs({ collapsible: true }); }); @@ -43,13 +43,12 @@ </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> +<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 --> </body> diff --git a/demos/tabs/cookie.html b/demos/tabs/cookie.html index 638ee37f2..e8f9ead65 100644 --- a/demos/tabs/cookie.html +++ b/demos/tabs/cookie.html @@ -1,18 +1,18 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.cookie.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../external/jquery.cookie.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#tabs").tabs({ + $( "#tabs" ).tabs({ cookie: { // store cookie for a day, without, it would be a session cookie expires: 1 @@ -45,12 +45,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Looks the same as the default demo, but uses cookie to store the selected tab, and restore it when the page (re)loads. +<div class="demo-description"> +<p>Looks the same as the default demo, but uses cookie to store the selected tab, and restore it when the page (re)loads. The cookie is stored for a day, so tabs will be restored even after closing the browser. Use cookie: {} for using cookies with default options.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/tabs/default.html b/demos/tabs/default.html index 7b01cc8b4..0f51e45c0 100644 --- a/demos/tabs/default.html +++ b/demos/tabs/default.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#tabs").tabs(); + $( "#tabs" ).tabs(); }); </script> </head> @@ -39,10 +39,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click tabs to swap between content that is broken into logical sections.</p> +<div class="demo-description"> +<p>Click tabs to swap between content that is broken into logical sections.</p> </div><!-- End demo-description --> </body> diff --git a/demos/tabs/index.html b/demos/tabs/index.html index 8fc417a4f..c0d668435 100644 --- a/demos/tabs/index.html +++ b/demos/tabs/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html index ec143d52a..a610138a7 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -1,85 +1,87 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Simple manipulation</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #dialog label, #dialog input { display:block; } - #dialog label { margin-top: 0.5em; } - #dialog input, #dialog textarea { width: 95%; } - #tabs { margin-top: 1em; } - #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } - #add_tab { cursor: pointer; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #dialog label, #dialog input { display:block; } + #dialog label { margin-top: 0.5em; } + #dialog input, #dialog textarea { width: 95%; } + #tabs { margin-top: 1em; } + #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } + #add_tab { cursor: pointer; } </style> - <script type="text/javascript"> + <script> $(function() { - var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content'); + var $tab_title_input = $( "#tab_title"), + $tab_content_input = $( "#tab_content" ); var tab_counter = 2; // tabs init with a custom tab template and an "add" callback filling in the content - var $tabs = $('#tabs').tabs({ - tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>', - add: function(event, ui) { - var tab_content = $tab_content_input.val() || 'Tab '+tab_counter+' content.'; - $(ui.panel).append('<p>'+tab_content+'</p>'); + var $tabs = $( "#tabs").tabs({ + tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", + add: function( event, ui ) { + var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content."; + $( ui.panel ).append( "<p>" + tab_content + "</p>" ); } }); // modal dialog init: custom buttons and a "close" callback reseting the form inside - var $dialog = $('#dialog').dialog({ + var $dialog = $( "#dialog" ).dialog({ autoOpen: false, modal: true, buttons: { - 'Add': function() { + Add: function() { addTab(); - $(this).dialog('close'); + $( this ).dialog( "close" ); }, - 'Cancel': function() { - $(this).dialog('close'); + Cancel: function() { + $( this ).dialog( "close" ); } }, open: function() { $tab_title_input.focus(); }, close: function() { - $form[0].reset(); + $form[ 0 ].reset(); } }); // addTab form: calls addTab function on submit and closes the dialog - var $form = $('form',$dialog).submit(function() { + var $form = $( "form", $dialog ).submit(function() { addTab(); - $dialog.dialog('close'); + $dialog.dialog( "close" ); return false; }); // actual addTab function: adds new tab using the title input from the form above function addTab() { - var tab_title = $tab_title_input.val() || 'Tab '+tab_counter; - $tabs.tabs('add', '#tabs-'+tab_counter, tab_title); + var tab_title = $tab_title_input.val() || "Tab " + tab_counter; + $tabs.tabs( "add", "#tabs-" + tab_counter, tab_title ); tab_counter++; } // addTab button: just opens the dialog - $('#add_tab') + $( "#add_tab" ) .button() .click(function() { - $dialog.dialog('open'); + $dialog.dialog( "open" ); }); // close icon: removing the tab on click // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924 - $('#tabs span.ui-icon-close').live('click', function() { - var index = $('li',$tabs).index($(this).parent()); - $tabs.tabs('remove', index); + $( "#tabs span.ui-icon-close" ).live( "click", function() { + var index = $( "li", $tabs ).index( $( this ).parent() ); + $tabs.tabs( "remove", index ); }); }); </script> @@ -112,8 +114,10 @@ </div><!-- End demo --> + + <div class="demo-description"> - <p>Simple tabs adding and removing.</p> +<p>Simple tabs adding and removing.</p> </div><!-- End demo-description --> </body> diff --git a/demos/tabs/mouseover.html b/demos/tabs/mouseover.html index 30233d61e..f94295b3d 100644 --- a/demos/tabs/mouseover.html +++ b/demos/tabs/mouseover.html @@ -1,18 +1,18 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Open on mouseover</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#tabs").tabs({ - event: 'mouseover' + $( "#tabs" ).tabs({ + event: "mouseover" }); }); </script> @@ -41,13 +41,12 @@ </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> +<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 --> </body> diff --git a/demos/tabs/sortable.html b/demos/tabs/sortable.html index e57f41309..728fcab29 100644 --- a/demos/tabs/sortable.html +++ b/demos/tabs/sortable.html @@ -1,19 +1,19 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Sortable</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <script src="../../ui/jquery.ui.tabs.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'}); + $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" }); }); </script> </head> @@ -41,24 +41,17 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Drag the tabs above to re-order them. -<p> +<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 --> </body> diff --git a/demos/tabs/vertical.html b/demos/tabs/vertical.html index e13cd8290..eec467b1c 100644 --- a/demos/tabs/vertical.html +++ b/demos/tabs/vertical.html @@ -1,30 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Vertical Tabs functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.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> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); - $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); + $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" ); + $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" ); }); </script> - <style type="text/css"> - -/* Vertical Tabs -----------------------------------*/ -.ui-tabs-vertical { width: 55em; } -.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } -.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } -.ui-tabs-vertical .ui-tabs-nav li a { display:block; } -.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } -.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} + <style> + .ui-tabs-vertical { width: 55em; } + .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } + .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } + .ui-tabs-vertical .ui-tabs-nav li a { display:block; } + .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } + .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} </style> </head> <body> @@ -54,10 +51,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click tabs to swap between content that is broken into logical sections.</p> +<div class="demo-description"> +<p>Click tabs to swap between content that is broken into logical sections.</p> </div><!-- End demo-description --> </body> diff --git a/demos/toggle/default.html b/demos/toggle/default.html index 3659a64e8..6e38efe44 100644 --- a/demos/toggle/default.html +++ b/demos/toggle/default.html @@ -1,54 +1,54 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - Toggle Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; } - #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; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.highlight.js"></script> + <script src="../../ui/jquery.effects.pulsate.js"></script> + <script src="../../ui/jquery.effects.scale.js"></script> + <script src="../../ui/jquery.effects.shake.js"></script> + <script src="../../ui/jquery.effects.slide.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .toggler { width: 500px; height: 200px; } + #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; } </style> - <script type="text/javascript"> + <script> $(function() { - //run the currently selected effect - function runEffect(){ - //get effect type from - var selectedEffect = $('#effectTypes').val(); + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); - //most effect types need no options passed by default + // most effect types need no options passed by default var options = {}; - //check if it's scale, transfer, or size - they need options explicitly set - if(selectedEffect == 'scale'){ options = {percent: 0}; } - else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 0 }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 200, height: 60 } }; + } - //run the effect - $("#effect").toggle(selectedEffect,options,500); + // run the effect + $( "#effect" ).toggle( selectedEffect, options, 500 ); }; - //set effect from select menu value - $("#button").click(function() { + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); - }); </script> </head> @@ -79,16 +79,15 @@ <option value="shake">Shake</option> <option value="size">Size</option> <option value="slide">Slide</option> - <option value="transfer">Transfer</option> </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 class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/toggle/index.html b/demos/toggle/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/toggle/index.html +++ b/demos/toggle/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/toggleClass/default.html b/demos/toggleClass/default.html index b679c96b7..50f2a82cc 100644 --- a/demos/toggleClass/default.html +++ b/demos/toggleClass/default.html @@ -1,22 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - toggleClass Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} - #button { padding: .5em 1em; text-decoration: none; } - #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } - #effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.4.js"></script> + <script src="../../ui/jquery.effects.core.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; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } + .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#button").click(function() { - $('#effect').toggleClass('newClass', 1000); + $( "#button" ).click(function() { + $( "#effect" ).toggleClass( "newClass", 1000 ); return false; }); }); @@ -36,10 +36,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/toggleClass/index.html b/demos/toggleClass/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/toggleClass/index.html +++ b/demos/toggleClass/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> |
