diff options
Diffstat (limited to 'static/development-bundle/demos/sortable/portlets.html')
-rw-r--r-- | static/development-bundle/demos/sortable/portlets.html | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/static/development-bundle/demos/sortable/portlets.html b/static/development-bundle/demos/sortable/portlets.html new file mode 100644 index 0000000..5430989 --- /dev/null +++ b/static/development-bundle/demos/sortable/portlets.html | |||
@@ -0,0 +1,93 @@ | |||
1 | <!doctype html> | ||
2 | <html lang="en"> | ||
3 | <head> | ||
4 | <title>jQuery UI Sortable - Portlets</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 | <link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
10 | <style type="text/css"> | ||
11 | .column { width: 170px; float: left; padding-bottom: 100px; } | ||
12 | .portlet { margin: 0 1em 1em 0; } | ||
13 | .portlet-header { margin: 0.3em; padding-bottom: 4px; 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; height: 50px !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 | $(".column").disableSelection(); | ||
38 | }); | ||
39 | </script> | ||
40 | </head> | ||
41 | <body> | ||
42 | <div class="demo"> | ||
43 | |||
44 | <div class="column"> | ||
45 | |||
46 | <div class="portlet"> | ||
47 | <div class="portlet-header">Feeds</div> | ||
48 | <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> | ||
49 | </div> | ||
50 | |||
51 | <div class="portlet"> | ||
52 | <div class="portlet-header">News</div> | ||
53 | <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> | ||
54 | </div> | ||
55 | |||
56 | </div> | ||
57 | |||
58 | <div class="column"> | ||
59 | |||
60 | <div class="portlet"> | ||
61 | <div class="portlet-header">Shopping</div> | ||
62 | <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> | ||
63 | </div> | ||
64 | |||
65 | </div> | ||
66 | |||
67 | <div class="column"> | ||
68 | |||
69 | <div class="portlet"> | ||
70 | <div class="portlet-header">Links</div> | ||
71 | <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> | ||
72 | </div> | ||
73 | |||
74 | <div class="portlet"> | ||
75 | <div class="portlet-header">Images</div> | ||
76 | <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> | ||
77 | </div> | ||
78 | |||
79 | </div> | ||
80 | |||
81 | </div><!-- End demo --> | ||
82 | |||
83 | <div class="demo-description"> | ||
84 | |||
85 | <p> | ||
86 | Enable portlets (styled divs) as sortables and use the <code>connectWith</code> | ||
87 | option to allow sorting between columns. | ||
88 | </p> | ||
89 | |||
90 | </div><!-- End demo-description --> | ||
91 | |||
92 | </body> | ||
93 | </html> | ||