diff options
| author | Richard Worth <rdworth@gmail.com> | 2008-12-30 15:51:51 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2008-12-30 15:51:51 +0000 |
| commit | 9fc23e11080da1422403c762383c9b4bd1f6457e (patch) | |
| tree | 72dac0ca1fbcd8a24e29466e557f3a942eb43660 /demos/sortable | |
| parent | d87a60ec57ed131e86e2a706921840d40741f732 (diff) | |
| download | jquery-ui-9fc23e11080da1422403c762383c9b4bd1f6457e.tar.gz jquery-ui-9fc23e11080da1422403c762383c9b4bd1f6457e.zip | |
set svn:eol-style to native
Diffstat (limited to 'demos/sortable')
| -rw-r--r-- | demos/sortable/connectwith.html | 82 | ||||
| -rw-r--r-- | demos/sortable/default.html | 72 | ||||
| -rw-r--r-- | demos/sortable/delaydistance.html | 102 | ||||
| -rw-r--r-- | demos/sortable/droponempty.html | 102 | ||||
| -rw-r--r-- | demos/sortable/floating.html | 76 | ||||
| -rw-r--r-- | demos/sortable/items.html | 98 | ||||
| -rw-r--r-- | demos/sortable/placeholder.html | 76 |
7 files changed, 304 insertions, 304 deletions
diff --git a/demos/sortable/connectwith.html b/demos/sortable/connectwith.html index 3744cb61a..b3ac6c409 100644 --- a/demos/sortable/connectwith.html +++ b/demos/sortable/connectwith.html @@ -1,41 +1,41 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Sortable - Connected lists</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; float: left; margin-right: 10px; }
- li { margin: 3px; padding: 2px; width: 120px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("ul").sortable({
- connectWith: ['ul']
- });
- });
- </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>
-</ul>
-
-<ul>
- <li class="ui-state-highlight">Item 1</li>
- <li class="ui-state-highlight">Item 2</li>
- <li class="ui-state-highlight">Item 3</li>
- <li class="ui-state-highlight">Item 4</li>
- <li class="ui-state-highlight">Item 5</li>
-</ul>
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Sortable - Connected lists</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; float: left; margin-right: 10px; } + li { margin: 3px; padding: 2px; width: 120px; } + </style> + <script type="text/javascript"> + $(function() { + $("ul").sortable({ + connectWith: ['ul'] + }); + }); + </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> +</ul> + +<ul> + <li class="ui-state-highlight">Item 1</li> + <li class="ui-state-highlight">Item 2</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> +</ul> + +</body> +</html> diff --git a/demos/sortable/default.html b/demos/sortable/default.html index c87e32cd7..6f68cfa81 100644 --- a/demos/sortable/default.html +++ b/demos/sortable/default.html @@ -1,36 +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>
+<!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> diff --git a/demos/sortable/delaydistance.html b/demos/sortable/delaydistance.html index d12d65e5f..19695d9bf 100644 --- a/demos/sortable/delaydistance.html +++ b/demos/sortable/delaydistance.html @@ -1,51 +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>
-
-<p>Delay of 1000ms</p>
-
-<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>
-
-<p>Distance of 50px</p>
-
-<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>
+<!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> + +<p>Delay of 1000ms</p> + +<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> + +<p>Distance of 50px</p> + +<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> diff --git a/demos/sortable/droponempty.html b/demos/sortable/droponempty.html index 1a0202c22..6d1a9b95c 100644 --- a/demos/sortable/droponempty.html +++ b/demos/sortable/droponempty.html @@ -1,51 +1,51 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Sortable - Dropping on empty lists</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; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;}
- li { margin: 3px; padding: 2px; width: 120px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("ul.droptrue").sortable({
- connectWith: ['ul']
- });
-
- $("ul.dropfalse").sortable({
- connectWith: ['ul'],
- dropOnEmpty: false
- });
- });
- </script>
-</head>
-<body>
-
-<ul class='droptrue'>
- <li class="ui-state-default">Can be dropped..</li>
- <li class="ui-state-default">..on an empty list</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>
-
-<ul class='dropfalse'>
- <li class="ui-state-highlight">Cannot be dropped..</li>
- <li class="ui-state-highlight">..on an empty list</li>
- <li class="ui-state-highlight">Item 3</li>
- <li class="ui-state-highlight">Item 4</li>
- <li class="ui-state-highlight">Item 5</li>
-</ul>
-
-<ul class='droptrue'>
-</ul>
-
-<br clear="both" />
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Sortable - Dropping on empty lists</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; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;} + li { margin: 3px; padding: 2px; width: 120px; } + </style> + <script type="text/javascript"> + $(function() { + $("ul.droptrue").sortable({ + connectWith: ['ul'] + }); + + $("ul.dropfalse").sortable({ + connectWith: ['ul'], + dropOnEmpty: false + }); + }); + </script> +</head> +<body> + +<ul class='droptrue'> + <li class="ui-state-default">Can be dropped..</li> + <li class="ui-state-default">..on an empty list</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> + +<ul class='dropfalse'> + <li class="ui-state-highlight">Cannot be dropped..</li> + <li class="ui-state-highlight">..on an empty list</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> +</ul> + +<ul class='droptrue'> +</ul> + +<br clear="both" /> + +</body> +</html> diff --git a/demos/sortable/floating.html b/demos/sortable/floating.html index d0e48071b..6f940929b 100644 --- a/demos/sortable/floating.html +++ b/demos/sortable/floating.html @@ -1,38 +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>
+<!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> diff --git a/demos/sortable/items.html b/demos/sortable/items.html index 810daf554..ac08a0791 100644 --- a/demos/sortable/items.html +++ b/demos/sortable/items.html @@ -1,49 +1,49 @@ -<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Sortable - Items</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:eq(0)").sortable({
- items: 'li:not(.ui-state-disabled)'
- });
-
- $("ul:eq(1)").sortable({
- cancel: '.ui-state-disabled'
- });
- });
- </script>
-</head>
-<body>
-
-<p>Completely exclude items from the sorting logic using the 'items' option</p>
-
-<ul>
- <li class="ui-state-default">Item 1</li>
- <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
- <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
- <li class="ui-state-default">Item 4</li>
- <li class="ui-state-default">Item 5</li>
-</ul>
-
-<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
-
-<ul>
- <li class="ui-state-default">Item 1</li>
- <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
- <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
- <li class="ui-state-default">Item 4</li>
- <li class="ui-state-default">Item 5</li>
-</ul>
-
-</body>
-</html>
+<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Sortable - Items</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:eq(0)").sortable({ + items: 'li:not(.ui-state-disabled)' + }); + + $("ul:eq(1)").sortable({ + cancel: '.ui-state-disabled' + }); + }); + </script> +</head> +<body> + +<p>Completely exclude items from the sorting logic using the 'items' option</p> + +<ul> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> +</ul> + +<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p> + +<ul> + <li class="ui-state-default">Item 1</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li> + <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li> + <li class="ui-state-default">Item 4</li> + <li class="ui-state-default">Item 5</li> +</ul> + +</body> +</html> diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html index 6a4e70dca..68d6ecdbe 100644 --- a/demos/sortable/placeholder.html +++ b/demos/sortable/placeholder.html @@ -1,38 +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>
+<!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> |