aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/demos/sortable/connect-lists-through-tabs.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/demos/sortable/connect-lists-through-tabs.html')
-rw-r--r--static/development-bundle/demos/sortable/connect-lists-through-tabs.html76
1 files changed, 0 insertions, 76 deletions
diff --git a/static/development-bundle/demos/sortable/connect-lists-through-tabs.html b/static/development-bundle/demos/sortable/connect-lists-through-tabs.html
deleted file mode 100644
index 481c506..0000000
--- a/static/development-bundle/demos/sortable/connect-lists-through-tabs.html
+++ /dev/null
@@ -1,76 +0,0 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Sortable - Connect lists with Tabs</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
9 <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
10 <script type="text/javascript" src="../../ui/ui.tabs.js"></script>
11 <link type="text/css" href="../demos.css" rel="stylesheet" />
12 <style type="text/css">
13 #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
14 </style>
15 <script type="text/javascript">
16 $(function() {
17 $("#sortable1, #sortable2").sortable().disableSelection();
18
19 var $tabs = $("#tabs").tabs();
20
21 var $tab_items = $("ul:first li",$tabs).droppable({
22 accept: ".connectedSortable li",
23 hoverClass: "ui-state-hover",
24 drop: function(ev, ui) {
25 var $item = $(this);
26 var $list = $($item.find('a').attr('href')).find('.connectedSortable');
27
28 ui.draggable.hide('slow', function() {
29 $tabs.tabs('select', $tab_items.index($item));
30 $(this).appendTo($list).show('slow');
31 });
32 }
33 });
34 });
35 </script>
36</head>
37<body>
38<div class="demo">
39
40<div id="tabs">
41 <ul>
42 <li><a href="#tabs-1">Nunc tincidunt</a></li>
43 <li><a href="#tabs-2">Proin dolor</a></li>
44 </ul>
45 <div id="tabs-1">
46 <ul id="sortable1" class="connectedSortable ui-helper-reset">
47 <li class="ui-state-default">Item 1</li>
48 <li class="ui-state-default">Item 2</li>
49 <li class="ui-state-default">Item 3</li>
50 <li class="ui-state-default">Item 4</li>
51 <li class="ui-state-default">Item 5</li>
52 </ul>
53 </div>
54 <div id="tabs-2">
55 <ul id="sortable2" class="connectedSortable ui-helper-reset">
56 <li class="ui-state-highlight">Item 1</li>
57 <li class="ui-state-highlight">Item 2</li>
58 <li class="ui-state-highlight">Item 3</li>
59 <li class="ui-state-highlight">Item 4</li>
60 <li class="ui-state-highlight">Item 5</li>
61 </ul>
62 </div>
63</div>
64
65</div><!-- End demo -->
66
67<div class="demo-description">
68
69<p>
70 Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.
71</p>
72
73</div><!-- End demo-description -->
74
75</body>
76</html>
© 2015 Mike Crute