r1426 - trunk/demos/selectable

Author: rdworth
Date: Wed Dec 31 15:27:40 2008
New Revision: 1426
Added:
trunk/demos/selectable/floating.html
trunk/demos/selectable/serializing.html
Modified:
trunk/demos/selectable/default.html
trunk/demos/selectable/index.html
Log:
demos/sortable: touched up selectable demos
Modified: trunk/demos/selectable/default.html
==============================================================================
--- trunk/demos/selectable/default.html    (original)
+++ trunk/demos/selectable/default.html    Wed Dec 31 15:27:40 2008
@@ -9,24 +9,15 @@
    <link type="text/css" href="../demos.css" rel="stylesheet" />

    <style type="text/css">
-    #selectable .ui-selecting {
-        background: #FECA40;
-    }
-    #selectable .ui-selected {
-        background: #F39814;
-    }
+    #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.6em; height:
1.4em; font-weight: bold; }
    </style>
    <script type="text/javascript">
    $(function() {
-        $("#selectable").selectable({
-            stop:function(){
-                var result = $("#select-result");
-                result.text("");
-                $("#selectable > .ui-selected").each(function(){
-                    result.text( result.text() + " #" + ($("#selectable
li").index(this)+1) );
-                });
-            }
-        });
+        $("#selectable").selectable();
    });
    </script>
</head>
@@ -34,20 +25,21 @@
<div class="demo">
<ol id="selectable">
-    <li>Draw a box with your mouse to select items.</li>
-    <li>Draw a box with your mouse to select items.</li>
-    <li>Draw a box with your mouse to select items.</li>
-    <li>Draw a box with your mouse to select items.</li>
-    <li>Draw a box with your mouse to select items.</li>
+    <li class="ui-widget-content">Item 1</li>
+    <li class="ui-widget-content">Item 2</li>
+    <li class="ui-widget-content">Item 3</li>
+    <li class="ui-widget-content">Item 4</li>
+    <li class="ui-widget-content">Item 5</li>
+    <li class="ui-widget-content">Item 6</li>
+    <li class="ui-widget-content">Item 7</li>
</ol>
-You've selected: <span id="select-result">none</span>.
</div>
<div class="demo-description">

-
+Draw a box with your mouse to select items. You can also hold down the
Ctrl key to make multiple (non-adjacent) selections.

</div>
Added: trunk/demos/selectable/floating.html
==============================================================================
--- (empty file)
+++ trunk/demos/selectable/floating.html    Wed Dec 31 15:27:40 2008
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Selectable - Floating Demo</title>
+    <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.selectable.js"></script>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+
+    <style type="text/css">
+    #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: 100px; font-size: 4em; text-align: center; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#selectable").selectable();
+    });
+    </script>
+</head>
+<body>
+<div class="demo">
+
+<ol id="selectable">
+    <li class="ui-state-default">1</li>
+    <li class="ui-state-default">2</li>
+    <li class="ui-state-default">3</li>
+    <li class="ui-state-default">4</li>
+    <li class="ui-state-default">5</li>
+    <li class="ui-state-default">6</li>
+    <li class="ui-state-default">7</li>
+    <li class="ui-state-default">8</li>
+    <li class="ui-state-default">9</li>
+    <li class="ui-state-default">10</li>
+    <li class="ui-state-default">11</li>
+    <li class="ui-state-default">12</li>
+</ol>
+
+</div>
+
+<div class="demo-description">
+
+

+Draw a box with your mouse to select items. You can also hold down the
Ctrl key to make multiple (non-adjacent) selections.
+

+
+</div>
+</body>
+</html>
Modified: trunk/demos/selectable/index.html
==============================================================================
--- trunk/demos/selectable/index.html    (original)
+++ trunk/demos/selectable/index.html    Wed Dec 31 15:27:40 2008
@@ -10,6 +10,8 @@
    <h4>Examples</h4>
    <ul>
        <li class="demo-config-on"><a href="default.html">Default</a></li>
+        <li><a href="floating.html">Floating</a></li>
+        <li><a href="serializing.html">Serializing</a></li>
    </ul>
</div>
Added: trunk/demos/selectable/serializing.html
==============================================================================
--- (empty file)
+++ trunk/demos/selectable/serializing.html    Wed Dec 31 15:27:40 2008
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Selectable - Serializing Demo</title>
+    <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.selectable.js"></script>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+
+    <style type="text/css">
+    #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.6em; height:
1.4em; font-weight: bold; }
+    </style>
+    <script type="text/javascript">
+    $(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));
+                });
+            }
+        });
+    });
+    </script>
+</head>
+<body>
+<div class="demo">
+
+<p id="feedback">
+You've selected: <span id="select-result">none</span>.
+
+
+<ol id="selectable">
+    <li class="ui-widget-content">Item 1</li>
+    <li class="ui-widget-content">Item 2</li>
+    <li class="ui-widget-content">Item 3</li>
+    <li class="ui-widget-content">Item 4</li>
+    <li class="ui-widget-content">Item 5</li>
+    <li class="ui-widget-content">Item 6</li>
+    <li class="ui-widget-content">Item 7</li>
+</ol>
+
+</div>
+
+<div class="demo-description">
+
+

+Draw a box with your mouse to select items. You can also hold down the
Ctrl key to make multiple (non-adjacent) selections.
+

+
+</div>
+</body>
+</html>