r1320 - trunk/demos/sortable

r1320 - trunk/demos/sortable


Author: paul.bakaus
Date: Tue Dec 30 05:58:38 2008
New Revision: 1320
Added:
trunk/demos/sortable/default.html
trunk/demos/sortable/delaydistance.html
trunk/demos/sortable/floating.html
trunk/demos/sortable/placeholder.html
Modified:
trunk/demos/sortable/index.html
Log:
demos: first bunch of sortable demos
Added: trunk/demos/sortable/default.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/default.html    Tue Dec 30 05:58:38 2008
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Sortable - Default 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.sortable.js"></script>
+    <style type="text/css">
+    ul { list-style-type: none; margin: 0; padding: 0; }
+    li { margin: 3px; padding: 2px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("ul").sortable();
+    });
+    </script>
+</head>
+<body>
+
+<ul>
+    <li class="ui-state-default">Item 1</li>
+    <li class="ui-state-default">Item 2</li>
+    <li class="ui-state-default">Item 3</li>
+    <li class="ui-state-default">Item 4</li>
+    <li class="ui-state-default">Item 5</li>
+    <li class="ui-state-default">Item 6</li>
+    <li class="ui-state-default">Item 7</li>
+    <li class="ui-state-default">Item 8</li>
+    <li class="ui-state-default">Item 9</li>
+    <li class="ui-state-default">Item 10</li>
+</ul>
+
+</body>
+</html>
Added: trunk/demos/sortable/delaydistance.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/delaydistance.html    Tue Dec 30 05:58:38 2008
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Sortable - Delay / Distance</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.sortable.js"></script>
+    <style type="text/css">
+    ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
+    li { margin: 3px; padding: 2px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        
+        $("ul:eq(0)").sortable({
+            delay: 1000
+        });
+        
+        $("ul:eq(1)").sortable({
+            distance: 50
+        });
+        
+    });
+    </script>
+</head>
+<body>
+
+

Delay of 1000ms


+
+<ul>
+    <li class="ui-state-default">Item 1</li>
+    <li class="ui-state-default">Item 2</li>
+    <li class="ui-state-default">Item 3</li>
+    <li class="ui-state-default">Item 4</li>
+    <li class="ui-state-default">Item 5</li>
+</ul>
+
+

Distance of 50px


+
+<ul>
+    <li class="ui-state-default">Item 1</li>
+    <li class="ui-state-default">Item 2</li>
+    <li class="ui-state-default">Item 3</li>
+    <li class="ui-state-default">Item 4</li>
+    <li class="ui-state-default">Item 5</li>
+</ul>
+
+</body>
+</html>
Added: trunk/demos/sortable/floating.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/floating.html    Tue Dec 30 05:58:38 2008
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Sortable - Floating</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.sortable.js"></script>
+    <style type="text/css">
+    ul { list-style-type: none; margin: 0; padding: 0; }
+    li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px;
}
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("ul").sortable();
+    });
+    </script>
+</head>
+<body>
+
+<ul>
+    <li class="ui-state-default">Item 1</li>
+    <li class="ui-state-default">Item 2</li>
+    <li class="ui-state-default">Item 3</li>
+    <li class="ui-state-default">Item 4</li>
+    <li class="ui-state-default">Item 5</li>
+    <li class="ui-state-default">Item 6</li>
+    <li class="ui-state-default">Item 7</li>
+    <li class="ui-state-default">Item 8</li>
+    <li class="ui-state-default">Item 9</li>
+    <li class="ui-state-default">Item 10</li>
+    <li class="ui-state-default">Item 11</li>
+    <li class="ui-state-default">Item 12</li>
+</ul>
+
+</body>
+</html>
Modified: trunk/demos/sortable/index.html
==============================================================================
--- trunk/demos/sortable/index.html    (original)
+++ trunk/demos/sortable/index.html    Tue Dec 30 05:58:38 2008
@@ -10,6 +10,10 @@
    <h4>Sortable</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="placeholder.html">Placeholder</a></li>
+        <li><a href="delaydistance.html">Delay / Distance</a></li>
+        
    </ul>
</div>
Added: trunk/demos/sortable/placeholder.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/placeholder.html    Tue Dec 30 05:58:38 2008
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Sortable - Placeholder</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.sortable.js"></script>
+    <style type="text/css">
+    ul { list-style-type: none; margin: 0; padding: 0; }
+    li { margin: 3px; padding: 2px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("ul").sortable({
+            placeholder: 'ui-state-highlight'
+        });
+    });
+    </script>
+</head>
+<body>
+
+<ul>
+    <li class="ui-state-default">Item 1</li>
+    <li class="ui-state-default">Item 2</li>
+    <li class="ui-state-default">Item 3</li>
+    <li class="ui-state-default">Item 4</li>
+    <li class="ui-state-default">Item 5</li>
+    <li class="ui-state-default">Item 6</li>
+    <li class="ui-state-default">Item 7</li>
+    <li class="ui-state-default">Item 8</li>
+    <li class="ui-state-default">Item 9</li>
+    <li class="ui-state-default">Item 10</li>
+</ul>
+
+</body>
+</html>