r1381 - in trunk/demos: . accordion datepicker dialog draggable droppable progressbar resizable s...

r1381 - in trunk/demos: . accordion datepicker dialog draggable droppable progressbar resizable s...


Author: rdworth
Date: Tue Dec 30 17:20:50 2008
New Revision: 1381
Modified:
trunk/demos/accordion/custom_icons.html
trunk/demos/datepicker/inline.html (contents, props changed)
trunk/demos/demos.css
trunk/demos/dialog/default.html
trunk/demos/dialog/modal.html (contents, props changed)
trunk/demos/dialog/modal_confirmation.html (contents, props changed)
trunk/demos/dialog/modal_form.html (contents, props changed)
trunk/demos/dialog/modal_message.html (contents, props changed)
trunk/demos/draggable/zindexstack.html
trunk/demos/droppable/accept.html
trunk/demos/droppable/activeclass.html
trunk/demos/droppable/default.html
trunk/demos/droppable/greedy.html
trunk/demos/droppable/hoverclass.html
trunk/demos/droppable/revert.html
trunk/demos/droppable/tolerance.html
trunk/demos/index.html
trunk/demos/progressbar/default.html
trunk/demos/progressbar/index.html
trunk/demos/progressbar/resize.html (contents, props changed)
trunk/demos/resizable/alsoresize.html (contents, props changed)
trunk/demos/resizable/animate.html (contents, props changed)
trunk/demos/resizable/aspectratio.html (contents, props changed)
trunk/demos/resizable/containment.html (contents, props changed)
trunk/demos/resizable/delay.html (contents, props changed)
trunk/demos/resizable/distance.html (contents, props changed)
trunk/demos/resizable/ghost.html (contents, props changed)
trunk/demos/resizable/grid.html (contents, props changed)
trunk/demos/resizable/max.html (contents, props changed)
trunk/demos/resizable/min.html (contents, props changed)
trunk/demos/slider/range.html
trunk/demos/slider/range_vertical.html
trunk/demos/slider/rangemax.html
trunk/demos/slider/rangemin.html
trunk/demos/slider/slider_vertical.html
trunk/demos/slider/steps.html
trunk/demos/sortable/delaydistance.html
trunk/demos/sortable/droponempty.html
trunk/demos/sortable/items.html
Log:
demos: whitespace fixes
- trailing whitespace
- inconsistent line endings
- set svn:eol-style to native
Modified: trunk/demos/accordion/custom_icons.html
==============================================================================
--- trunk/demos/accordion/custom_icons.html    (original)
+++ trunk/demos/accordion/custom_icons.html    Tue Dec 30 17:20:50 2008
@@ -63,7 +63,7 @@

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"}
Modified: trunk/demos/datepicker/inline.html
==============================================================================
--- trunk/demos/datepicker/inline.html    (original)
+++ trunk/demos/datepicker/inline.html    Tue Dec 30 17:20:50 2008
@@ -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 @@

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.


-</div><!-- End demo-description -->
-
-</body>
-</html>
+</div><!-- End demo-description -->
+
+</body>
+</html>
Modified: trunk/demos/demos.css
==============================================================================
--- trunk/demos/demos.css    (original)
+++ trunk/demos/demos.css    Tue Dec 30 17:20:50 2008
@@ -110,7 +110,7 @@
    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 @@
#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 @@
#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;
Modified: trunk/demos/dialog/default.html
==============================================================================
--- trunk/demos/dialog/default.html    (original)
+++ trunk/demos/dialog/default.html    Tue Dec 30 17:20:50 2008
@@ -22,7 +22,7 @@
    <div id="dialog" title="Basic dialog">
        

This is the default dialog which is useful for displaying
information. The dialog window can be moved, resized and closed with
the 'x' icon.


    </div>
-    
+
    <!-- Sample page content to illustrate the layering of the dialog -->
    <div class="hiddenInViewSource" style="padding:20px;">
    

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.



Modified: trunk/demos/dialog/modal.html
==============================================================================
--- trunk/demos/dialog/modal.html    (original)
+++ trunk/demos/dialog/modal.html    Tue Dec 30 17:20:50 2008
@@ -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">
        

Adding the modal overlay screen makes the dialog look more prominent
because it dims out the page content.


    </div>
-    
+
    <!-- Sample page content to illustrate the layering of the dialog -->
    <div class="hiddenInViewSource" style="padding:20px;">
    

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.



@@ -55,7 +55,7 @@

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.


The dialog window can be moved, resized and closed with
the 'x' icon.


</div><!-- End demo-description -->
-
-
-</body>
-</html>
+
+
+</body>
+</html>
Modified: trunk/demos/dialog/modal_confirmation.html
==============================================================================
--- trunk/demos/dialog/modal_confirmation.html    (original)
+++ trunk/demos/dialog/modal_confirmation.html    Tue Dec 30 17:20:50 2008
@@ -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?">
        

<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?


    </div>
-    
+
    <!-- Sample page content to illustrate the layering of the dialog -->
    <div class="hiddenInViewSource" style="padding:20px;">
    

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.



@@ -63,7 +63,7 @@

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.




</div><!-- End demo-description -->
-
-
-</body>
-</html>
+
+
+</body>
+</html>
Modified: trunk/demos/dialog/modal_form.html
==============================================================================
--- trunk/demos/dialog/modal_form.html    (original)
+++ trunk/demos/dialog/modal_form.html    Tue Dec 30 17:20:50 2008
@@ -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">
-    

All form fields are required.


-    
-    <form>
+<div id="dialog" title="Create new user">
+    

All form fields are required.


+
+    <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;">
    

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.



@@ -84,6 +84,6 @@

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.



</div><!-- End demo-description -->
-
-</body>
-</html>
+
+</body>
+</html>
Modified: trunk/demos/dialog/modal_message.html
==============================================================================
--- trunk/demos/dialog/modal_message.html    (original)
+++ trunk/demos/dialog/modal_message.html    Tue Dec 30 17:20:50 2008
@@ -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">
-    

<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.


-    

Currently using <b>36% of your storage space</b>.


-</div>
-
-
+        });
+    });
+    </script>
+</head>
+<body>
+
+<div id="dialog" title="Download complete">
+    

<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.


+    

Currently using <b>36% of your storage space</b>.


+</div>
+
+
<div class="demo">
    <div id="dialog" title="Basic dialog">
        

This is the default dialog which is useful for displaying
information. The dialog window can be moved, resized and closed with
the 'x' icon.


    </div>
-    
+
    <!-- Sample page content to illustrate the layering of the dialog -->
    <div class="hiddenInViewSource" style="padding:20px;">
    

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.



@@ -61,9 +61,9 @@
<div class="demo-description">
-

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.

This example adds a button bar with a single 'Ok'
button to dismiss the dialog.


+

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.

This example adds a button bar with a single 'Ok'
button to dismiss the dialog.


</div><!-- End demo-description -->
-
-</body>
-</html>
+
+</body>
+</html>
Modified: trunk/demos/draggable/zindexstack.html
==============================================================================
--- trunk/demos/draggable/zindexstack.html    (original)
+++ trunk/demos/draggable/zindexstack.html    Tue Dec 30 17:20:50 2008
@@ -28,11 +28,11 @@
    <div class="ui-widget-content">
        

We are draggables..


    </div>
-    
+
    <div class="ui-widget-content">
        

..whose z-indexes are controlled automatically..


    </div>
-    
+
    <div class="ui-widget-content">
        

..with the stack option.


    </div>
Modified: trunk/demos/droppable/accept.html
==============================================================================
--- trunk/demos/droppable/accept.html    (original)
+++ trunk/demos/droppable/accept.html    Tue Dec 30 17:20:50 2008
@@ -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>
Modified: trunk/demos/droppable/activeclass.html
==============================================================================
--- trunk/demos/droppable/activeclass.html    (original)
+++ trunk/demos/droppable/activeclass.html    Tue Dec 30 17:20:50 2008
@@ -22,7 +22,7 @@
                $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
            }
        });
-        
+
    });
    </script>
</head>
Modified: trunk/demos/droppable/default.html
==============================================================================
--- trunk/demos/droppable/default.html    (original)
+++ trunk/demos/droppable/default.html    Tue Dec 30 17:20:50 2008
@@ -20,7 +20,7 @@
                $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
            }
        });
-        
+
    });
    </script>
</head>
Modified: trunk/demos/droppable/greedy.html
==============================================================================
--- trunk/demos/droppable/greedy.html    (original)
+++ trunk/demos/droppable/greedy.html    Tue Dec 30 17:20:50 2008
@@ -15,9 +15,9 @@
    </style>
    <script type="text/javascript">
    $(function() {
-        
+
        $("#draggable").draggable();
-        
+
        $("#droppable, #droppable-inner").droppable({
            activeClass: 'ui-state-hover',
            hoverClass: 'ui-state-act