1 |
<!doctype html> |
2 |
<html lang="en"> |
3 |
<head> |
4 |
<meta charset="utf-8"> |
5 |
<title>Compound Visual Test : Draggable in Accordion</title> |
6 |
<link rel="stylesheet" href="../visual.css"> |
7 |
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> |
8 |
<script src="../../../jquery-1.9.1.js"></script> |
9 |
<script src="../../../ui/jquery.ui.core.js"></script> |
10 |
<script src="../../../ui/jquery.ui.widget.js"></script> |
11 |
<script src="../../../ui/jquery.ui.mouse.js"></script> |
12 |
<script src="../../../ui/jquery.ui.accordion.js"></script> |
13 |
<script src="../../../ui/jquery.ui.draggable.js"></script> |
14 |
<script src="../../../ui/jquery.ui.tabs.js"></script> |
15 |
<style> |
16 |
#main-draggable { |
17 |
width: 300px; |
18 |
position: absolute; |
19 |
right: 100px; |
20 |
} |
21 |
#main-draggable-handle { |
22 |
padding: 1em; |
23 |
margin: 0; |
24 |
} |
25 |
.draggable { |
26 |
width: 10em; |
27 |
margin: 0.5em; |
28 |
} |
29 |
</style> |
30 |
<script> |
31 |
$(function() { |
32 |
$( ".draggable" ) |
33 |
.addClass( "ui-widget ui-widget-content ui-corner-all" ) |
34 |
.draggable({ |
35 |
helper: "clone", |
36 |
appendTo: "body" |
37 |
}); |
38 |
|
39 |
$( "#accordion > div" ).accordion(); |
40 |
$( "#accordion" ).accordion(); |
41 |
|
42 |
$( "#tabs" ).tabs(); |
43 |
|
44 |
$( "#main-draggable" ).draggable({ |
45 |
handle: "#main-draggable-handle" |
46 |
}); |
47 |
}); |
48 |
</script> |
49 |
</head> |
50 |
<body> |
51 |
<div id="main-draggable" class="ui-widget ui-widget-content ui-corner-all"> |
52 |
<p id="main-draggable-handle" class="ui-widget-header ui-corner-all">Drag me around!</p> |
53 |
<div id="tabs"> |
54 |
<ul> |
55 |
<li><a href="#tabs-1">First Tab</a></li> |
56 |
<li><a href="#tabs-2">Second Tab</a></li> |
57 |
</ul> |
58 |
<div id="tabs-1"> |
59 |
<p>Click the other tab!</p> |
60 |
</div> |
61 |
<div id="tabs-2"> |
62 |
<div id="accordion"> |
63 |
<h3>Accordion Group 1</h3> |
64 |
<div id="accordion-1-1"> |
65 |
<h3>Header 1-1</h3> |
66 |
<div> |
67 |
<div class="draggable">Draggable 1-1</div> |
68 |
<div class="draggable">Draggable 1-2</div> |
69 |
<div class="draggable">Draggable 1-3</div> |
70 |
<div class="draggable">Draggable 1-4</div> |
71 |
<div class="draggable">Draggable 1-5</div> |
72 |
</div> |
73 |
<h3>Header 1-2</h3> |
74 |
<div> |
75 |
<div class="draggable">Draggable 2-1</div> |
76 |
<div class="draggable">Draggable 2-2</div> |
77 |
<div class="draggable">Draggable 2-3</div> |
78 |
<div class="draggable">Draggable 2-4</div> |
79 |
<div class="draggable">Draggable 2-5</div> |
80 |
</div> |
81 |
</div> |
82 |
<h3>Accordion Group 2</h3> |
83 |
<div id="accordion-1-2"> |
84 |
<h3>Header 2-1</h3> |
85 |
<div> |
86 |
<div class="draggable">Draggable 1-1</div> |
87 |
<div class="draggable">Draggable 1-2</div> |
88 |
<div class="draggable">Draggable 1-3</div> |
89 |
<div class="draggable">Draggable 1-4</div> |
90 |
<div class="draggable">Draggable 1-5</div> |
91 |
</div> |
92 |
<h3>Header 2-2</h3> |
93 |
<div> |
94 |
<div class="draggable">Draggable 2-1</div> |
95 |
<div class="draggable">Draggable 2-2</div> |
96 |
<div class="draggable">Draggable 2-3</div> |
97 |
<div class="draggable">Draggable 2-4</div> |
98 |
<div class="draggable">Draggable 2-5</div> |
99 |
</div> |
100 |
</div> |
101 |
</div> |
102 |
</div> |
103 |
</div> |
104 |
</div> |
105 |
|
106 |
</body> |
107 |
</html> |