Portal_JS，用JS实现的Portlet效果

最新推荐文章于 2024-09-16 10:23:19 发布

treeClimber

最新推荐文章于 2024-09-16 10:23:19 发布

阅读量6.5k

点赞数

分类专栏： WEB开发技巧文章标签： portlet div function class object null

本文链接：https://blog.csdn.net/treeclimber/article/details/2686445

版权

WEB开发技巧专栏收录该内容

26 篇文章 0 订阅

订阅专栏

有一年多没有关顾自己的博客了，然还有部分博友造访，令我万分感动，现在发布一下最近的一个组件：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+";' οnclick='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;'"
         + " οndblclick='changeWinMode()'>" + this.title + "</span>"
         + "<span class='win-function' οnclick='changeWinMode()'>0</span>"
         //+ "<span class='win-function' οnclick='changeWinMode()'>1</span>"
         + "<span class='win-function' οnclick='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");
}