js可拖动的后台界面

ttx9n · 发表于 2008-7-29 10:07:10

不错的后台界面，方便大家以后做后台 // ************************ 拖动 *********************************
    function setDrag(e){
            var drag_flag = true;
            var begin_x = getX(e);
            //添加蒙板
            createMask();
            //添加半透明拖动条
            createSplitDiv();

    function getX(e){
            if(window.event) e = window.event;
            return (e.x || e.clientX);
    }

    function createSplitDiv(){
        //半透明的拖动条
        var _top = $doc("topArea").offsetHeight +"px";
        var _left = $doc("dragBar").offsetLeft +"px";;
        var _height = $doc("dragBar").offsetHeight +"px";;

        var splitDivCss="position:absolute;width:6px;height:"+_height+";top:"+_top+";left:"+_left+";cursor:col-
resize;background-color:#cccccc;overflow:hidden;z-index:10010;filter:alpha(opacity=50);opacity:0.5;";
        var _splitDiv = document.createElement("div");
        _splitDiv.id = "splitDiv";
        _splitDiv.style.cssText = splitDivCss;

        document.body.appendChild(_splitDiv);

    }
    function createMask(){
            try{

                //创建背景
                var rootEl=document.documentElement||document.body;
                var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)?
rootEl.clientHeight:rootEl.scrollHeight)+"px";
                var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth)
+"px";
                var
shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#cccccc;z-
index:10000;filter:alpha(opacity=0);opacity:0";
                var _shield = document.createElement("div");
                _shield.id = "shield";
                _shield.style.cssText = shieldStyle;
                document.body.appendChild(_shield);
            }catch(e){}
        }
        //拖动时执行的函数
        document.onmousemove = function(e){
            try{
                if(drag_flag){
                        var now_x = getX(e);
                        var _pv = parseInt($doc("splitDiv").style.left)+ now_x - begin_x;
                        $doc("splitDiv").style.left = _pv +"px";
                         begin_x = now_x;
                }else{
                        $doc("leftShow").style.width = $doc("splitDiv").style.left;
                        document.body.removeChild($doc("shield"));
                        document.body.removeChild($doc("splitDiv"));
                        // 调整页面布局
                        resizePage();
                }
            }catch(e){}
        }

        document.onmouseup = function(){
            try{
                if(drag_flag){
                    //设定拖动条的位置（设定左侧的宽度）
                    $doc("leftShow").style.width = $doc("splitDiv").style.left;
                    document.body.removeChild($doc("shield"));
                    document.body.removeChild($doc("splitDiv"));
                    // 调整页面布局
                    resizePage();
                }
                drag_flag = false;
                begin_x = null;
            }catch(e){}
        }

    }

    if(window.attachEvent){
          window.attachEvent("onload",function(){resizePage();});
          window.attachEvent("onresize",function(){resizePage();});
    }
  if(window.addEventListener){
       window.addEventListener("load",function(){resizePage();},true);
       window.addEventListener("resize",function(){resizePage();},true);
  }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>可拖动的后台界面_脚本之家_jb51.net</title> 
<style type="text/css"> 
 *{ 
   margin: 0px;  
    font-size:12px; 
    font-family:"宋体"; 
    color:#000000; 
} 
html,body{  
    height: 100%;  
    width: 100%;  
      overflow:hidden; 
      background-color:#EEEEEF; 
}  
img{ 
    padding:0px; 
    margin:0px; 
    vertical-align:middle; 
    border:0px; 
}

.f_left{ 
    float:left; 
    clear:right; 
} 
.f_right{ 
    float:right ; 
    clear:right; 
} 
.topArea{ 
    width:100%; 
    height:60px; 
} 
.logoArea{ 
  float:left; 
  width:100%; 
  height:36px; 
  background-color:#EEEEEF; 
} 
.toolbarArea{ 
  float:left; 
  width:100%; 
  height:24px; 
  background-color:#EEEEEF; 
} 
.bottomArea{ 
    height:25px; 
    line-height:25px; 
  background-color:#EEEEEF ; 
} 
.leftBg{ 
    background:#ffffff; 
    border:1px solid #BEBEBE; 
} 
.mainContent{ 
  padding:0px; 
} 
.content_show{ 
    float:left; 
    clear:right; 
    height:100%; 
    width:auto; 
    margin:0px; 
    padding:0px; 
    background-color:#ffffff; 
    border:1px solid #BEBEBE; 
}

.splitBar{ 
  width:6px; 
  height:100%; 
    cursor:col-resize; 
}     
</style> 
<script type="text/javascript"> 
  function $doc(ele){ 
    if(typeof ele == "string" || ele instanceof String){ 
         return document.getElementById(ele);     
    } 
    return ele; 
} 
    //设置页面布局 
function resizePage(){ 
    var topArea = $doc("topArea"); 
    var mainContent = $doc("mainContent"); 
    var footer = $doc("footer");

var myHeight = document.body.clientHeight - (topArea.offsetHeight + footer.offsetHeight); 
    if(myHeight <= 0) myHeight = 10; 
    mainContent.style.height = myHeight + "px"; 
     
    var center = $doc("center"); 
    if(!document.all){ 
        myHeight = myHeight ;//- 10; 
    } 
    center.style.height = myHeight + "px"; 
     
    var leftShow = $doc("leftShow"); 
    var myWidth = document.body.clientWidth - leftShow.offsetWidth - 6; 
    /*if(!document.all){  
        myWidth = myWidth - 5 
    }*/ 
    myWidth = myWidth - 5 
    center.style.width = myWidth + "px"; 
}

// ************************ 拖动 ********************************* 
    function setDrag(e){ 
            var drag_flag = true;  
            var begin_x = getX(e); 
            //添加蒙板 
            createMask(); 
            //添加半透明拖动条 
            createSplitDiv(); 
             
    function getX(e){ 
            if(window.event) e = window.event; 
            return (e.x || e.clientX); 
    }         
     
    function createSplitDiv(){ 
        //半透明的拖动条 
        var _top = $doc("topArea").offsetHeight +"px"; 
        var _left = $doc("dragBar").offsetLeft +"px";; 
        var _height = $doc("dragBar").offsetHeight +"px";; 
         
        var splitDivCss="position:absolute;width:6px;height:"+_height+";top:"+_top+";left:"+_left+";cursor:col- 
resize;background-color:#cccccc;overflow:hidden;z-index:10010;filter:alpha(opacity=50);opacity:0.5;"; 
        var _splitDiv = document.createElement("div"); 
        _splitDiv.id = "splitDiv"; 
        _splitDiv.style.cssText = splitDivCss; 
         
        document.body.appendChild(_splitDiv);

}     
    function createMask(){ 
            try{ 
                 
                //创建背景 
                var rootEl=document.documentElement||document.body; 
                var docHeight=((rootEl.clientHeight>rootEl.scrollHeight)? 
rootEl.clientHeight:rootEl.scrollHeight)+"px"; 
                var docWidth=((rootEl.clientWidth>rootEl.scrollWidth)?rootEl.clientWidth:rootEl.scrollWidth) 
+"px"; 
                var  
shieldStyle="position:absolute;top:0px;left:0px;width:"+docWidth+";height:"+docHeight+";background:#cccccc;z- 
index:10000;filter:alpha(opacity=0);opacity:0"; 
                var _shield = document.createElement("div"); 
                _shield.id = "shield"; 
                _shield.style.cssText = shieldStyle; 
                document.body.appendChild(_shield); 
            }catch(e){} 
        } 
        //拖动时执行的函数 
        document.onmousemove = function(e){ 
            try{ 
                if(drag_flag){ 
                        var now_x = getX(e); 
                        var _pv = parseInt($doc("splitDiv").style.left)+ now_x - begin_x; 
                        $doc("splitDiv").style.left = _pv +"px"; 
                         begin_x = now_x; 
                }else{ 
                        $doc("leftShow").style.width = $doc("splitDiv").style.left; 
                        document.body.removeChild($doc("shield")); 
                        document.body.removeChild($doc("splitDiv")); 
                        // 调整页面布局 
                        resizePage(); 
                } 
            }catch(e){} 
        } 
         
        document.onmouseup = function(){ 
            try{ 
                if(drag_flag){ 
                    //设定拖动条的位置（设定左侧的宽度） 
                    $doc("leftShow").style.width = $doc("splitDiv").style.left; 
                    document.body.removeChild($doc("shield")); 
                    document.body.removeChild($doc("splitDiv")); 
                    // 调整页面布局 
                    resizePage(); 
                } 
                drag_flag = false; 
                begin_x = null; 
            }catch(e){} 
        } 
         
    }

if(window.attachEvent){ 
          window.attachEvent("onload",function(){resizePage();}); 
          window.attachEvent("onresize",function(){resizePage();}); 
    } 
  if(window.addEventListener){ 
       window.addEventListener("load",function(){resizePage();},true); 
       window.addEventListener("resize",function(){resizePage();},true); 
  } 
       
</script> 
</head>

<body>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

cxst1h57 · 发表于 2022-9-9 03:16:28

额风风风微风微风违法

gc4hg · 发表于 2023-1-7 16:59:49

强烈支持楼主ing……

ki9ku6 · 发表于 2023-1-9 00:04:46

1312315458748777

回复用户5 · 发表于 2023-9-9 13:45:12

呵呵呵呵呵呵呵a

locopy · 发表于 2023-10-17 11:20:33

有什么好的服务器

q42obh · 发表于 2023-10-26 15:54:00

天天源码社区www.tiantianym.com

r8st9 · 发表于 2023-12-12 15:43:21

了乐趣了去了去了去了去了

j__j33p · 发表于 2024-2-26 06:21:17

可以，看卡巴

vir5051 · 发表于 2024-3-20 05:58:32

天天源码社区。。。。

账号		自动登录	找回密码
密码			立即注册

[JavaScript] js可拖动的后台界面

相关帖子