javascrpt xwindow.js

最新推荐文章于 2023-05-30 14:19:09 发布

zhanjh

最新推荐文章于 2023-05-30 14:19:09 发布

阅读量456

点赞数

分类专栏： javascript 文章标签： function div border float button null

本文链接：https://blog.csdn.net/zhanjh/article/details/2510063

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2008-06-04 10:17

一：效果

xwindow

二:代码：

1）js

/*
* zhanjh 2008.06.04
*/
function XWindow(){
    this.intTopZIndex=1;

    this.topDiv=null;

    this.bDrag=false;
    this.bResize=false;
    this.bLock=false;

    this.intLastX=-1;
    this.intLastY=-1;
    this.xPos=0;
    this.yPos=0;

    var othis=this;
    document.οnmοusemοve=function(e){
        othis._getMouseXY(e);

    };
    document.οnmοuseup=function(){
        othis.bDrag=false;
        othis.bResize=false;
        othis.intLastX = -1;
    };
    document.οnmοusedοwn=function(e){
        if(othis.bLock){

            if(e&&e.preventDefault){
                e.preventDefault();
                e.stopPropagation();
            }else{
                event.cancelBubble=true;
                event.returnValue=false;
            }

            return false;
        }
        return true;
    };
}
XWindow.prototype={
    lockWindow:function(){
        this.bLock=true;
    },
    releaseWindow:function(){
        this.bLock=false;
    },
    createWindow:function(xWinClass){
        var othis=this;

        var objWin=document.createElement("div");
        objWin.className="divWindow";
        objWin.style.top=xWinClass.top+"px";
        objWin.style.left=xWinClass.left+"px";
        objWin.style.width=xWinClass.width+"px";

        var objHead=document.createElement("div");
        objHead.style.cursor="move";
        objHead.className="winHead";
        var closeLink=document.createElement("button");
        closeLink.innerHTML="X";
        closeLink.οnclick=function(){
            if(confirm("are you sure to close this window"))
                othis.topDiv.parentNode.removeChild(othis.topDiv);
        };
        closeLink.className="ToolButtons";
        objHead.appendChild(closeLink);
        var titleLabel=document.createElement("label");
        titleLabel.innerHTML="<b>"+xWinClass.titleName+"</b>"
        objHead.appendChild(titleLabel);

        var objBody=document.createElement("div");
        objBody.className="winBody";
        objBody.style.width = "100%";
        objBody.style.height = xWinClass.height + "px";

        var objFoot = document.createElement("div");
        objFoot.className = "winFoot";
        var objFootSpan = document.createElement("span");
        objFootSpan.className = "winFootSpan";
        objFootSpan.innerHTML = "|";
        objFootSpan.οnmοusedοwn=function(){
            othis._resizeWindow(objWin);
        };
        objFoot.appendChild(objFootSpan);



        objHead.οnmοusedοwn=function(){
            othis._dragWindow(objWin);
        };

        var objHeadToolBar=document.createElement("div");
        objHeadToolBar.className="headToolBarw";

        var objFootToolBar=document.createElement("div");
        objFootToolBar.className="footToolBarw";

        objWin.appendChild(objHead);
        objWin.appendChild(objHeadToolBar);
        objWin.appendChild(objBody);
        objWin.appendChild(objFootToolBar);
        objWin.appendChild(objFoot);

        objWin.headToolBar=objHeadToolBar;
        objWin.mainBody=objBody;
        objWin.footToolBar=objFootToolBar;
        return objWin;
    },

    _setWindowSize:function(){

        if(this.intLastX==-1){
            this.intLastX=this.xPos;
            this.intLastY=this.yPos;
        }else{
            var intChangeX=this.xPos-this.intLastX;
            var intChangeY=this.yPos-this.intLastY;
            this.intLastX=this.xPos;
            this.intLastY=this.yPos;

            if(intChangeX+parseInt(this.topDiv.style.width)>=250){
                this.topDiv.style.width=intChangeX+parseInt(this.topDiv.style.width)+"px";
            }
            var wbody=this.topDiv.mainBody;
            if(intChangeY+parseInt(wbody.style.height)>=250){
                wbody.style.height=intChangeY+parseInt(wbody.style.height)+"px";
            }
        }
    },
    _moveWindow:function(){
        if(this.intLastX==-1){
            this.intLastX=this.xPos;
            this.intLastY=this.yPos;
        }else{
            var intChangeX=this.xPos-this.intLastX;
            var intChangeY=this.yPos-this.intLastY;
            this.intLastX=this.xPos;
            this.intLastY=this.yPos;
            this.topDiv.style.left=intChangeX+parseInt(this.topDiv.style.left)+"px";
            this.topDiv.style.top=intChangeY+parseInt(this.topDiv.style.top)+"px";
        }
    },
    _resizeWindow:function(elemWin){
        this.topDiv=elemWin;
        this.topDiv.style.zIndex=this.intTopZIndex++;
        this.bResize=true;
    },
    _dragWindow:function(elemWin){
        this.topDiv=elemWin;
        this.topDiv.style.zIndex=this.intTopZIndex++;
        this.bDrag=true;
    },

    _getMouseXY:function(e){
        this.xPos = parseInt((e)?e.pageX:event.clientX + document.body.scrollLeft);
        this.yPos = parseInt((e)?e.pageY:event.clientY + document.body.scrollTop);
        if(this.bDrag){
            this._moveWindow();
        }
        if(this.bResize){
            this._setWindowSize();
        }
    }
}

2）css

div.divWindow{
    position: absolute;
    border: 2px solid black;
    padding:0px;
    margin:0px;
    overflow: hidden;
    background: white;
}
div.winHead{
    background-color: #C9C9C9;
    width:100%;
    border-bottom: 1px solid black;
    padding: 0px;
    margin: 0px;
    height: 25px;
}
button.ToolButtons{
    float: right;
    margin: 0px;
    padding:0px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: ultra-expanded;
    font-family: Verdana,Arial,Helvetica,sans-serif;
}
div.winBody{
    width: 100%;
    height:100%;
    border:0;
    overflow: auto;
}
.winFoot{
    background-color: #C0C0C0;
    height: 15px;
    border-top: 1px solid black;
    font-weight: bold;
}
.winFootSpan{
    float:right;
    width:5px;
    font-size:15px;
    line-height:15px;
    cursor:se-resize;
    text-decoration: underline;
    color: #000000;
}

div.headToolBarw{
    top:26px;
    width:100%;
    height:25px;
    left:0px;
    background-color: #999999;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height:25px;
}

div.footToolBarw{
    top:804px;
    left:0px;
    width:100%;
    height:20px;
    background-color: #999999;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

三：使用方法

xwindow=new XWindow();

function someFun(){

    var xWinClass={};
    xWinClass.top=100;
    xWinClass.left=50;
    xWinClass.width=1200;
    xWinClass.height=400;
    xWinClass.titleName=Cameras.TableName;
    var divContainer=xwindow.createWindow(xWinClass);
    document.body.appendChild(divContainer);
    divContainer.headToolBar.appendChild(someChildNode1);
    divContainer.footToolBar.appendChild(someChildNode2);
    divContainer.mainBody.appendChild(someChildNode3);

}

四：功能

可移动，拖到，删除