-
Notifications
You must be signed in to change notification settings - Fork 52
/
colspan.html
124 lines (119 loc) · 4.26 KB
/
colspan.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Portlet</title>
<!-- jquery 1.4 and jquery ui 1.8 -->
<link rel="stylesheet" href="../lib/themes/1.10/start/jquery-ui-1.10.2.custom.min.css" />
<link rel="stylesheet" href="../css/jquery.portlet.css?v=1.3.1" />
<script src="../lib/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../lib/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
<!--<link rel="stylesheet" href="../lib/themes/1.9/start/jquery-ui-1.9.1.custom.min.css" />-->
<!--<script src="../lib/jquery-1.8.3.js" type="text/javascript"></script>-->
<!--<script src="../lib/themes/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>-->
<script src="../script/jquery.portlet.pack.js"></script>
<style>
body {font-size: 13px;}
.highlight-content {color: red;}
</style>
<script>
$(function() {
$('#portlet-demo').portlet({
sortable: true,
singleView: true,
columns: [{
width: 350,
portlets: [{
attrs: {
id: 'feeds'
},
title: function() {
var d = new Date();
return '正常宽度';
},
icon: 'ui-icon-signal-diag',
content: {
//设置区域内容属性
style: {
height: 100
},
type: 'text',
text: '这里是内容。。。。。'
}
}]
}, {
width: 350,
portlets: [{
attrs: {
id: 'news'
},
title: function() {
return '内容二';
},
icon: 'ui-icon-document',
content: {
style: {
height: 100
},
type: 'text',
text: '这里是内容。。。。。'
}
}]
}]
});
$('#portlet-demo1').portlet({
sortable: true,
singleView: true,
columns: [{
width: 700,
portlets: [{
attrs: {
id: 'aaaa'
},
title: function() {
var d = new Date();
return '跨2列';
},
icon: 'ui-icon-signal-diag',
content: {
//设置区域内容属性
style: {
height: 100
},
afterShow: function() {
var top = 0;
var left = 0;
var index = $(this).index('.ui-portlet');
var topp = $('.ui-portlet').eq(index == 0 ? 0 : index - 1).find('.ui-portlet-column');
$.each(topp, function() {
if (top < $(this).height()) {
top = $(this).height();
}
});
$(this).css('position', 'absolute').css({
left: 7,
top: top + 10
});
},
type: 'text',
text: '我要跨列...'
}
}]
}]
});
});
</script>
</head>
<body>
<hr class='ui-widget-content' />
<div id='portlet-demo'></div>
<div id='portlet-demo1'></div>
<!-- 模板 -->
<div id="newsTemplate" style="display:none">
<ul>
<li><a href='http://www.kafeitu.me/'>http://www.kafeitu.me</a></li>
<li><a href='https://github.com/henryyan'>https://github.com/henryyan</a></li>
</ul>
</div>
</body>
</html>