Skip to content

Commit cea09dd

Browse files
rdworthrdworth
committed
demos/sortable: Added a portlets demo
1 parent 7a3c9a0 commit cea09dd

File tree

2 files changed

+91
-0
lines changed

2 files changed

+91
-0
lines changed

‎demos/sortable/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ <h4>Examples</h4>
1818
<li><a href="connectwith.html">Connecting two lists</a></li>
1919
<li><a href="droponempty.html">Dropping on empty lists</a></li>
2020
<li><a href="droppable.html">Connect to droppables</a></li>
21+
<li><a href="portlets.html">Portlets</a></li>
2122
</ul>
2223
</div>
2324

‎demos/sortable/portlets.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Sortable - Default Demo</title>
5+
<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../jquery-1.3pre.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+
<link type="text/css" href="../demos.css" rel="stylesheet" />
10+
<style type="text/css">
11+
.column { width: 170px; float: left; }
12+
.portlet { margin: 1em; }
13+
.portlet-header { margin: 0.3em; padding-left: 0.2em; }
14+
.portlet-header .ui-icon { float: right; }
15+
.portlet-content { padding: 0.4em; }
16+
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }
17+
.ui-sortable-placeholder * { visibility: hidden; }
18+
</style>
19+
<script type="text/javascript">
20+
$(function() {
21+
$(".column").sortable({
22+
connectWith: ['.column']
23+
});
24+
25+
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
26+
.find(".portlet-header")
27+
.addClass("ui-widget-header ui-corner-all")
28+
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
29+
.end()
30+
.find(".portlet-content");
31+
32+
$(".portlet-header .ui-icon").click(function() {
33+
$(this).toggleClass("ui-icon-minusthick");
34+
$(this).parents(".portlet:first").find(".portlet-content").toggle();
35+
});
36+
});
37+
</script>
38+
</head>
39+
<body>
40+
<div class="demo">
41+
42+
<div class="column">
43+
44+
<div class="portlet">
45+
<div class="portlet-header">Feeds</div>
46+
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
47+
</div>
48+
49+
<div class="portlet">
50+
<div class="portlet-header">News</div>
51+
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
52+
</div>
53+
54+
</div>
55+
56+
<div class="column">
57+
58+
<div class="portlet">
59+
<div class="portlet-header">Shopping</div>
60+
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
61+
</div>
62+
63+
</div>
64+
65+
<div class="column">
66+
67+
<div class="portlet">
68+
<div class="portlet-header">Links</div>
69+
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
70+
</div>
71+
72+
<div class="portlet">
73+
<div class="portlet-header">Images</div>
74+
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
75+
</div>
76+
77+
</div>
78+
79+
</div><!-- End demo -->
80+
81+
<div class="demo-description">
82+
83+
<p>
84+
85+
</p>
86+
87+
</div><!-- End demo-description -->
88+
89+
</body>
90+
</html>

0 commit comments

Comments
 (0)