diff options
Diffstat (limited to 'demos')
39 files changed, 465 insertions, 465 deletions
diff --git a/demos/accordion/custom_icons.html b/demos/accordion/custom_icons.html index d9c566452..65ab3c912 100644 --- a/demos/accordion/custom_icons.html +++ b/demos/accordion/custom_icons.html @@ -63,7 +63,7 @@ <p>The icons used for the open and closed accordions can be any of the standard icons in the css framework or even a custom css class you create with an icon background image. For this example, we're using the arrow in a circle icons: -<pre> +<pre> icons: { header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circle-arrow-s"} diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html index 2ff26e32e..8e7f2d5c3 100644 --- a/demos/datepicker/inline.html +++ b/demos/datepicker/inline.html @@ -1,25 +1,25 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Datepicker - Inline Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#date123").datepicker();
- });
- </script>
-</head>
-<body>
- -
-<div class="demo">
-
-Date: <div id="date123" /></div>
-
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Datepicker - Inline Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.datepicker.js"></script> + <script type="text/javascript"> + $(function() { + $("#date123").datepicker(); + }); + </script> +</head> +<body> + + +<div class="demo"> + +Date: <div id="date123" /></div> + </div><!-- End demo --> @@ -28,7 +28,7 @@ Date: <div id="date123" /></div> <p>This is an example of an inline date picker that is embedded in the page instead of opening in an overlay. This is done by calling .datepicker() in a div instead of an input.</p> -</div><!-- End demo-description -->
-
-</body>
-</html>
+</div><!-- End demo-description --> + +</body> +</html> diff --git a/demos/demos.css b/demos/demos.css index 250c875fc..4541b8adf 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -110,7 +110,7 @@ body { border-color: #BBBBBB; } -/* new styles for demo pages, added by Filament 12.29.08 +/* new styles for demo pages, added by Filament 12.29.08 eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts */ @@ -132,16 +132,16 @@ eventually we should convert the font sizes to ems -- using px for now to minimi #demo-config-menu li { font-size:11px; padding:0 0 0 10px; margin:3px 0; zoom: 1; } -#demo-config-menu li a:link, +#demo-config-menu li a:link, #demo-config-menu li a:visited { display:block; padding:2px 8px 3px; border-bottom:1px dotted #b3b3b3; } -#demo-config-menu li a:hover, +#demo-config-menu li a:hover, #demo-config-menu li a:active { background-color:#f6f6f6; } #demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; } -#demo-config-menu li.demo-config-on a:link, -#demo-config-menu li.demo-config-on a:visited, -#demo-config-menu li.demo-config-on a:hover, +#demo-config-menu li.demo-config-on a:link, +#demo-config-menu li.demo-config-on a:visited, +#demo-config-menu li.demo-config-on a:hover, #demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; } #demo-source, #demo-notes { @@ -168,13 +168,13 @@ eventually we should convert the font sizes to ems -- using px for now to minimi #demo-source a.source-closed:hover, #demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); } -div.demo { - padding:12px; +div.demo { + padding:12px; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; } -div.demo-description { - padding:12px; +div.demo-description { + padding:12px; font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; font-size: 1.3em; line-height: 1.4em; diff --git a/demos/dialog/default.html b/demos/dialog/default.html index ebef1426e..de5570f54 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -22,7 +22,7 @@ <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </p> </div> - + <!-- Sample page content to illustrate the layering of the dialog --> <div class="hiddenInViewSource" style="padding:20px;"> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index a06451b5e..84e998e43 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -1,36 +1,36 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Dialog - Modal Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#dialog").dialog({
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Dialog - Modal Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <script type="text/javascript" src="../../ui/ui.dialog.js"></script> + <script type="text/javascript"> + $(function() { + $("#dialog").dialog({ height:140, modal: true, overlay: { backgroundColor: '#000', opacity: 0.5 } - });
- });
- </script>
-</head>
-<body>
-
+ }); + }); + </script> +</head> +<body> + <div class="demo"> <div id="dialog" title="Basic modal dialog"> <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p> </div> - + <!-- Sample page content to illustrate the layering of the dialog --> <div class="hiddenInViewSource" style="padding:20px;"> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> @@ -55,7 +55,7 @@ <p>This is identical to the default dialog except a semi-transparent overlay layer is added as an option to make this look more modal and dim out the page content behind it to bring the user's attention to the dialog.</p><p>The dialog window can be moved, resized and closed with the 'x' icon.</p> </div><!-- End demo-description --> -
-
-</body>
-</html>
+ + +</body> +</html> diff --git a/demos/dialog/modal_confirmation.html b/demos/dialog/modal_confirmation.html index 44566622b..670131a38 100644 --- a/demos/dialog/modal_confirmation.html +++ b/demos/dialog/modal_confirmation.html @@ -1,16 +1,16 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Dialog - Modal Confirmation Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Dialog - Modal Confirmation Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <script type="text/javascript" src="../../ui/ui.dialog.js"></script> + <script type="text/javascript"> + $(function() { $("#dialog").dialog({ resizable:false, height:140, @@ -27,18 +27,18 @@ $(this).dialog('close'); } } - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> <div class="demo"> <div id="dialog" title="Empty the recycle bin?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> </div> - + <!-- Sample page content to illustrate the layering of the dialog --> <div class="hiddenInViewSource" style="padding:20px;"> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> @@ -63,7 +63,7 @@ <p>This type of dialog adds a button bar and is useful for confirming an action that may be destructive or important. These are typically displayed as modal dialogs to get the user's attention and force a decision before continuing. This example uses the an icon from the css sprite set and is set to be not resizable by setting this option to false.</p> </div><!-- End demo-description --> -
-
-</body>
-</html>
+ + +</body> +</html> diff --git a/demos/dialog/modal_form.html b/demos/dialog/modal_form.html index e272ad826..33894226f 100644 --- a/demos/dialog/modal_form.html +++ b/demos/dialog/modal_form.html @@ -1,17 +1,17 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Dialog - Modal Form Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#dialog").dialog({
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Dialog - Modal Form Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <script type="text/javascript" src="../../ui/ui.dialog.js"></script> + <script type="text/javascript"> + $(function() { + $("#dialog").dialog({ height: '300', modal: true, overlay: { @@ -26,40 +26,40 @@ $(this).dialog('close'); } } - });
- });
- </script>
-
- <!-- Styles for this demo page -->
- <style type="text/css" media="screen">
- label, input { display:block; }
- input.text { margin-bottom:12px; width:95%; }
- fieldset { padding:0; border:0; margin-top:25px; } + }); + }); + </script> + + <!-- Styles for this demo page --> + <style type="text/css" media="screen"> + label, input { display:block; } + input.text { margin-bottom:12px; width:95%; } + fieldset { padding:0; border:0; margin-top:25px; } </style> -
-</head>
-<body>
-
-
-
-
+ +</head> +<body> + + + + <div class="demo"> -<div id="dialog" title="Create new user">
- <p>All form fields are required.</p>
-
- <form>
+<div id="dialog" title="Create new user"> + <p>All form fields are required.</p> + + <form> <fieldset> <label for="name">Name</label> <input type="text" name="name" id="name" class="text" /> <label for="email">Email</label> - <input type="text" name="email" id="email" value="" class="text" />
+ <input type="text" name="email" id="email" value="" class="text" /> <label for="password">Password</label> <input type="password" name="password" id="password" value="" class="text" /> </fieldset> - </form>
+ </form> </div> - + <!-- Sample page content to illustrate the layering of the dialog --> <div class="hiddenInViewSource" style="padding:20px;"> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> @@ -84,6 +84,6 @@ <p>This is an example of how a dialog can be used for data entry by making it larger and embedding a form into the content area. A multi-step wizard could be created by extending this with a step navigation and forward and back buttons.</p> </div><!-- End demo-description --> -
-</body>
-</html>
+ +</body> +</html> diff --git a/demos/dialog/modal_message.html b/demos/dialog/modal_message.html index 721de9349..5f476932c 100644 --- a/demos/dialog/modal_message.html +++ b/demos/dialog/modal_message.html @@ -1,17 +1,17 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Dialog - Modal Message Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <script type="text/javascript" src="../../ui/ui.dialog.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#dialog").dialog({
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Dialog - Modal Message Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.draggable.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <script type="text/javascript" src="../../ui/ui.dialog.js"></script> + <script type="text/javascript"> + $(function() { + $("#dialog").dialog({ modal: true, overlay: { backgroundColor: '#000', @@ -22,24 +22,24 @@ $(this).dialog('close'); } } - });
- });
- </script>
-</head>
-<body>
-
-<div id="dialog" title="Download complete">
- <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Your files have downloaded successfully into the My Downloads folder.</p>
- <p>Currently using <b>36% of your storage space</b>.</p>
-</div>
-
-
+ }); + }); + </script> +</head> +<body> + +<div id="dialog" title="Download complete"> + <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Your files have downloaded successfully into the My Downloads folder.</p> + <p>Currently using <b>36% of your storage space</b>.</p> +</div> + + <div class="demo"> <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </p> </div> - + <!-- Sample page content to illustrate the layering of the dialog --> <div class="hiddenInViewSource" style="padding:20px;"> <p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> @@ -61,9 +61,9 @@ <div class="demo-description"> -<p>A modal message dialog like this is useful for providing information to the user that requires them to explicitly acknowledge before continuing with their work. </p><p>This example adds a button bar with a single 'Ok' button to dismiss the dialog.</p>
+<p>A modal message dialog like this is useful for providing information to the user that requires them to explicitly acknowledge before continuing with their work. </p><p>This example adds a button bar with a single 'Ok' button to dismiss the dialog.</p> </div><!-- End demo-description --> -
-</body>
-</html>
+ +</body> +</html> diff --git a/demos/draggable/zindexstack.html b/demos/draggable/zindexstack.html index d21c0bff4..102a64764 100644 --- a/demos/draggable/zindexstack.html +++ b/demos/draggable/zindexstack.html @@ -28,11 +28,11 @@ <div class="ui-widget-content"> <p>We are draggables..</p> </div> - + <div class="ui-widget-content"> <p>..whose z-indexes are controlled automatically..</p> </div> - + <div class="ui-widget-content"> <p>..with the stack option.</p> </div> diff --git a/demos/droppable/accept.html b/demos/droppable/accept.html index f2b02ba93..e49a250ff 100644 --- a/demos/droppable/accept.html +++ b/demos/droppable/accept.html @@ -14,9 +14,9 @@ </style> <script type="text/javascript"> $(function() { - + $("#draggable,#draggable-nonvalid").draggable(); - + $("#droppable").droppable({ accept: '#draggable', activeClass: 'ui-state-hover', @@ -25,7 +25,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + }); </script> </head> diff --git a/demos/droppable/activeclass.html b/demos/droppable/activeclass.html index 90a8b6cc9..9c97d3ea3 100644 --- a/demos/droppable/activeclass.html +++ b/demos/droppable/activeclass.html @@ -22,7 +22,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + }); </script> </head> diff --git a/demos/droppable/default.html b/demos/droppable/default.html index 50f0a0877..051636a1c 100644 --- a/demos/droppable/default.html +++ b/demos/droppable/default.html @@ -20,7 +20,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + }); </script> </head> diff --git a/demos/droppable/greedy.html b/demos/droppable/greedy.html index ab5e63b3b..d4bdb3fb9 100644 --- a/demos/droppable/greedy.html +++ b/demos/droppable/greedy.html @@ -15,9 +15,9 @@ </style> <script type="text/javascript"> $(function() { - + $("#draggable").draggable(); - + $("#droppable, #droppable-inner").droppable({ activeClass: 'ui-state-hover', hoverClass: 'ui-state-active', @@ -25,7 +25,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + $("#droppable2, #droppable2-inner").droppable({ greedy: true, activeClass: 'ui-state-hover', @@ -34,7 +34,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + }); </script> </head> diff --git a/demos/droppable/hoverclass.html b/demos/droppable/hoverclass.html index 3e8e30ed2..be6e9f9b8 100644 --- a/demos/droppable/hoverclass.html +++ b/demos/droppable/hoverclass.html @@ -21,7 +21,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + }); </script> </head> diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html index 0f181ce1c..56a3ea369 100644 --- a/demos/droppable/revert.html +++ b/demos/droppable/revert.html @@ -14,10 +14,10 @@ </style> <script type="text/javascript"> $(function() { - + $("#draggable").draggable({ revert: 'valid' }); $("#draggable2").draggable({ revert: 'invalid' }); - + $("#droppable").droppable({ activeClass: 'ui-state-hover', hoverClass: 'ui-state-active', @@ -25,7 +25,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + }); </script> </head> diff --git a/demos/droppable/tolerance.html b/demos/droppable/tolerance.html index d49cfcfdd..b0278c6ef 100644 --- a/demos/droppable/tolerance.html +++ b/demos/droppable/tolerance.html @@ -14,9 +14,9 @@ </style> <script type="text/javascript"> $(function() { - + $("#draggable").draggable(); - + $("#droppable").droppable({ activeClass: 'ui-state-hover', hoverClass: 'ui-state-active', @@ -24,7 +24,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + $("#droppable-fit").droppable({ activeClass: 'ui-state-hover', hoverClass: 'ui-state-active', @@ -33,7 +33,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + $("#droppable-pointer").droppable({ activeClass: 'ui-state-hover', hoverClass: 'ui-state-active', @@ -42,7 +42,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + $("#droppable-touch").droppable({ activeClass: 'ui-state-hover', hoverClass: 'ui-state-active', @@ -51,7 +51,7 @@ $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); } }); - + }); </script> </head> diff --git a/demos/index.html b/demos/index.html index 4d13e0ce5..6a3a5212b 100644 --- a/demos/index.html +++ b/demos/index.html @@ -41,18 +41,18 @@ $('#demo-notes').hide(); }); }); - + $('#demo-frame').load(function() { var content = $(this)[0].contentWindow.document || $(this).contents()[0]; var notes = $('.demo-description', content); if ($('#demo-notes').length == 0) { $('<div id="demo-notes"></div>').insertAfter('#demo-config'); - } + } $('#demo-notes').hide().empty().html(notes.html()); $('#demo-notes').fadeIn(); notes.hide(); }); - + if ($('#demo-frame .demo-description:visible')) $('#demo-frame').trigger('load'); }) @@ -62,7 +62,7 @@ ev.preventDefault(); }); }); - </script> + </script> </head> <body> <?php } ?> @@ -76,7 +76,7 @@ <dd><a href="droppable/index.html">Droppable</a></dd> <dd><a href="resizable/index.html">Resizable</a></dd> <dd><a href="selectable/index.html">Selectable</a></dd> - <dd><a href="sortable/index.html">Sortable</a></dd> + <dd><a href="sortable/index.html">Sortable</a></dd> <dt>Widgets</dt> <dd><a href="accordion/index.html">Accordion</a></dd> <dd><a href="datepicker/index.html">Datepicker</a></dd> @@ -91,17 +91,17 @@ </dl> </td> <td class="normal"> - + <div class="normal"> <?php if(isset($plain) && $content) { echo $content; } else { ?> - + <h3>Instructions</h3> <p> These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them. </p> <?php } ?> </div> - + </td> </tr> </table> diff --git a/demos/progressbar/default.html b/demos/progressbar/default.html index 5a53999a7..012e18f07 100644 --- a/demos/progressbar/default.html +++ b/demos/progressbar/default.html @@ -20,7 +20,7 @@ <div class="demo"> <div id="progressbar"></div> - + </div><!-- End demo --> diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html index 2e56e6ab7..171e0495f 100644 --- a/demos/progressbar/index.html +++ b/demos/progressbar/index.html @@ -8,7 +8,7 @@ <div class="demos-nav"> <h4>Examples</h4> - <ul> + <ul> <li class="demo-config-on"><a href="default.html">Default progress bar</a></li> <li><a href="resize.html">Resizable bar</a></li> </ul> diff --git a/demos/progressbar/resize.html b/demos/progressbar/resize.html index 360070a8c..e96938f75 100644 --- a/demos/progressbar/resize.html +++ b/demos/progressbar/resize.html @@ -24,7 +24,7 @@ <body> <div class="demo"> - + <div id="progressbarWrapper" style="height:10px; padding:2px;" class="ui-widget-default"> <div id="progressbar" style="height:100%;"></div> </div> diff --git a/demos/resizable/alsoresize.html b/demos/resizable/alsoresize.html index ad34c6c00..985c62bee 100644 --- a/demos/resizable/alsoresize.html +++ b/demos/resizable/alsoresize.html @@ -1,35 +1,35 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Also Resize Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { background-position: top left; }
- #resizable, #also { width: 150px; height: 150px; padding: 0.5em; }
- #also { margin-top: 1em; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Also Resize Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { background-position: top left; } + #resizable, #also { width: 150px; height: 150px; padding: 0.5em; } + #also { margin-top: 1em; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ alsoResize: '#also' - });
- $("#also").resizable();
- });
- </script>
-</head>
-<body>
-
-<div id="resizable" class="ui-widget-header">
- <p>Resize me</p>
-</div>
+ }); + $("#also").resizable(); + }); + </script> +</head> +<body> + +<div id="resizable" class="ui-widget-header"> + <p>Resize me</p> +</div> <div id="also" class="ui-widget-content"> <p>I will resize with the other div. I can also be resized independently.</p> </div> -
-</body>
-</html>
+ +</body> +</html> diff --git a/demos/resizable/animate.html b/demos/resizable/animate.html index fa8117fc3..1944192c8 100644 --- a/demos/resizable/animate.html +++ b/demos/resizable/animate.html @@ -1,29 +1,29 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Animate Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { width: 150px; height: 150px; padding: 0.5em; }
- .ui-resizable-helper { border: 1px dotted gray; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Animate Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + .ui-resizable-helper { border: 1px dotted gray; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ animate: true - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
-</div>
-
-</body>
-</html>
+<div id="resizable" class="ui-widget-content"> + <p>Resize me</p> +</div> + +</body> +</html> diff --git a/demos/resizable/aspectratio.html b/demos/resizable/aspectratio.html index f38cb2474..bbcb05bd3 100644 --- a/demos/resizable/aspectratio.html +++ b/demos/resizable/aspectratio.html @@ -1,28 +1,28 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Aspect Ratio Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { width: 160px; height: 90px; padding: 0.5em; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Aspect Ratio Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { width: 160px; height: 90px; padding: 0.5em; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ aspectRatio: 16/9 - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
-</div>
-
-</body>
-</html>
+<div id="resizable" class="ui-widget-content"> + <p>Resize me</p> +</div> + +</body> +</html> diff --git a/demos/resizable/containment.html b/demos/resizable/containment.html index 15abea55f..abab89736 100644 --- a/demos/resizable/containment.html +++ b/demos/resizable/containment.html @@ -1,33 +1,33 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Containment Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { background-position: top left; width: 150px; height: 150px; }
- #resizable, #container { padding: 0.5em; }
- #container { width: 300px; height: 300px; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Containment Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { background-position: top left; width: 150px; height: 150px; } + #resizable, #container { padding: 0.5em; } + #container { width: 300px; height: 300px; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ containment: '#container' - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="container" class="ui-widget-content">
+<div id="container" class="ui-widget-content"> <p>Container</p> - <div id="resizable" class="ui-widget-header">
- <p>Resize me</p>
- </div>
+ <div id="resizable" class="ui-widget-header"> + <p>Resize me</p> + </div> </div> -
-</body>
-</html>
+ +</body> +</html> diff --git a/demos/resizable/delay.html b/demos/resizable/delay.html index 7f7930221..bf686eec9 100644 --- a/demos/resizable/delay.html +++ b/demos/resizable/delay.html @@ -1,28 +1,28 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Delay Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { width: 150px; height: 150px; padding: 0.5em; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Delay Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ delay: 1000 - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
-</div>
-
-</body>
-</html>
+<div id="resizable" class="ui-widget-content"> + <p>Resize me</p> +</div> + +</body> +</html> diff --git a/demos/resizable/distance.html b/demos/resizable/distance.html index 26a3c62ce..f8c4ba8ca 100644 --- a/demos/resizable/distance.html +++ b/demos/resizable/distance.html @@ -1,28 +1,28 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Distance Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { width: 150px; height: 150px; padding: 0.5em; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Distance Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ distance: 40 - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
-</div>
-
-</body>
-</html>
+<div id="resizable" class="ui-widget-content"> + <p>Resize me</p> +</div> + +</body> +</html> diff --git a/demos/resizable/ghost.html b/demos/resizable/ghost.html index a84f1f270..4c7b1c7f7 100644 --- a/demos/resizable/ghost.html +++ b/demos/resizable/ghost.html @@ -1,29 +1,29 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Ghost Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { width: 150px; height: 150px; padding: 0.5em; }
- .ui-resizable-ghost { border: 1px dotted gray; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Ghost Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + .ui-resizable-ghost { border: 1px dotted gray; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ ghost: true - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
-</div>
-
-</body>
-</html>
+<div id="resizable" class="ui-widget-content"> + <p>Resize me</p> +</div> + +</body> +</html> diff --git a/demos/resizable/grid.html b/demos/resizable/grid.html index db5d15b40..2cd5badc6 100644 --- a/demos/resizable/grid.html +++ b/demos/resizable/grid.html @@ -1,28 +1,28 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Grid Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { width: 150px; height: 150px; padding: 0.5em; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Grid Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ grid: 50 - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
-</div>
-
-</body>
-</html>
+<div id="resizable" class="ui-widget-content"> + <p>Resize me</p> +</div> + +</body> +</html> diff --git a/demos/resizable/max.html b/demos/resizable/max.html index 175c7dc5e..24b382400 100644 --- a/demos/resizable/max.html +++ b/demos/resizable/max.html @@ -1,29 +1,29 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Max Height / Width Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { width: 150px; height: 150px; padding: 0.5em; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Max Height / Width Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ maxHeight: 250, maxWidth: 350 - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
-</div>
-
-</body>
-</html>
+<div id="resizable" class="ui-widget-content"> + <p>Resize me</p> +</div> + +</body> +</html> diff --git a/demos/resizable/min.html b/demos/resizable/min.html index 95775f41c..2e9606bbd 100644 --- a/demos/resizable/min.html +++ b/demos/resizable/min.html @@ -1,29 +1,29 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Resizable - Min Height / Width Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
- <style type="text/css">
- #resizable { width: 150px; height: 150px; padding: 0.5em; }
- </style>
- <script type="text/javascript">
- $(function() {
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Resizable - Min Height / Width Demo</title> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.2.6.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.resizable.js"></script> + <style type="text/css"> + #resizable { width: 150px; height: 150px; padding: 0.5em; } + </style> + <script type="text/javascript"> + $(function() { $("#resizable").resizable({ minHeight: 50, minWidth: 100 - });
- });
- </script>
-</head>
-<body>
+ }); + }); + </script> +</head> +<body> -<div id="resizable" class="ui-widget-content">
- <p>Resize me</p>
-</div>
-
-</body>
-</html>
+<div id="resizable" class="ui-widget-content"> + <p>Resize me</p> +</div> + +</body> +</html> diff --git a/demos/slider/range.html b/demos/slider/range.html index f86ef23d4..97c3933a1 100644 --- a/demos/slider/range.html +++ b/demos/slider/range.html @@ -32,10 +32,10 @@ <div class="demo-description"> -<p>Example of a range slider that had two drag handles and a filled bar that connects the two handles to indicate that the values between them are selected. THis is created by setting the range option:</p> +<p>Example of a range slider that had two drag handles and a filled bar that connects the two handles to indicate that the values between them are selected. THis is created by setting the range option:</p> <pre> range: true, -</pre> +</pre> </div><!-- End demo-description --> diff --git a/demos/slider/range_vertical.html b/demos/slider/range_vertical.html index 17bdd6920..e2824348e 100644 --- a/demos/slider/range_vertical.html +++ b/demos/slider/range_vertical.html @@ -30,12 +30,12 @@ <div class="demo-description"> -<p>This is an example of a vertical range slider created by setting the orientation to vertical:</p> +<p>This is an example of a vertical range slider created by setting the orientation to vertical:</p> <pre> orientation: "vertical", range: true, values: [17, 67] -</pre> +</pre> <p>It's important to note that a vertical slider needs a height set. You can do this via the script options or by adding a height through CSS. </p> </div><!-- End demo-description --> diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html index c87f36f22..1d610680b 100644 --- a/demos/slider/rangemax.html +++ b/demos/slider/rangemax.html @@ -34,10 +34,10 @@ <div class="demo-description"> -<p>An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider. This makes it clear that selecting a value will also include all values above the selection. This is a range option type:</p> +<p>An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider. This makes it clear that selecting a value will also include all values above the selection. This is a range option type:</p> <pre> range: "max", -</pre> +</pre> <p>This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.</p> </div><!-- End demo-description --> diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html index b8496df01..6d19521d8 100644 --- a/demos/slider/rangemin.html +++ b/demos/slider/rangemin.html @@ -34,10 +34,10 @@ <div class="demo-description"> -<p>An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider. This makes it clear that selecting a value will also include all values below the selection. This is a range option type:</p> +<p>An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider. This makes it clear that selecting a value will also include all values below the selection. This is a range option type:</p> <pre> range: "min", -</pre> +</pre> <p>This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.</p> </div><!-- End demo-description --> diff --git a/demos/slider/slider_vertical.html b/demos/slider/slider_vertical.html index 875addb10..e9ef91d72 100644 --- a/demos/slider/slider_vertical.html +++ b/demos/slider/slider_vertical.html @@ -12,8 +12,8 @@ $("#slider-vertical").slider({ orientation: "vertical", range: "min", - min: 0, - max: 100, + min: 0, + max: 100, value: 60, slide: function(event, ui) { $("#amount").val(ui.value); @@ -36,7 +36,7 @@ <div class="demo-description"> -<p>This is an example of a minimum range vertical slider created by setting the orientation to vertical:</p> <pre>orientation: "vertical",</pre> +<p>This is an example of a minimum range vertical slider created by setting the orientation to vertical:</p> <pre>orientation: "vertical",</pre> <p>It's important to note that a vertical slider needs a height set. You can do this via the script options or by adding a height through CSS. </p> <p>This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.</p> diff --git a/demos/slider/steps.html b/demos/slider/steps.html index efb3da303..97aeee331 100644 --- a/demos/slider/steps.html +++ b/demos/slider/steps.html @@ -35,7 +35,7 @@ <div class="demo-description"> <p>This slider has a step value set that will only allow for increments of 50 to be selected. The default step increment is 1. The drag handle will snap to drop points every 50 units. This is set in an option called step:</p> -<pre> +<pre> min: 0, max: 500, step: 50 </pre> <p>This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.</p> diff --git a/demos/sortable/delaydistance.html b/demos/sortable/delaydistance.html index 19695d9bf..096c1d582 100644 --- a/demos/sortable/delaydistance.html +++ b/demos/sortable/delaydistance.html @@ -13,15 +13,15 @@ </style> <script type="text/javascript"> $(function() { - + $("ul:eq(0)").sortable({ delay: 1000 }); - + $("ul:eq(1)").sortable({ distance: 50 }); - + }); </script> </head> diff --git a/demos/sortable/droponempty.html b/demos/sortable/droponempty.html index 6d1a9b95c..a48e8e932 100644 --- a/demos/sortable/droponempty.html +++ b/demos/sortable/droponempty.html @@ -16,7 +16,7 @@ $("ul.droptrue").sortable({ connectWith: ['ul'] }); - + $("ul.dropfalse").sortable({ connectWith: ['ul'], dropOnEmpty: false diff --git a/demos/sortable/items.html b/demos/sortable/items.html index ac08a0791..078af9990 100644 --- a/demos/sortable/items.html +++ b/demos/sortable/items.html @@ -16,7 +16,7 @@ $("ul:eq(0)").sortable({ items: 'li:not(.ui-state-disabled)' }); - + $("ul:eq(1)").sortable({ cancel: '.ui-state-disabled' }); |