Portal_JS,用JS实现的Portlet效果
来源:互联网 发布:奇兔刷机软件官网 编辑:程序博客网 时间:2024/04/28 04:52
有一年多没有关顾自己的博客了,然还有部分博友造访,令我万分感动,现在发布一下最近的一个组件:PortletWin
/**
* @package ElementUtils.js
* @author: 熊水林(xionglb@163.com)
* @version:版权所有(2008-7-13)
*
* 这个包是为方便操作页面元素提供接口,包括拖拽、拉伸、覆盖等
* 综合应用场景:Portlet、ModalDiv等
*/
//---------------------------------------------------------------------------------------
/**
* @title:标题
* @content:内容
* @display:是否显式
* @mode: 最大化/最小化
*/
function PortletWin(id, title, content, left,top,width,height, zindex, display, mode){
this.id = id;
this.title = title;
this.message = content;
this.width = width;
this.height = height;
this.left = left;
this.top = top;
this.zIndex = zindex;
this.display = display;
this.mode = mode ? mode : 0;
this.build();
}
/**
* 标题栏按钮的宽度12px,边框3px
*/
PortletWin.prototype.build = function(){
//标题栏
var str = "<div id='portlet_win_"+ this.id +"' style='position:absolute;z-index:"+this.zIndex+";' onclick='focus_portletWindow(/""+this.id+"/")'>";
str += "<div id='xWin_title_"+ this.id +"' class='xWindow_title' style='width:"+ this.width+";left:"+ this.left +";top:"+ this.top+";'>"
+ "<span id='xWind_title_text_"+this.id+"' style='width:" + (this.width-2*12-3) + ";padding-left:3px;'"
+ " ondblclick='changeWinMode()'>" + this.title + "</span>"
+ "<span class='win-function' onclick='changeWinMode()'>0</span>"
//+ "<span class='win-function' onclick='changeWinMode()'>1</span>"
+ "<span class='win-function' onclick='close_portletWindow()'>r</span>"
+ "</div>"
//窗体显示区域
+ "<div id='xWin_body_"+this.id+"'class='xWindow_body' style='width:"+ this.width+";height:"+ this.height+ ";left:"+this.left+";top:"+(this.top+20)
+ ";'>" + this.message + "</div>"
+ "</div>"
//窗体背景
/*+ "<div id='xWin_shadow_"+ this.id +"' class='xWindow_shadow' style='"
+ "width:" + this.width + ";height:" + (this.height+20) + ";top:" + this.top + ";left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";' />";*/
document.body.insertAdjacentHTML("beforeEnd", str);
var div_title = document.getElementById("xWin_title_"+this.id);
var div_body = document.getElementById("xWin_body_"+this.id);
var div_title_text = document.getElementById("xWind_title_text_"+this.id);
var xtitle = MovableElement(div_title);
var xbody = ResizableElement(div_body);
var div_win = document.getElementById("portlet_win_"+this.id);
div_win.onmousemove = function(){
/*move*/
div_body.style.left = div_title.style.pixelLeft;
div_body.style.top = div_title.style.pixelTop+20;
/*resize width*/
div_title.style.width = div_body.style.width;
div_title_text.style.width = div_title.offsetWidth-2*12-3;
}
}
function changeWinMode(){
var object = event.srcElement; //title-text or title-button
var xbody = object.parentElement.nextSibling;
object = object.parentElement.children[1];
if (object.innerHTML == "0"){
object.innerHTML = "2";
xbody.style.display = "none";
}else{
object.innerHTML = "0";
xbody.style.display = "block";
}
}
function close_portletWindow(){
var object = event.srcElement;
var xwin = object.parentElement.parentElement;
xwin.style.display = "none";
}
function display_portletWindow(id){
document.getElementById("portlet_win_"+id).style.display = "block";
}
var prefocus_xwin = null;
function focus_portletWindow(id){
var focus_xwin = document.getElementById("portlet_win_"+id);
var winTitle = focus_xwin.children[0];
if (prefocus_xwin!=null && prefocus_xwin!=focus_xwin){
prefocus_xwin.children[0].style.backgroundColor = winTitle.style.backgroundColor;
prefocus_xwin.children[1].style.borderColor = winTitle.style.backgroundColor;
}
winTitle.style.backgroundColor = "#3333FF";
focus_xwin.children[1].style.borderColor = winTitle.style.backgroundColor;
prefocus_xwin = focus_xwin;
var observer = new ShowObserver(focus_xwin);
observer.promoteTag("DIV");
}
- Portal_JS,用JS实现的Portlet效果
- Struts2.X Portlet的实现
- 用JS实现文本框水印的效果
- 用js实现图片展开的效果
- 用js实现隔行变色的效果
- 用JS实现TextArea水印的效果
- 用js实现的时钟效果
- 用CSS实现JS的交互效果
- 用js实现上传图片的效果
- js实现的台球效果
- 用js实现网页效果
- 用js实现下雨效果
- 用js实现开花效果
- 用js实现时间效果
- 用js实现动画效果
- Portlet API参考实现的秘密
- Portlet API参考实现的秘密
- Liferay:Struts2.X Portlet的实现
- 还记得年少的梦吗,象朵永不凋零的花
- Hibernate性能优化
- 企业为什么需要网络流量分析
- 丽江
- 档案
- Portal_JS,用JS实现的Portlet效果
- word无响应或反应慢
- Linux文件查找命令find,xargs详述
- Linux下常用压缩格式的压缩与解压方法
- 网络运维系统,只要对的,不要贵的
- 丫头
- 需要DBA深思的面试问题
- 打造自己的Javascript alert confirm对象(一)
- 什么是项目实施