<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://gaoqianqian5.oicp.net:88/js/jquery-1.10.1.min.js"></script>
<style>
#main{
background-color: BurlyWood;
width: 85%;
float: right;
position: absolute;
top:100px;
bottom: 38px;
right: 0;
}
#sidebar{
background-color: IndianRed;
width:200px;
min-width:200px;
float: left;
position: absolute;
top:100px;
bottom: 38px;
overflow-y: hidden;
}
#footer{
background-color: PaleGoldenRod;
width:100%;
height: 38px;
bottom:0;
position:absolute;
}
#header{
background-color: wheat;
width:100%;
height: 100px;
}
#dragbar{float:left;
background-color:SaddleBrown;
height:100%;
float: right;
width: 15px;
cursor: col-resize;
display:inline-block;
}
</style>
<script type="text/javascript" language="JavaScript">
var bwidth = 0;
$(document).ready(function () {
$("#dragbar").height($("#sidebar").height());
$("#main").css("width", $("body").width() -$("#sidebar").width());
$("#sidebar").css("max-width", $("body").width()- 300);
var i = 0;
$('#dragbar').mousedown(function (){
bwidth =$("body").width();
$(document).mousemove(function (e) {
$('#sidebar').css("width", e.pageX);
$("#main").css("width", bwidth -$("#sidebar").width());
});
});
$(document).mouseup(function () {
$(document).unbind('mousemove');
});
$(window).resize(function () {
$("#dragbar").height($("#sidebar").height());
$("#sidebar").css("max-width",$("body").width() - 300);
$("#main").css("width", $("body").width() -$("#sidebar").width());
});
});
</script>
<title>TestingPasteHTML.com</title>
</head>
<body style="margin:0;">
<div id="header">
header
<span id="mousestatus"></span>
<span id="clickevent"></span>
</div>
<div id="sidebar">
<div id="position"style="float:left;"></div>
<div id="dragbar">
</div>
</div>
<div id="main" style="min-width:300px;">
main
</div>
<div id="footer">
footer
</div>
</body>
</html>
2011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
