js可拖动的后台界面- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js可拖动的后台界面

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的 js可拖动的后台界面

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 283 ::

收藏到网摘: n/a

javascript+xml技术实现分页浏览 javascript 单选框，多选框美化代码

不错的后台界面，方便大家以后做后台 // ************************ 拖动 *********************************
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>可拖动的后台界面_软晨学习网_ruanchen.com</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>
<div id="topArea" class="topArea"> <div class="logoArea"> </div> <div class="toolbarArea"> </div>
</div>
<div id="mainContent"> <div id="leftShow" class="f_left leftBg" style="width:180px;height:100%;"></div> <div class="f_left splitBar" id="dragBar" onmousedown = "setDrag(event);"></div> <div class="content_show" id="center" style="overflow-y:auto;overflow-x:hidden;"> <iframe src="" width="100%" height="100%" frameborder="1"></iframe> </div>
</div>
<div id="footer" class="bottomArea" align="center">
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript+xml技术实现分页浏览 javascript 单选框，多选框美化代码

Javascript 中的 js可拖动的后台界面

评论 (0) All