设置div的绝对布局

来源:互联网 发布:淘宝刻假公章退货了 编辑:程序博客网 时间:2024/05/21 07:55

//获取元素     
function get(objDiv){
    return document.getElementById(objDiv);
}   

//显示
function show(objDiv){
    var obj = get(objDiv);
    obj.style.display = "";
}

//隐藏
function hide(objDiv){
    var obj = get(objDiv);
    obj.style.display = "none";
}


//字符串是否为空

function isEmpty(str){
    if(str == undefined || str == null || str == ''){
        return true;
    }
    return false;
}


//获取元素A的X坐标

function getLeft(e){
    var offset=e.offsetLeft;
    if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
    return offset;
}
//获取元素A的Y坐标
function getTop(e){
    var offset=e.offsetTop;
    if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
    return offset;
}


/***************************************

DESC:设置div区域的绝对布局方式

@PARAM  divId:界面上的显示的DIV

@PARAM relateDivId:相对区域的divId,比如按钮div,点击该按钮,在该按钮的位置弹出divId的区域

@PARAM plusX,plusY:xy的增量,用来进行位置微调

@PARAM isMiddle:是否显示在屏幕中间,T是,F否

***************************************/

function setDivAbsolut(divId,relateDivId,plusX,plusY,isMiddle){
    var objDiv = get(divId);
    objDiv.style.zIndex = '9999';
    objDiv.style.position = "absolute";
    objDiv.style.display = "none";

    var relateDiv = get(relateDivId);
    var offsetTop = getTop(relateDiv);
    var offsetLeft = getLeft(relateDiv);
    var offsetWidth = relateDiv.offsetWidth;
    var offsetHeight = relateDiv.offsetHeight;
    
    var x = offsetLeft;
    var y = offsetTop + offsetHeight;
    if(isEmpty(plusX) == false){
        x += plusX;
    }
    if(isEmpty(plusY) == false){
        y += plusY;
    }  
    //alert(x+":"+y);
    if(isMiddle == 'T'){
        objDiv.style.left = (window.document.body.clientWidth - objDiv.style.pixelWidth)/ 2;
        objDiv.style.top  = (window.document.body.clientHeight - objDiv.style.pixelHeight)/ 2;
    }else{
        objDiv.style.top = y;
        objDiv.style.left = x;
    }
    relateDiv.style.cursor = 'hand';
    relateDiv.onclick = function(){
        window.document.getElementById(divId).style.display = '';
    };
    
    var closeHtml = "<div style='background:\"blue\";height:10px;width:100%' align='left'><span title='隐藏' style='float:right;font-size:14px;color:white;cursor:hand;' onclick='document.getElementById(\""+divId+"\").style.display=\"none\"'>×</span></div>";
    objDiv.innerHTML = closeHtml + objDiv.innerHTML;

}


原创粉丝点击