]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 64adc91)
demos: added wrappers for sortables
authorPaul Bakaus <paul.bakaus@googlemail.com>
Wed, 31 Dec 2008 14:17:03 +0000 (14:17 +0000)
committerPaul Bakaus <paul.bakaus@googlemail.com>
Wed, 31 Dec 2008 14:17:03 +0000 (14:17 +0000)
demos/sortable/connectwith.html patch | blob | history
demos/sortable/default.html patch | blob | history
demos/sortable/delaydistance.html patch | blob | history
demos/sortable/droponempty.html patch | blob | history
demos/sortable/droppable.html patch | blob | history
demos/sortable/floating.html patch | blob | history
demos/sortable/items.html patch | blob | history
demos/sortable/placeholder.html patch | blob | history

diff --git a/demos/sortable/connectwith.html b/demos/sortable/connectwith.html
index 95fe9bde5a6f8f20cd375cf3e40a8238809ba84d..c394b90bd605340d29412fe912508dbf30a10143 100644 (file)
--- a/demos/sortable/connectwith.html
+++ b/demos/sortable/connectwith.html
@@ -8,8 +8,8 @@
        <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; }
+       .demo ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
+       .demo li { margin: 3px; padding: 2px; width: 120px; }
        </style>
        <script type="text/javascript">
        $(function() {
@@ -20,6 +20,7 @@
        </script>
 </head>
 <body>
+<div class="demo">
 
 <ul>
        <li class="ui-state-default">Item 1</li>
@@ -37,5 +38,15 @@
        <li class="ui-state-highlight">Item 5</li>
 </ul>
 
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/sortable/default.html b/demos/sortable/default.html
index 06e3ff0f6698c0b16d4297229bb43207a4762290..e1d539b69f76dcd73bcb297b63440bb393f66ebd 100644 (file)
--- a/demos/sortable/default.html
+++ b/demos/sortable/default.html
@@ -8,8 +8,8 @@
        <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; }
+       .demo ul { list-style-type: none; margin: 0; padding: 0; }
+       .demo li { margin: 3px; padding: 2px; }
        </style>
        <script type="text/javascript">
        $(function() {
@@ -18,6 +18,7 @@
        </script>
 </head>
 <body>
+<div class="demo">
 
 <ul>
        <li class="ui-state-default">Item 1</li>
@@ -32,5 +33,15 @@
        <li class="ui-state-default">Item 10</li>
 </ul>
 
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/sortable/delaydistance.html b/demos/sortable/delaydistance.html
index 8e5bc6033af26ea60ecebc6994126deda43fb0c3..c652666b7a187222be99cfad64096474379a40d8 100644 (file)
--- a/demos/sortable/delaydistance.html
+++ b/demos/sortable/delaydistance.html
@@ -8,8 +8,8 @@
        <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; }
+       .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; }
+       .demo li { margin: 3px; padding: 2px; }
        </style>
        <script type="text/javascript">
        $(function() {
@@ -26,6 +26,7 @@
        </script>
 </head>
 <body>
+<div class="demo">
 
 <p>Delay of 1000ms</p>
 
@@ -47,5 +48,15 @@
        <li class="ui-state-default">Item 5</li>
 </ul>
 
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/sortable/droponempty.html b/demos/sortable/droponempty.html
index 84f135510fd8ce8745ce08f3f1d5ec42f0e88cac..96b86c7388a5f8a73297add62ec13950f6ce8143 100644 (file)
--- a/demos/sortable/droponempty.html
+++ b/demos/sortable/droponempty.html
@@ -8,8 +8,8 @@
        <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; }
+       .demo ul { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 133px;}
+       .demo li { margin: 3px; padding: 2px; width: 120px; }
        </style>
        <script type="text/javascript">
        $(function() {
@@ -25,6 +25,7 @@
        </script>
 </head>
 <body>
+<div class="demo">
 
 <ul class='droptrue'>
        <li class="ui-state-default">Can be dropped..</li>
@@ -47,5 +48,15 @@
 
 <br clear="both" />
 
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/sortable/droppable.html b/demos/sortable/droppable.html
index b6e2b5081aff4e69147abb7eb1a63fe34bd9665c..7aafaf2dbc54044e3d6c5ecd67c0327437ebbf35 100644 (file)
--- a/demos/sortable/droppable.html
+++ b/demos/sortable/droppable.html
@@ -27,6 +27,7 @@
        </script>
 </head>
 <body>
+<div class="demo">
 
 <div id="droppable" class="ui-widget-header">
        <p>Drop a list item on me - sortable items are automatically connected to droppables.</p>
@@ -40,5 +41,15 @@
        <li class="ui-state-default">Item 5</li>
 </ul>
 
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/sortable/floating.html b/demos/sortable/floating.html
index aae9dbdf94d42a1a4b58ee3f41d9440b5014902a..77fd8df19e631556e447ce5f5788dc3e20923e32 100644 (file)
--- a/demos/sortable/floating.html
+++ b/demos/sortable/floating.html
@@ -18,6 +18,7 @@
        </script>
 </head>
 <body>
+<div class="demo">
 
 <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
@@ -34,5 +35,15 @@
        <li class="ui-state-default">Item 12</li>
 </ul>
 
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/sortable/items.html b/demos/sortable/items.html
index 876c3cefbe09bf1711671234b67769c446c4d72d..66df1269cfd11f02f3739dd824fefd4741cc4867 100644 (file)
--- a/demos/sortable/items.html
+++ b/demos/sortable/items.html
@@ -23,6 +23,7 @@
        </script>
 </head>
 <body>
+<div class="demo">
 
 <p>Completely exclude items from the sorting logic using the 'items' option</p>
 
@@ -44,5 +45,15 @@
        <li class="ui-state-default">Item 5</li>
 </ul>
 
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
 </body>
 </html>
diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html
index 4404821ff95f9ad228adac992a24120b200389b5..634a09349f27e7fc7aff4a85f9be68f5283dbf05 100644 (file)
--- a/demos/sortable/placeholder.html
+++ b/demos/sortable/placeholder.html
@@ -20,6 +20,7 @@
        </script>
 </head>
 <body>
+<div class="demo">
 
 <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
@@ -34,5 +35,15 @@
        <li class="ui-state-default">Item 10</li>
 </ul>
 
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+The easiest way to make an element draggable. Hold down the mouse and drag it around.
+</p>
+
+</div><!-- End demo-description -->
+
 </body>
 </html>
The official jQuery user interface library: https://github.com/jquery/jquery-ui