r1435 - in trunk/demos: datepicker draggable droppable resizable

r1435 - in trunk/demos: datepicker draggable droppable resizable


Author: rdworth
Date: Wed Dec 31 16:27:45 2008
New Revision: 1435
Removed:
trunk/demos/droppable/tolerance.html
Modified:
trunk/demos/datepicker/buttonbar.html
trunk/demos/datepicker/default.html
trunk/demos/datepicker/dropdown_month_year.html
trunk/demos/datepicker/inline.html
trunk/demos/datepicker/multiple_calendars.html
trunk/demos/draggable/index.html
trunk/demos/droppable/greedy.html
trunk/demos/droppable/index.html
trunk/demos/resizable/alsoresize.html
trunk/demos/resizable/animate.html
trunk/demos/resizable/aspectratio.html
trunk/demos/resizable/containment.html
trunk/demos/resizable/default.html
trunk/demos/resizable/delay.html
trunk/demos/resizable/distance.html
trunk/demos/resizable/ghost.html
trunk/demos/resizable/grid.html
trunk/demos/resizable/index.html
trunk/demos/resizable/max.html
trunk/demos/resizable/min.html
Log:
demos: touch up
Modified: trunk/demos/datepicker/buttonbar.html
==============================================================================
--- trunk/demos/datepicker/buttonbar.html    (original)
+++ trunk/demos/datepicker/buttonbar.html    Wed Dec 31 16:27:45 2008
@@ -9,7 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
-        $('#date123').datepicker({
+        $('#datepicker').datepicker({
            showButtonPanel: true
        });
    });
@@ -19,12 +19,9 @@
<div class="demo">
-

Date: <input type="text" id="date123">


-
+

Date: <input type="text" id="datepicker">


</div><!-- End demo -->
-
-
<div class="demo-description">
Modified: trunk/demos/datepicker/default.html
==============================================================================
--- trunk/demos/datepicker/default.html    (original)
+++ trunk/demos/datepicker/default.html    Wed Dec 31 16:27:45 2008
@@ -9,7 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
-        $("#date123").datepicker();
+        $("#datepicker").datepicker();
    });
    </script>
</head>
@@ -17,11 +17,9 @@
<div class="demo">
-Date: <input type="text" id="date123" />
+

Date: <input type="text" id="datepicker">


</div><!-- End demo -->
-
-
<div class="demo-description">
Modified: trunk/demos/datepicker/dropdown_month_year.html
==============================================================================
--- trunk/demos/datepicker/dropdown_month_year.html    (original)
+++ trunk/demos/datepicker/dropdown_month_year.html    Wed Dec 31 16:27:45 2008
@@ -9,7 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
-        $('#date123').datepicker({
+        $('#datepicker').datepicker({
            changeMonth: true,
            changeYear: true
        });
@@ -20,11 +20,9 @@
<div class="demo">
-

Date: <input type="text" id="date123">


+

Date: <input type="text" id="datepicker">


</div><!-- End demo -->
-
-
<div class="demo-description">
Modified: trunk/demos/datepicker/inline.html
==============================================================================
--- trunk/demos/datepicker/inline.html    (original)
+++ trunk/demos/datepicker/inline.html    Wed Dec 31 16:27:45 2008
@@ -9,24 +9,24 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
-        $("#date123").datepicker();
+        $("#datepicker").datepicker();
    });
    </script>
</head>
<body>
-
<div class="demo">
-Date: <div id="date123" /></div>
+Date: <div id="datepicker" /></div>
</div><!-- End demo -->
-
-
<div class="demo-description">
-

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.


+


+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() on a div instead of an input.
+




</div><!-- End demo-description -->
Modified: trunk/demos/datepicker/multiple_calendars.html
==============================================================================
--- trunk/demos/datepicker/multiple_calendars.html    (original)
+++ trunk/demos/datepicker/multiple_calendars.html    Wed Dec 31 16:27:45 2008
@@ -9,7 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
-        $('#date123').datepicker({
+        $('#datepicker').datepicker({
            numberOfMonths: 3,
            showButtonPanel: true
        });
@@ -20,18 +20,29 @@
<div class="demo">
-

Date: <input type="text" id="date123">


+

Date: <input type="text" id="datepicker">


</div><!-- End demo -->
-
-
<div class="demo-description">
-

This datepicker shows two months at a time by setting the
numberOfMonths option to 3. This can be set to any number that will fit
within your layout. The multiple calendars are used to make it easier to
visually scan across months and make a selection. This is not a date range
picker. In a future release, a custom date range plugin will be added. For
users that want to use the old date range picker built into the datepicker,
they must use the previous version of this plugin.






+


+This datepicker shows three months at a time by setting the
<code>numberOfMonths</code> option to 3.
+This can be set to any number that will fit within your layout.
+The multiple calendars are used to make it easier to visually scan across
months and make a selection.
+






+
+<div style="padding: 0pt 0.7em; margin-top: 20px;"
class="ui-state-highlight ui-corner-all">
+


+<span style="float: left; margin-right: 0.3em;" class="ui-icon
ui-icon-info"></span>
+<strong>Note:</strong>
+This is not a date range picker.
+In a future release, a custom date range plugin will be added.
+For users that want to use the old date range picker built into the
datepicker, they must use the previous version of this plugin (v1.5.3).
+








+</div>
</div><!-- End demo-description -->
-
</body>
</html>
Modified: trunk/demos/draggable/index.html
==============================================================================
--- trunk/demos/draggable/index.html    (original)
+++ trunk/demos/draggable/index.html    Wed Dec 31 16:27:45 2008
@@ -9,7 +9,7 @@
<div class="demos-nav">
    <h4>Examples</h4>
    <ul>
-        <li class="demo-config-on"><a href="default.html">Default</a></li>
+        <li class="demo-config-on"><a href="default.html">Default
Draggable</a></li>
        <li><a href="axis.html">Axis</a></li>
        <li><a href="containment.html">Containment</a></li>
        <li><a href="cursorat.html">cursorAt</a></li>
Modified: trunk/demos/droppable/greedy.html
==============================================================================
--- trunk/demos/droppable/greedy.html    (original)
+++ trunk/demos/droppable/greedy.html    Wed Dec 31 16:27:45 2008
@@ -9,9 +9,9 @@
    <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
-    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left;
margin: 10px; }
-    #droppable, #droppable2 { width: 200px; height: 160px; padding: 0.5em;
float: left; margin: 10px; }
-    #droppable-inner, #droppable2-inner { width: 140px; height: 100px;
padding: 0.5em; float: left; margin: 10px; }
+    #draggable { width: 100px; height: 40px; padding: 0.5em; float: left;
margin: 10px; }
+    #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">
    $(function() {
@@ -46,16 +46,16 @@
</div>
<div id="droppable" class="ui-widget-header">
-    

Outer droppable (greedy deactivated)


+    

Outer droppable


    <div id="droppable-inner" class="ui-widget-header">
-        

Inner droppable (greedy deactivated)


+        

Inner droppable (not greedy)


    </div>
</div>
<div id="droppable2" class="ui-widget-header">
-    

Outer droppable (greedy deactivated)


+    

Outer droppable


    <div id="droppable2-inner" class="ui-widget-header">
-        

Inner droppable (greedy deactivated)


+        

Inner droppable (greedy)


    </div>
</div>
Modified: trunk/demos/droppable/index.html
==============================================================================
--- trunk/demos/droppable/index.html    (original)
+++ trunk/demos/droppable/index.html    Wed Dec 31 16:27:45 2008
@@ -9,13 +9,12 @@
<div class="demos-nav">
    <h4>Examples</h4>
    <ul>
-        <li class="demo-config-on"><a href="default.html">Default</a></li>
-        <li><a href="accept.html">accept</a></li>
-        <li><a href="hoverclass.html">hoverClass</a></li>
-        <li><a href="activeclass.html">activeClass</a></li>
-        <li><a href="greedy.html">greedy</a></li>
-        <li><a href="tolerance.html">tolerance</a></li>
-        <li><a href="revert.html">revert</a></li>
+        <li class="demo-config-on"><a href="default.html">Default
Droppable</a></li>
+        <li><a href="accept.html">Accept</a></li>
+        <li><a href="hoverclass.html">Hover Class</a></li>
+        <li><a href="activeclass.html">Active Class</a></li>
+        <li><a href="greedy.html">Greedy</a></li>
+        <li><a href="revert.html">Revert</a></li>
    </ul>
</div>
Modified: trunk/demos/resizable/alsoresize.html
==============================================================================
--- trunk/demos/resizable/alsoresize.html    (original)
+++ trunk/demos/resizable/alsoresize.html    Wed Dec 31 16:27:45 2008
@@ -10,6 +10,7 @@
    <style type="text/css">
    #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">
@@ -25,11 +26,11 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-header">
-    

Resize me


+    <h3 class="ui-state-active">Resize</h3>
</div>
<div id="also" class="ui-widget-content">
-    

I will resize with the other div. I can also be resized
independently.


+    <h3 class="ui-widget-header">will also resize</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/animate.html
==============================================================================
--- trunk/demos/resizable/animate.html    (original)
+++ trunk/demos/resizable/animate.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #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">
@@ -23,7 +24,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">Animate</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/aspectratio.html
==============================================================================
--- trunk/demos/resizable/aspectratio.html    (original)
+++ trunk/demos/resizable/aspectratio.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #resizable { width: 160px; height: 90px; padding: 0.5em; }
+    #resizable h3 { text-align: center; margin: 0; }
    </style>
    <script type="text/javascript">
    $(function() {
@@ -22,7 +23,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">Aspect Ratio</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/containment.html
==============================================================================
--- trunk/demos/resizable/containment.html    (original)
+++ trunk/demos/resizable/containment.html    Wed Dec 31 16:27:45 2008
@@ -8,9 +8,10 @@
    <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
+    #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; }
-    #container { width: 300px; height: 300px; }
    </style>
    <script type="text/javascript">
    $(function() {
@@ -24,9 +25,9 @@
<div class="demo">
    
<div id="container" class="ui-widget-content">
-    

Container


-    <div id="resizable" class="ui-widget-header">
-        

Resize me


+    <h3 class="ui-widget-header">Containment</h3>
+    <div id="resizable" class="ui-state-active">
+        <h3 class="ui-widget-header">Resizable</h3>
    </div>
</div>
Modified: trunk/demos/resizable/default.html
==============================================================================
--- trunk/demos/resizable/default.html    (original)
+++ trunk/demos/resizable/default.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
+    #resizable h3 { text-align: center; margin: 0; }
    </style>
    <script type="text/javascript">
    $(function() {
@@ -20,7 +21,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">Resizable</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/delay.html
==============================================================================
--- trunk/demos/resizable/delay.html    (original)
+++ trunk/demos/resizable/delay.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
+    #resizable h3 { text-align: center; margin: 0; }
    </style>
    <script type="text/javascript">
    $(function() {
@@ -22,7 +23,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">Delay</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/distance.html
==============================================================================
--- trunk/demos/resizable/distance.html    (original)
+++ trunk/demos/resizable/distance.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
+    #resizable h3 { text-align: center; margin: 0; }
    </style>
    <script type="text/javascript">
    $(function() {
@@ -22,7 +23,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">Distance</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/ghost.html
==============================================================================
--- trunk/demos/resizable/ghost.html    (original)
+++ trunk/demos/resizable/ghost.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #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">
@@ -23,7 +24,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">Ghost</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/grid.html
==============================================================================
--- trunk/demos/resizable/grid.html    (original)
+++ trunk/demos/resizable/grid.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
+    #resizable h3 { text-align: center; margin: 0; }
    </style>
    <script type="text/javascript">
    $(function() {
@@ -22,7 +23,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">Grid</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/index.html
==============================================================================
--- trunk/demos/resizable/index.html    (original)
+++ trunk/demos/resizable/index.html    Wed Dec 31 16:27:45 2008
@@ -9,7 +9,7 @@
<div class="demos-nav">
    <h4>Examples</h4>
    <ul>
-        <li class="demo-config-on"><a href="default.html">Default</a></li>
+        <li class="demo-config-on"><a href="default.html">Default
Resizable</a></li>
        <li><a href="alsoresize.html">Also Resize</a></li>
        <li><a href="animate.html">Animate</a></li>
        <li><a href="aspectratio.html">Aspect Ratio</a></li>
Modified: trunk/demos/resizable/max.html
==============================================================================
--- trunk/demos/resizable/max.html    (original)
+++ trunk/demos/resizable/max.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
+    #resizable h3 { text-align: center; margin: 0; }
    </style>
    <script type="text/javascript">
    $(function() {
@@ -23,7 +24,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">maxHeight / maxWidth</h3>
</div>
</div><!-- End demo -->
Modified: trunk/demos/resizable/min.html
==============================================================================
--- trunk/demos/resizable/min.html    (original)
+++ trunk/demos/resizable/min.html    Wed Dec 31 16:27:45 2008
@@ -9,6 +9,7 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
+    #resizable h3 { text-align: center; margin: 0; }
    </style>
    <script type="text/javascript">
    $(function() {
@@ -23,7 +24,7 @@
<div class="demo">
    
<div id="resizable" class="ui-widget-content">
-    

Resize me


+    <h3 class="ui-widget-header">minHeight / minWidth</h3>
</div>
</div><!-- End demo -->