我使用了jquery的1.4版本和jquery ui 的1.8版本。实现的页面效果是这样的
四个蓝色区域,都可以拖动。
点击蓝色区域的第一个按钮,可以显示或者不显示内容。点击蓝色区域的第二个按钮,该DIV可以占满整个屏幕或者还原成现在的样子。
整个portlets分成三个struts2的标签:portletContainer、portletColumn和portlet。portletContainer是容器,portletColumn是每个列,portlet是列内的元素。
portlet.ftl文件内容如下:
<div class="portlet">
<div class="portlet-header">${parameters.title?default("")}</div>
<div class="portlet-content">
portlet-close.ftl文件内容如下:
</div>
</div>
portletColumn.ftl文件内容如下:
<div class="portlet-column">
portletColumn-close.ftl文件内容如下:
</div>
portletContainer.ftl文件内容如下:
<div id="portletContainer">
portletContainer-close.ftl文件内容如下:
</div>
<script>
$(document).ready(
function()
{
var width = $(window).width() - 10;
var natWidth = width / 2 - 20;
var portletWidth = natWidth - 12;
$(".portlet-column").width(natWidth).sortable({
connectWith: '.portlet-column',
handle: '.portlet-header' ,
stop: function(event, ui) { ${parameters.sortstop?default('')} }
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all");
$(".portlet").find(".portlet-header").css('cursor', 'move').addClass("ui-widget-header");
$(".portlet").find(".portlet-header")
.prepend('<span style="cursor:pointer; " class="ui-icon ui-icon-plusthick" title="' + C_COMMON_SHOW_HIDE_PORTLET + '"></span>')
.prepend('<span style="cursor:pointer; " class="ui-icon ui-icon-arrowthick-2-se-nw" title="' + C_COMMON_SHOW_MAX_NATURAL + '"></span>');
$(".portlet-header .ui-icon-plusthick").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".portlet-header .ui-icon-arrowthick-2-se-nw").toggle(
function() {
$(this).parents(".portlet:first").addClass("maxPortlet").width(width);
$(this).parents(".portlet-column:first").addClass("maxPortlet");
$(".portlet").each( function() {
if (!$(this).hasClass("maxPortlet")){
$(this).hide();
}
});
$(".portlet-column").each( function() {
if (!$(this).hasClass("maxPortlet")){
$(this).hide();
}
});
},
function() {
$(this).parents(".portlet:first").removeClass("maxPortlet").width(portletWidth);
$(this).parents(".portlet-column:first").removeClass("maxPortlet");
$(".portlet").each( function() {
$(this).show();
});
$(".portlet-column").each( function() {
$(this).show();
});
}
);
$(".portlet-column").disableSelection();
}
);
</script>
C_COMMON_SHOW_HIDE_PORTLET和C_COMMON_SHOW_MAX_NATURAL是定义的两个js常量。
调用页面如下:
<@c.portletContainer sortstop='reDraw();'>
<@c.portletColumn>
<@c.portlet title="a">
</@c.portlet>
<@c.portlet title="b">
bbbbbbbbbbbbbb
</@c.portlet>
</@c.portletColumn>
<@c.portletColumn>
<@c.portlet title="c">
<div id="container" style="width:300px; height:200px; background-color:rgb(255,255,255); "></div>
</@c.portlet>
<@c.portlet title="d测试">
dddddddddddddddd
</@c.portlet>
</@c.portletColumn>
</@c.portletContainer>
页面的脚本如下:
$(document).ready(function(){
$("#container").jvChart(300, 200);
var v1 = $("#container").ellipse(0, 120, 80, 40, 'rgb(0,0,0)', 2);
var v2 = $("#container").rectangle(100, 20, 80, 40, 10, 'rgb(0,0,0)', 2);
var v4 = $("#container").ellipse(200, 100, 50, 50, 'rgb(0,0,0)', 2);
var v3 = $("#container").rectangle(190, 180, 60, 40, 2, 'rgb(0,0,0)', 2);
$("#container").connection(v1, v2, 'rgb(0,0,0)', 2);
$("#container").connection(v2, v3, 'rgb(0,0,0)', 2);
$("#container").connection(v2, v4, 'rgb(0,0,0)', 2);/**/
});
function reDraw(){
$("#container").reDraw();
}
时间仓促,还没有实现portlet的增加和关闭功能。
- 大小: 27.4 KB
分享到:
相关推荐
基本JQUERY UI的一个portlet实现,采用MVC设计方式,实现拖动,布局,智能添加等功能,其部分源码用了兔子的jquery ui portlet.
jQuery UI Portle $('#portlet-demo').portlet('option', 'add', { position: { x: 0, y: 1 }, portlet: { attrs: { id: 'news' }, title: 'News(亲,我是被动态添加的呦)', afterCreated: function() {...
发起这个开源项目的原因是因为现有的Portlet插件都太难用,而且和我们现有的系统样式风格不兼容,因为公司的项目前端都是基于jQuery以及jQuery UI 框架开发的,所以为了更好的保持风格统一才有了jQuery UI Portlet。...
Portlet jQueryUI portlet和读取MySQL数据库PHP后端 Liferay php portlet开发人员
2016版的jquery portlet 自动拖动,排序,保存、定制个人首页。 metro 开始菜单制作都可以使用。
这个 portlet 是为了帮助那些希望看到 Ajax 在 Liferay Portlet 中使用 JQuery 工作的用户。 在这个 portlet 中,我添加了三个链接,点击后发送请求以获取用户信息并使用 Ajax 在门户上显示它。 为了让它变得不...
文件上载Portlet源代码,实现portlet文件上传功能
使用struts1.X实现了liferay portlet插件。
jboss portlet实现文件上传小项目
基于Portal和Portlet技术的Web整合应用研究与实现基于Portal和Portlet技术的Web整合应用研究与实现基于Portal和Portlet技术的Web整合应用研究与实现基于Portal和Portlet技术的Web整合应用研究与实现
1. portlet的类结构 2. portlet的过滤器,拦截器
使用jsr标准开发简单的portlet项目
这是本人学习Portlet的一些心得,绝对原创,童叟无欺。
Portlet标准汉化手册
portlet-api.jar portlet-api.jar portlet-api.jar
基于JETSPEED的多portlet流程协作机制研究与实现
使用凭证保险库为 portlet 提供单点登录。
Spring 3.0 mvc portlet demo 很好的portlet学习示例。集合了portlet Spring3.0 注释配置bean等
一个关于portlet开发的使用手册,非常实用。。。。
最近在准备公司网站产品博客的开发,突然想到MSN个人空间可以自...故而,在网上找了个jQuery的插件,以实现这个效果。 当然,真要把这个功能在博客中实现,还是需要其他技术的配合。这里,只是收录下,以备不时之需。