Ticket #6049: simpletest.html

File simpletest.html, 2.9 KB (added by raziel057, 12 years ago)

Llink inside a portlet

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
5<title>Insert title here</title>
6<link rel="stylesheet" href="/lib/jquery-ui/css/smoothness/jquery-ui-1.8.2.custom.css" type="text/css"/>
7<script src="/lib/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
8<script src="/lib/jquery-ui/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
9</head>
10<body>
11        <style type="text/css">
12                .column { width: 170px; float: left; padding-bottom: 100px; }
13                .portlet { margin: 0 1em 1em 0; }
14                .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
15                .portlet-header .ui-icon { float: right; }
16                .portlet-content { padding: 0.4em; }
17                .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
18                .ui-sortable-placeholder * { visibility: hidden; }
19        </style>
20        <script type="text/javascript">
21                $(function() {
22                        $(".column").sortable({
23                                connectWith: '.column'
24                        });
25       
26                        $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
27                                .find(".portlet-header")
28                                        .addClass("ui-widget-header ui-corner-all")
29                                        .prepend('<span class="ui-icon ui-icon-minusthick"></span>')
30                                        .end()
31                                .find(".portlet-content");
32       
33                        $(".portlet-header .ui-icon").click(function() {
34                                $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
35                                $(this).parents(".portlet:first").find(".portlet-content").toggle();
36                        });
37       
38                        $(".column").disableSelection();
39                });
40        </script>
41                <div class="demo">
42                        <div class="column">
43                                <div class="portlet">
44                                        <div class="portlet-header">Feeds</div>
45                                        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
46                                </div>
47                                <div class="portlet">
48                                        <div class="portlet-header">News</div>
49                                        <div class="portlet-content"><a href="javascript:alert('test')">test alerte</a></div>
50                                </div>
51                       
52                        </div>
53                        <div class="column">
54                                <div class="portlet">
55                                        <div class="portlet-header">Shopping</div>
56                                        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
57                                </div>
58                        </div>
59                       
60                        <div class="column">
61                                <div class="portlet">
62                                        <div class="portlet-header">Links</div>
63                                        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
64                                </div>
65                                <div class="portlet">
66                                        <div class="portlet-header">Images</div>
67                                        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
68                                </div>
69                        </div>
70                </div><!-- End demo -->
71                <div class="demo-description">
72                        <p>
73                                Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
74                                option to allow sorting between columns.
75                        </p>
76                </div><!-- End demo-description -->
77        </body>
78</html>