library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Sortable demos: Coding standards.

Browse Source
This commit is contained in:
Scott González 2010-10-13 15:23:42 -04:00
parent a829697d0c
commit bb41a258a8
10 changed files with 156 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
demos/sortable/connect-lists-through-tabs.html
View File

@ -1,36 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists with Tabs</title> <title>jQuery UI Sortable - Connect lists with Tabs</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> <script src="../../ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> <script src="../../ui/jquery.ui.tabs.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#sortable1, #sortable2").sortable().disableSelection(); $( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $("#tabs").tabs(); var $tabs = $( "#tabs" ).tabs();
var $tab_items = $("ul:first li",$tabs).droppable({ var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li", accept: ".connectedSortable li",
hoverClass: "ui-state-hover", hoverClass: "ui-state-hover",
drop: function(ev, ui) { drop: function( event, ui ) {
var $item = $(this); var $item = $( this );
var $list = $($item.find('a').attr('href')).find('.connectedSortable'); var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide('slow', function() { ui.draggable.hide( "slow", function() {
$tabs.tabs('select', $tab_items.index($item)); $tabs.tabs( "select", $tab_items.index( $item ) );
$(this).appendTo($list).show('slow'); $( this ).appendTo( $list ).show( "slow" );
}); });
} }
}); });
@ -67,12 +68,10 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <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>
<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><!-- End demo-description -->
</body> </body>

28
demos/sortable/connect-lists.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title> <title>jQuery UI Sortable - Connect lists</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; } #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#sortable1, #sortable2").sortable({ $( "#sortable1, #sortable2" ).sortable({
connectWith: '.connectedSortable' connectWith: ".connectedSortable"
}).disableSelection(); }).disableSelection();
}); });
</script> </script>
@ -43,15 +43,15 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
Sort items from one list into another and vice versa, by passing a selector into Sort items from one list into another and vice versa, by passing a selector into
the <code>connectWith</code> option. The simplest way to do this is to the <code>connectWith</code> option. The simplest way to do this is to
group all related lists with a CSS class, and then pass that class into the group all related lists with a CSS class, and then pass that class into the
sortable function (i.e., <code>connectWith: '.myclass'</code>). sortable function (i.e., <code>connectWith: '.myclass'</code>).
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

28
demos/sortable/default.html
View File

@ -1,24 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title> <title>jQuery UI Sortable - Default functionality</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; } #sortable li span { position: absolute; margin-left: -1.3em; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#sortable").sortable(); $( "#sortable" ).sortable();
$("#sortable").disableSelection(); $( "#sortable" ).disableSelection();
}); });
</script> </script>
</head> </head>
@ -37,14 +37,14 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
Enable a group of DOM elements to be sortable. Click on and drag an 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 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. fit. By default, sortable items share <code>draggable</code> properties.
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

30
demos/sortable/delay-start.html
View File

@ -1,30 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Delay start</title> <title>jQuery UI Sortable - Delay start</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; } #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#sortable1").sortable({ $( "#sortable1" ).sortable({
delay: 300 delay: 300
}); });
$("#sortable2").sortable({ $( "#sortable2" ).sortable({
distance: 15 distance: 15
}); });
$("li").disableSelection(); $( "li" ).disableSelection();
}); });
</script> </script>
</head> </head>
@ -51,8 +51,9 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
Prevent accidental sorting either by delay (time) or distance. Set a number of Prevent accidental sorting either by delay (time) or distance. Set a number of
milliseconds the element needs to be dragged before sorting starts milliseconds the element needs to be dragged before sorting starts
@ -60,7 +61,6 @@
needs to be dragged before sorting starts with the <code>distance</code> needs to be dragged before sorting starts with the <code>distance</code>
option. option.
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

28
demos/sortable/display-grid.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Display as grid</title> <title>jQuery UI Sortable - Display as grid</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
#sortable { list-style-type: none; margin: 0; padding: 0; } #sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#sortable").sortable(); $( "#sortable" ).sortable();
$("#sortable").disableSelection(); $( "#sortable" ).disableSelection();
}); });
</script> </script>
</head> </head>
@ -41,13 +41,13 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
To arrange sortable items as a grid, give them identical dimensions and To arrange sortable items as a grid, give them identical dimensions and
float them using CSS. float them using CSS.
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

34
demos/sortable/empty-lists.html
View File

@ -1,31 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Handle empty lists</title> <title>jQuery UI Sortable - Handle empty lists</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;} #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } #sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$("ul.droptrue").sortable({ $( "ul.droptrue" ).sortable({
connectWith: 'ul' connectWith: "ul"
}); });
$("ul.dropfalse").sortable({ $( "ul.dropfalse" ).sortable({
connectWith: 'ul', connectWith: "ul",
dropOnEmpty: false dropOnEmpty: false
}); });
$("#sortable1, #sortable2, #sortable3").disableSelection(); $( "#sortable1, #sortable2, #sortable3" ).disableSelection();
}); });
</script> </script>
</head> </head>
@ -55,14 +55,14 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
Prevent all items in a list from being dropped into a separate, empty list Prevent all items in a list from being dropped into a separate, empty list
using the <code>dropOnEmpty</code> option set to <code>false</code>. By default, using the <code>dropOnEmpty</code> option set to <code>false</code>. By default,
sortable items can be dropped on empty lists. sortable items can be dropped on empty lists.
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

4
demos/sortable/index.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable Demos</title> <title>jQuery UI Sortable Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
</head> </head>
<body> <body>

35
demos/sortable/items.html
View File

@ -1,30 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Include / exclude items</title> <title>jQuery UI Sortable - Include / exclude items</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#sortable1").sortable({ $( "#sortable1" ).sortable({
items: 'li:not(.ui-state-disabled)' items: "li:not(.ui-state-disabled)"
}); });
$("#sortable2").sortable({ $( "#sortable2" ).sortable({
cancel: '.ui-state-disabled' cancel: ".ui-state-disabled"
}); });
$("#sortable1 li, #sortable2 li").disableSelection(); $( "#sortable1 li, #sortable2 li" ).disableSelection();
}); });
</script> </script>
</head> </head>
@ -51,20 +51,19 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
Specify which items are eligible to sort by passing a jQuery selector into Specify which items are eligible to sort by passing a jQuery selector into
the <code>items</code> option. Items excluded from this option are not the <code>items</code> option. Items excluded from this option are not
sortable, nor are they valid targets for sortable items. sortable, nor are they valid targets for sortable items.
</p> </p>
<p> <p>
To only prevent sorting on certain items, pass a jQuery selector into the To only prevent sorting on certain items, pass a jQuery selector into the
<code>cancel</code> option. Cancelled items remain valid sort targets for <code>cancel</code> option. Cancelled items remain valid sort targets for
others. others.
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

30
demos/sortable/placeholder.html
View File

@ -1,27 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Drop placeholder</title> <title>jQuery UI Sortable - Drop placeholder</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; } #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; } html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; } .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$("#sortable").sortable({ $( "#sortable" ).sortable({
placeholder: 'ui-state-highlight' placeholder: "ui-state-highlight"
}); });
$("#sortable").disableSelection(); $( "#sortable" ).disableSelection();
}); });
</script> </script>
</head> </head>
@ -40,8 +40,9 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
When dragging a sortable item to a new location, other items will make room When dragging a sortable item to a new location, other items will make room
for the that item by shifting to allow white space between them. Pass a for the that item by shifting to allow white space between them. Pass a
@ -49,7 +50,6 @@
be visible. Use the boolean <code>forcePlaceholderSize</code> option be visible. Use the boolean <code>forcePlaceholderSize</code> option
to set dimensions on the placeholder. to set dimensions on the placeholder.
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

46
demos/sortable/portlets.html
View File

@ -1,16 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Sortable - Portlets</title> <title>jQuery UI Sortable - Portlets</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> <script src="../../ui/jquery.ui.sortable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
.column { width: 170px; float: left; padding-bottom: 100px; } .column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0; } .portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
@ -19,25 +19,25 @@
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; } .ui-sortable-placeholder * { visibility: hidden; }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$(".column").sortable({ $( ".column" ).sortable({
connectWith: '.column' connectWith: ".column"
}); });
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find(".portlet-header") .find( ".portlet-header" )
.addClass("ui-widget-header ui-corner-all") .addClass( "ui-widget-header ui-corner-all" )
.prepend('<span class="ui-icon ui-icon-minusthick"></span>') .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
.end() .end()
.find(".portlet-content"); .find( ".portlet-content" );
$(".portlet-header .ui-icon").click(function() { $( ".portlet-header .ui-icon" ).click(function() {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$(this).parents(".portlet:first").find(".portlet-content").toggle(); $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
}); });
$(".column").disableSelection(); $( ".column" ).disableSelection();
}); });
</script> </script>
</head> </head>
@ -83,13 +83,13 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
Enable portlets (styled divs) as sortables and use the <code>connectWith</code> Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
option to allow sorting between columns. option to allow sorting between columns.
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>