aboutsummaryrefslogtreecommitdiffstats
path: root/demos/sortable
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2012-09-10 11:33:46 -0400
committerScott González <scott.gonzalez@gmail.com>2012-09-10 11:33:46 -0400
commit303f20e1b3c977d75047bed1a3533a180d73fab5 (patch)
treec8cf97b57f2493313dfd92c1dfceedb29d137d67 /demos/sortable
parent9e259c6e5369bf272dd14df7aea1372c5b064300 (diff)
downloadjquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.tar.gz
jquery-ui-303f20e1b3c977d75047bed1a3533a180d73fab5.zip
Demos: Cleanup.
Diffstat (limited to 'demos/sortable')
-rw-r--r--demos/sortable/connect-lists-through-tabs.html10
-rw-r--r--demos/sortable/connect-lists.html10
-rw-r--r--demos/sortable/default.html10
-rw-r--r--demos/sortable/delay-start.html12
-rw-r--r--demos/sortable/display-grid.html12
-rw-r--r--demos/sortable/empty-lists.html12
-rw-r--r--demos/sortable/index.html28
-rw-r--r--demos/sortable/items.html10
-rw-r--r--demos/sortable/placeholder.html10
-rw-r--r--demos/sortable/portlets.html14
10 files changed, 35 insertions, 93 deletions
diff --git a/demos/sortable/connect-lists-through-tabs.html b/demos/sortable/connect-lists-through-tabs.html
index d28f76cae..980c1302b 100644
--- a/demos/sortable/connect-lists-through-tabs.html
+++ b/demos/sortable/connect-lists-through-tabs.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -39,7 +39,6 @@
</script>
</head>
<body>
-<div class="demo">
<div id="tabs">
<ul>
@@ -66,13 +65,8 @@
</div>
</div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/sortable/connect-lists.html b/demos/sortable/connect-lists.html
index a30a22f8b..33c4d6035 100644
--- a/demos/sortable/connect-lists.html
+++ b/demos/sortable/connect-lists.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -23,7 +23,6 @@
</script>
</head>
<body>
-<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
@@ -41,10 +40,6 @@
<li class="ui-state-highlight">Item 5</li>
</ul>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>
Sort items from one list into another and vice versa, by passing a selector into
@@ -52,7 +47,6 @@
group all related lists with a CSS class, and then pass that class into the
sortable function (i.e., <code>connectWith: '.myclass'</code>).
</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/sortable/default.html b/demos/sortable/default.html
index ca0d5d172..209655b20 100644
--- a/demos/sortable/default.html
+++ b/demos/sortable/default.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -23,7 +23,6 @@
</script>
</head>
<body>
-<div class="demo">
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
@@ -35,17 +34,12 @@
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>
Enable a group of DOM elements to be sortable. Click on and drag an
element to a new spot within the list, and the other items will adjust to
fit. By default, sortable items share <code>draggable</code> properties.
</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/sortable/delay-start.html b/demos/sortable/delay-start.html
index caa0fbfd6..639ace60a 100644
--- a/demos/sortable/delay-start.html
+++ b/demos/sortable/delay-start.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -19,7 +19,7 @@
$( "#sortable1" ).sortable({
delay: 300
});
-
+
$( "#sortable2" ).sortable({
distance: 15
});
@@ -29,7 +29,6 @@
</script>
</head>
<body>
-<div class="demo">
<h3 class="docs">Time delay of 300ms:</h3>
@@ -49,10 +48,6 @@
<li class="ui-state-default">Item 4</li>
</ul>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>
Prevent accidental sorting either by delay (time) or distance. Set a number of
@@ -61,7 +56,6 @@
needs to be dragged before sorting starts with the <code>distance</code>
option.
</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/sortable/display-grid.html b/demos/sortable/display-grid.html
index ced64775b..9650676a1 100644
--- a/demos/sortable/display-grid.html
+++ b/demos/sortable/display-grid.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -11,7 +11,7 @@
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
- #sortable { list-style-type: none; margin: 0; padding: 0; }
+ #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script>
@@ -22,7 +22,6 @@
</script>
</head>
<body>
-<div class="demo">
<ul id="sortable">
<li class="ui-state-default">1</li>
@@ -39,16 +38,11 @@
<li class="ui-state-default">12</li>
</ul>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>
To arrange sortable items as a grid, give them identical dimensions and
float them using CSS.
</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/sortable/empty-lists.html b/demos/sortable/empty-lists.html
index 3c1a12537..dc727515c 100644
--- a/demos/sortable/empty-lists.html
+++ b/demos/sortable/empty-lists.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -30,7 +30,6 @@
</script>
</head>
<body>
-<div class="demo">
<ul id="sortable1" class='droptrue'>
<li class="ui-state-default">Can be dropped..</li>
@@ -51,11 +50,7 @@
<ul id="sortable3" class='droptrue'>
</ul>
-<br style="clear:both" />
-
-</div><!-- End demo -->
-
-
+<br style="clear:both">
<div class="demo-description">
<p>
@@ -63,7 +58,6 @@
using the <code>dropOnEmpty</code> option set to <code>false</code>. By default,
sortable items can be dropped on empty lists.
</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/sortable/index.html b/demos/sortable/index.html
index b307ef777..66b0b5ced 100644
--- a/demos/sortable/index.html
+++ b/demos/sortable/index.html
@@ -1,26 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable Demos</title>
- <link rel="stylesheet" href="../demos.css">
</head>
<body>
-<div class="demos-nav">
- <h4>Examples</h4>
- <ul>
- <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
- <li><a href="placeholder.html">Drop placeholder</a></li>
- <li><a href="connect-lists.html">Connect lists</a></li>
- <li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li>
- <li><a href="empty-lists.html">Handle empty lists</a></li>
- <li><a href="items.html">Include / exclude items</a></li>
- <li><a href="delay-start.html">Delay start</a></li>
- <li><a href="display-grid.html">Display as grid</a></li>
- <li><a href="portlets.html">Portlets</a></li>
- </ul>
-</div>
+<ul>
+ <li><a href="default.html">Default functionality</a></li>
+ <li><a href="placeholder.html">Drop placeholder</a></li>
+ <li><a href="connect-lists.html">Connect lists</a></li>
+ <li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li>
+ <li><a href="empty-lists.html">Handle empty lists</a></li>
+ <li><a href="items.html">Include / exclude items</a></li>
+ <li><a href="delay-start.html">Delay start</a></li>
+ <li><a href="display-grid.html">Display as grid</a></li>
+ <li><a href="portlets.html">Portlets</a></li>
+</ul>
</body>
</html>
diff --git a/demos/sortable/items.html b/demos/sortable/items.html
index a9f308129..c5ab4aaf1 100644
--- a/demos/sortable/items.html
+++ b/demos/sortable/items.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -29,7 +29,6 @@
</script>
</head>
<body>
-<div class="demo">
<h3 class="docs">Specify which items are sortable:</h3>
@@ -49,10 +48,6 @@
<li class="ui-state-default">Item 4</li>
</ul>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>
Specify which items are eligible to sort by passing a jQuery selector into
@@ -64,7 +59,6 @@
<code>cancel</code> option. Cancelled items remain valid sort targets for
others.
</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html
index 75e88d9ee..7767f1def 100644
--- a/demos/sortable/placeholder.html
+++ b/demos/sortable/placeholder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -26,7 +26,6 @@
</script>
</head>
<body>
-<div class="demo">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
@@ -38,10 +37,6 @@
<li class="ui-state-default">Item 7</li>
</ul>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>
When dragging a sortable item to a new location, other items will make room
@@ -50,7 +45,6 @@
be visible. Use the boolean <code>forcePlaceholderSize</code> option
to set dimensions on the placeholder.
</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>
diff --git a/demos/sortable/portlets.html b/demos/sortable/portlets.html
index e9ed16ed2..e747c7f77 100644
--- a/demos/sortable/portlets.html
+++ b/demos/sortable/portlets.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -42,7 +42,6 @@
</script>
</head>
<body>
-<div class="demo">
<div class="column">
@@ -50,7 +49,7 @@
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
-
+
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
@@ -73,7 +72,7 @@
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
-
+
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
@@ -81,16 +80,11 @@
</div>
-</div><!-- End demo -->
-
-
-
<div class="demo-description">
<p>
Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
option to allow sorting between columns.
</p>
-</div><!-- End demo-description -->
-
+</div>
</body>
</html>