r1503 - in trunk/demos: draggable sortable
Author: cloudream@gmail.com
Date: Sun Jan 4 01:20:45 2009
New Revision: 1503
Added:
trunk/demos/sortable/delay.html
trunk/demos/sortable/distance.html
Removed:
trunk/demos/sortable/delaydistance.html
Modified:
trunk/demos/draggable/delaydistance.html
trunk/demos/draggable/snap.html
trunk/demos/draggable/sortable.html
trunk/demos/sortable/connectwith.html
trunk/demos/sortable/droponempty.html
trunk/demos/sortable/droppable.html
trunk/demos/sortable/index.html
trunk/demos/sortable/items.html
trunk/demos/sortable/placeholder.html
Log:
demos: fixed content out of boxes, font-size and paddings
Modified: trunk/demos/draggable/delaydistance.html
==============================================================================
--- trunk/demos/draggable/delaydistance.html (original)
+++ trunk/demos/draggable/delaydistance.html Sun Jan 4 01:20:45 2009
@@ -8,7 +8,7 @@
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em;
float: left; margin: 5px; }
+ #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em;
float: left; margin: 5px; }
</style>
<script type="text/javascript">
$(function() {
Modified: trunk/demos/draggable/snap.html
==============================================================================
--- trunk/demos/draggable/snap.html (original)
+++ trunk/demos/draggable/snap.html Sun Jan 4 01:20:45 2009
@@ -8,8 +8,9 @@
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- #draggable, #draggable2, #draggable3, #draggable4, #draggable5 { width:
75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
- #snaptarget { height: 130px; }
+ #draggable, #draggable2, #draggable3, #draggable4, #draggable5 { width:
100px; height: 80px; padding: 5px; float: left; margin: 5px;
font-size: .9em; }
+ .ui-widget-header p, .ui-widget-content p { margin: 0; }
+ #snaptarget { height: 140px; }
</style>
<script type="text/javascript">
$(function() {
Modified: trunk/demos/draggable/sortable.html
==============================================================================
--- trunk/demos/draggable/sortable.html (original)
+++ trunk/demos/draggable/sortable.html Sun Jan 4 01:20:45 2009
@@ -10,7 +10,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom:
10px; }
- .demo li { margin: 3px; padding: 2px; width: 150px; }
+ .demo li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script type="text/javascript">
$(function() {
Modified: trunk/demos/sortable/connectwith.html
==============================================================================
--- trunk/demos/sortable/connectwith.html (original)
+++ trunk/demos/sortable/connectwith.html Sun Jan 4 01:20:45 2009
@@ -9,7 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
.demo ul { list-style-type: none; margin: 0; padding: 0; float: left;
margin-right: 10px; }
- .demo li { margin: 3px; padding: 2px; width: 120px; }
+ .demo li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script type="text/javascript">
$(function() {
Added: trunk/demos/sortable/delay.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/delay.html Sun Jan 4 01:20:45 2009
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Delay / Distance Demo</title>
+ <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3pre.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">
+ .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom:
15px; }
+ .demo li { margin: 5px; padding: 5px; font-size: 1.2em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $(".demo ul:eq(0)").sortable({
+ delay: 1000
+ });
+ });
+ </script>
+</head>
+<body>
+<div class="demo">
+
+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>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+
+
+
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Added: trunk/demos/sortable/distance.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/distance.html Sun Jan 4 01:20:45 2009
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Delay / Distance Demo</title>
+ <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3pre.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">
+ .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom:
15px; }
+ .demo li { margin: 5px; padding: 5px; font-size: 1.2em; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $(".demo ul:eq(0)").sortable({
+ distance: 50
+ });
+ });
+ </script>
+</head>
+<body>
+<div class="demo">
+
+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>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+
+
+
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Modified: trunk/demos/sortable/droponempty.html
==============================================================================
--- trunk/demos/sortable/droponempty.html (original)
+++ trunk/demos/sortable/droponempty.html Sun Jan 4 01:20:45 2009
@@ -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">
- .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; }
+ .demo ul { list-style-type: none; margin: 0; padding: 0; float: left;
margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
+ .demo li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script type="text/javascript">
$(function() {
Modified: trunk/demos/sortable/droppable.html
==============================================================================
--- trunk/demos/sortable/droppable.html (original)
+++ trunk/demos/sortable/droppable.html Sun Jan 4 01:20:45 2009
@@ -10,8 +10,8 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#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; }
+ #sortable li { margin: 5px; padding: 5px; font-size: 1.2em; width: 150px;
}
+ #droppable { height: 80px; margin-bottom: 10px; padding: 5px; float:
right; width: 200px; }
</style>
<script type="text/javascript">
$(function() {
Modified: trunk/demos/sortable/index.html
==============================================================================
--- trunk/demos/sortable/index.html (original)
+++ trunk/demos/sortable/index.html Sun Jan 4 01:20:45 2009
@@ -12,7 +12,8 @@
<li class="demo-config-on"><a href="default.html">Default
Sortable</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>
+ <li><a href="delay.html">Delay</a></li>
+ <li><a href="distance.html">Distance</a></li>
<li><a href="items.html">Excluding items</a></li>
<li><a href="connectwith.html">Connecting two lists</a></li>
<li><a href="droponempty.html">Dropping on empty lists</a></li>
Modified: trunk/demos/sortable/items.html
==============================================================================
--- trunk/demos/sortable/items.html (original)
+++ trunk/demos/sortable/items.html Sun Jan 4 01:20:45 2009
@@ -9,7 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#sortable, #sortable2 { list-style-type: none; margin: 0; padding: 0; }
- #sortable li, #sortable2 li { margin: 3px; padding: 2px; }
+ .demo li { margin: 5px; padding: 3px; font-size: 1.2em; }
</style>
<script type="text/javascript">
$(function() {
@@ -32,7 +32,6 @@
<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>
Keep the items as valid targets, but non-draggable, using the 'cancel'
option
@@ -42,7 +41,6 @@
<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>
</div><!-- End demo -->
Modified: trunk/demos/sortable/placeholder.html
==============================================================================
--- trunk/demos/sortable/placeholder.html (original)
+++ trunk/demos/sortable/placeholder.html Sun Jan 4 01:20:45 2009
@@ -9,7 +9,7 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
- #sortable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; }
+ #sortable li { margin: 5px; padding: 5px; font-size: 1.2em; }
</style>
<script type="text/javascript">
$(function() {