<script type="text/javascript">
function bindResize(el){
//初始化参数
var els = document.getElementById('admin-offcanvas').style;
//鼠标的 X 和 Y 轴坐标
var x = 0;
//邪恶的食指
$(el).mousedown(function (e){
//按下元素后,计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth - $("#admin-offcanvas").width();
//在支持 setCapture 做些东东, //捕捉焦点,//设置事件
el.setCapture ? (el.setCapture(),el.onmousemove = function (ev){
mouseMove(ev || event);},el.onmouseup = mouseUp) : (
//绑定事件
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp));
//防止默认事件发生
e.preventDefault();
});
//移动事件 运算中...
function mouseMove(e){
els.width = e.clientX - x + 'px';
var left = e.clientX - x + 'px';
$("#rightbar").attr("style","width: 5px;height: 100%;background: #cecece; z-index:999;cursor:e-resize;left: "+left+";position: absolute;");
$("#admin_content").attr("style","position: absolute;left: "+left+";top: 0;right: 0;bottom: 0;");
}
//停止事件
function mouseUp(){
//在支持 releaseCapture 做些东东, //释放焦点, //移除事件
el.releaseCapture ? (el.releaseCapture(),el.onmousemove = el.onmouseup = null) : (
//卸载事件
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp));
}
}
var divResize=function(){
var totalHeight=$("html").height();
// console.log(totalHeight);
var topHeight=$("#top").height();
$("#admin-offcanvas").height(totalHeight-topHeight);
$("#rightbar").height(totalHeight-topHeight);
};
$(function() {
divResize();
$(window).resize(divResize);
bindResize(document.getElementById('rightbar'));
});
</script>
<%--div 1--%>
<div class="admin-sidebar am-offcanvas" id="admin-offcanvas" style="position: absolute;left: 0;top: 0;width: 20%;bottom: 0px;">
内容div 1
</div>
<%--移动边框--%>
<div id="rightbar" style="width: 5px;height: 100%;background: #cecece; cursor: e-resize;z-index:999;left: 330px;position: absolute;"></div>
<%--div 2--%>
<div class="admin-content" id="admin_content" style="position: absolute;left: 20%;top: 0;right: 0;bottom: 0;">
内容div 2
</div>