diff options
| author | Bohdan Ganicky <bohdan.ganicky@gmail.com> | 2009-02-05 19:39:38 +0000 |
|---|---|---|
| committer | Bohdan Ganicky <bohdan.ganicky@gmail.com> | 2009-02-05 19:39:38 +0000 |
| commit | e0cd20b44fd6f9178f2608c8763f47b0693f2b96 (patch) | |
| tree | 5f448785f57f0db610113867af1da389e1fab892 /demos | |
| parent | fbc6ff5f812b673c5263d0ccaf3b2c2bf4d34790 (diff) | |
| download | jquery-ui-e0cd20b44fd6f9178f2608c8763f47b0693f2b96.tar.gz jquery-ui-e0cd20b44fd6f9178f2608c8763f47b0693f2b96.zip | |
demos/sortable/connect-lists-through-tabs: new demo created as a reaction to a certain discussion in the jquery ui google group
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/sortable/connect-lists-through-tabs.html | 76 | ||||
| -rw-r--r-- | demos/sortable/index.html | 1 |
2 files changed, 77 insertions, 0 deletions
diff --git a/demos/sortable/connect-lists-through-tabs.html b/demos/sortable/connect-lists-through-tabs.html new file mode 100644 index 000000000..4321703af --- /dev/null +++ b/demos/sortable/connect-lists-through-tabs.html @@ -0,0 +1,76 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Sortable - Connect lists with Tabs</title> + <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.3.1.js"></script> + <script type="text/javascript" src="../../ui/ui.core.js"></script> + <script type="text/javascript" src="../../ui/ui.sortable.js"></script> + <script type="text/javascript" src="../../ui/ui.droppable.js"></script> + <script type="text/javascript" src="../../ui/ui.tabs.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <style type="text/css"> + #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } + </style> + <script type="text/javascript"> + $(function() { + $("#sortable1, #sortable2").sortable({ + }).disableSelection(); + + $("#tabs").tabs(); + + $("#tabs a").droppable({ + accept: ".connectedSortable li", + drop: function(ev, ui) { + var $target = $($(this).attr('href')).find('.connectedSortable'); + ui.draggable.hide('slow', function() { + $(this).prependTo($target).show(); + }); + } + }); + }); + </script> +</head> +<body> +<div class="demo"> + +<div id="tabs"> + <ul> + <li><a href="#tabs-1">Nunc tincidunt</a></li> + <li><a href="#tabs-2">Proin dolor</a></li> + </ul> + <div id="tabs-1"> + <ul id="sortable1" class="connectedSortable ui-helper-reset"> + <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> + <div id="tabs-2"> + <ul id="sortable2" class="connectedSortable ui-helper-reset"> + <li class="ui-state-highlight">Item 1</li> + <li class="ui-state-highlight">Item 2</li> + <li class="ui-state-highlight">Item 3</li> + <li class="ui-state-highlight">Item 4</li> + <li class="ui-state-highlight">Item 5</li> + </ul> + </div> +</div> + +</div><!-- End demo --> + +<div class="demo-description"> + +<p> + 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 + 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 --> + +</body> +</html> diff --git a/demos/sortable/index.html b/demos/sortable/index.html index e19c83f2b..b77f223d2 100644 --- a/demos/sortable/index.html +++ b/demos/sortable/index.html @@ -12,6 +12,7 @@ <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> |