henryyan
11/22/2012 - 4:35 PM
jquery-ui-portlet-demo.html
jquery-ui-portlet-demo.html
<!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="themes/1.8/start/jquery-ui-1.8.5.custom.css" />
<link rel="stylesheet" href="jquery.portlet.css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<!--<link rel="stylesheet" href="themes/1.9/start/jquery-ui-1.9.1.custom.min.css" />-->
<!--<script src="jquery-1.8.3.js" type="text/javascript"></script>-->
<!--<script src="jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>-->
<script src="jquery.portlet.js"></script>
<style>
body {font-size: 10pt;}
.highlight-content {color: red;}
</style>
<script>
$(function() {
$('#portlet-demo').portlet({
sortable: true,
create: function() {
//alert('created portlet.');
},
removeItem: function() {
alert('after remove');
},
columns: [{
width: 300,
portlets: [{
attrs: {
id: 'feeds'
},
title: function() {
var d = new Date();
return 'Feeds(' + (d.getMonth() + 1) + '-' + d.getDay() + '日)';
},
content: {
type: 'text',
text: '<ul><li>Feed item 1</li><li>Feed item 2</li></ul>',
beforeShow: function(aa) {
//alert('before show, content is: ' + aa);
},
afterShow: function() {
//alert('after show');
}
},
scripts: ['loaded-by-portlet.js']
}, {
attrs: {
id: 'news'
},
title: 'News',
beforeRefresh: function() {
alert("before refresh");
},
afterRefresh: function(data) {
//alert("after refresh: " + data);
},
content: {
type: 'text',
text: function() {
return $('#newsTemplate').html();
//return $('#newsTemplate ul');
}
}
}]
}, {
width: 300,
portlets: [{
title: 'Shopping',
content: {
attrs: {
'class': 'highlight-content'
},
type: 'text',
text: 'Shopping contens<br/>Shopping contens<br/>Shopping contens<br/>Shopping contens<br/>'
}
}]
}, {
width: 500,
portlets: [{
title: 'Ajax',
content: {
type: 'ajax',
url: 'ajax.html'
}
}, {
title: 'Ajax Json Datas',
content: {
type: 'ajax',
dataType: 'json',
url: 'ajax.json',
formatter: function(o, pio, data) {
var ct = "<ul>";
$.each(data, function() {
ct += "<li>" + this.text + "</li>";
});
return ct + "</ul>";
}
}
}]
}]
});
});
</script>
</head>
<body>
<div id='portlet-demo'></div>
<!-- 模板 -->
<div id="newsTemplate" style="display:nonw">
<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>