aboutsummaryrefslogtreecommitdiffstats
path: root/demos/sortable
diff options
context:
space:
mode:
authorRichard Worth <rdworth@gmail.com>2008-12-31 06:29:31 +0000
committerRichard Worth <rdworth@gmail.com>2008-12-31 06:29:31 +0000
commit016eb2487a0c781d35a75131134db97453f8ace7 (patch)
tree58bf4c827f7f946bd8730462e64cd10dae6fce2f /demos/sortable
parentac1866a7b09c6356d2ab25215f6de2bf0ee12803 (diff)
downloadjquery-ui-016eb2487a0c781d35a75131134db97453f8ace7.tar.gz
jquery-ui-016eb2487a0c781d35a75131134db97453f8ace7.zip
demos: moved the demos.css link down so it can override default theme styles. other minor updates.
Diffstat (limited to 'demos/sortable')
-rw-r--r--demos/sortable/connectwith.html2
-rw-r--r--demos/sortable/default.html2
-rw-r--r--demos/sortable/delaydistance.html2
-rw-r--r--demos/sortable/droponempty.html2
-rw-r--r--demos/sortable/droppable.html16
-rw-r--r--demos/sortable/floating.html10
-rw-r--r--demos/sortable/items.html15
-rw-r--r--demos/sortable/placeholder.html10
8 files changed, 29 insertions, 30 deletions
diff --git a/demos/sortable/connectwith.html b/demos/sortable/connectwith.html
index b3ac6c409..95fe9bde5 100644
--- a/demos/sortable/connectwith.html
+++ b/demos/sortable/connectwith.html
@@ -2,11 +2,11 @@
<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>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
<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; }
diff --git a/demos/sortable/default.html b/demos/sortable/default.html
index 6f68cfa81..06e3ff0f6 100644
--- a/demos/sortable/default.html
+++ b/demos/sortable/default.html
@@ -2,11 +2,11 @@
<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>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { margin: 3px; padding: 2px; }
diff --git a/demos/sortable/delaydistance.html b/demos/sortable/delaydistance.html
index 096c1d582..8e5bc6033 100644
--- a/demos/sortable/delaydistance.html
+++ b/demos/sortable/delaydistance.html
@@ -2,11 +2,11 @@
<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>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
li { margin: 3px; padding: 2px; }
diff --git a/demos/sortable/droponempty.html b/demos/sortable/droponempty.html
index a48e8e932..84f135510 100644
--- a/demos/sortable/droponempty.html
+++ b/demos/sortable/droponempty.html
@@ -2,11 +2,11 @@
<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>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
<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; }
diff --git a/demos/sortable/droppable.html b/demos/sortable/droppable.html
index 906eaadf8..b6e2b5081 100644
--- a/demos/sortable/droppable.html
+++ b/demos/sortable/droppable.html
@@ -2,21 +2,21 @@
<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.droppable.js"></script>
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- ul { list-style-type: none; margin: 0; padding: 0; }
- li { margin: 3px; padding: 2px; width: 150px; }
- .ui-widget-header { height: 60px; margin-bottom: 10px; float: right; width: 200px; }
+ #sortable { list-style-type: none; margin: 0; padding: 0; }
+ #sortable li { margin: 3px; padding: 2px; width: 150px; }
+ #droppable { height: 60px; margin-bottom: 10px; float: right; width: 200px; }
</style>
<script type="text/javascript">
$(function() {
- $("ul").sortable();
- $("div").droppable({
+ $("#sortable").sortable();
+ $("#droppable").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function(event, ui) {
@@ -28,11 +28,11 @@
</head>
<body>
-<div class="ui-widget-header">
+<div id="droppable" class="ui-widget-header">
<p>Drop a list item on me - sortable items are automatically connected to droppables.</p>
</div>
-<ul>
+<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
diff --git a/demos/sortable/floating.html b/demos/sortable/floating.html
index 6f940929b..aae9dbdf9 100644
--- a/demos/sortable/floating.html
+++ b/demos/sortable/floating.html
@@ -2,24 +2,24 @@
<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>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- ul { list-style-type: none; margin: 0; padding: 0; }
- li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
+ #sortable { list-style-type: none; margin: 0; padding: 0; }
+ #sortable li { margin: 3px; padding: 2px; float: left; width: 100px; height: 100px; }
</style>
<script type="text/javascript">
$(function() {
- $("ul").sortable();
+ $("#sortable").sortable();
});
</script>
</head>
<body>
-<ul>
+<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
diff --git a/demos/sortable/items.html b/demos/sortable/items.html
index 078af9990..876c3cefb 100644
--- a/demos/sortable/items.html
+++ b/demos/sortable/items.html
@@ -2,22 +2,21 @@
<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>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- ul { list-style-type: none; margin: 0; padding: 0; }
- li { margin: 3px; padding: 2px; }
+ #sortable, #sortable2 { list-style-type: none; margin: 0; padding: 0; }
+ #sortable li, #sortable2 li { margin: 3px; padding: 2px; }
</style>
<script type="text/javascript">
$(function() {
- $("ul:eq(0)").sortable({
+ $("#sortable").sortable({
items: 'li:not(.ui-state-disabled)'
});
-
- $("ul:eq(1)").sortable({
+ $("#sortable2").sortable({
cancel: '.ui-state-disabled'
});
});
@@ -27,7 +26,7 @@
<p>Completely exclude items from the sorting logic using the 'items' option</p>
-<ul>
+<ul id="sortable">
<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>
@@ -37,7 +36,7 @@
<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
-<ul>
+<ul id="sortable2">
<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>
diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html
index 68d6ecdbe..4404821ff 100644
--- a/demos/sortable/placeholder.html
+++ b/demos/sortable/placeholder.html
@@ -2,18 +2,18 @@
<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>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- ul { list-style-type: none; margin: 0; padding: 0; }
- li { margin: 3px; padding: 2px; }
+ #sortable { list-style-type: none; margin: 0; padding: 0; }
+ #sortable li { margin: 3px; padding: 2px; }
</style>
<script type="text/javascript">
$(function() {
- $("ul").sortable({
+ $("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
});
@@ -21,7 +21,7 @@
</head>
<body>
-<ul>
+<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 05:50:11 +0000