<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div层拖动</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style>
.resizeDivClass
{
position:absolute;
background-color:gray;
width:2px;
height:15px;
z-index:1px;
display: block;
cursor:e-resize
}
.td1 {
font-size: 12px;
white-space:nowrap;
color:#0000ff;
}
.flod_x{
width:100%;
height:8px;
background:url(images/right_fold.jpg) repeat-x;
border:none;
}
.fold_x_td{
width:48%;
height:8px;
text-align:center;
cursor:n-resize;
}
.fold{
width:51px;
height:8px;
padding-left:5px;
margin-top:0;
background:url(images/flod_x.gif) left no-repeat;
}
.fold_s{
width:51px;
height:8px;
padding-left:5px;
margin-top:0;
background:url(images/flod_s.gif) left no-repeat;
}
</style>
<script language=javascript>
/*
标题：div高度可拖拽demo
设计：卢柏南
博客：http://hi.csdn.net/andensy
日期：2010年5月17日
说明：修改了firfox兼容性问题，可以很好的兼容火狐浏览器
*/
/*
依赖于jQuery
*/
(function($){
//用正则表达式判断jQuery的版本
if (/1\.(0|1|2)\.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
alert('movedTh 需要 jQuery v1.2.6 以后版本支持! 你正使用的是 v' + $.fn.jquery);
return;
}
var isHide=false;
var fotHeight=0;
var rtopHeight=0;
var tabHeight=0;
$.fn.mousedone={
movedown:function(e,obj){
var d=document;
var e = window.event||e ;
var myY = e.clientY||e.pageY;
tabHeight==0?tabHeight=$("#table").height():tabHeight;
obj.mouseDownY=myY ;
obj.topDivh=$("#right_top").height(); //obj.parentElement.offsetWidth;
obj.footDivh=$("#right_foot").height()
obj.tableDivh=$("#table").height();
if(obj.setCapture){
obj.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
d.onmousemove=function(e){
var dragData=obj;
var event = window.event||e ;
var newTopHeight=0;
var newFootHeight=0;
var newTableHeight=0;
if(!dragData.mouseDownY) return false;
newTopHeight=parseFloat(dragData.topDivh)+(event.clientY||event.pageY)*1-dragData.mouseDownY;
newFootHeight=parseFloat(dragData.footDivh)+(event.clientY||event.pageY)*1-dragData.mouseDownY;
newTableHeight=parseFloat(dragData.tableDivh)+(event.clientY||event.pageY)*1-dragData.mouseDownY;
if(newTopHeight>0)
{
$("#right_top").height(newTopHeight);
}//end if
if(newFootHeight>0)
{
$("#right_foot").height(newFootHeight);
}//end if
if(newTableHeight>0) $("#table").height(newTableHeight);
};
d.onmouseup=function(e){
var dragData=obj;
if(dragData.setCapture)
{
dragData.releaseCapture();
}else if(window.captureEvents){
window.releaseEvents(e.MOUSEMOVE|e.MOUSEUP);
}
dragData.mouseDownY=0;
}
}, //movedown
hideFoot:function(){
tabHeight==0?tabHeight=$("#table").height():tabHeight;
fotHeight==0?fotHeight=$(".right_foot").height():fotHeight;
var bodyHeight=0;
if(!isHide)
{
rtopHeight==0?rtopHeight=$("#right_top").height():rtopHeight;
bodyHeight==0?bodyHeight=Math.abs(document.body.offsetHeight):bodyHeight;
$(".right_foot").hide();
$("#table").height(parseFloat(tabHeight+fotHeight));
$("#fold").get(0).className="fold_s";
$("#right_top").height(bodyHeight-8);
$("#table").html(tabHeight+"\n"+fotHeight+"\n"+parseFloat(tabHeight+fotHeight));
isHide=true;
}else{
rtopHeight=$("#right_top").height();
bodyHeight==0?bodyHeight=Math.abs(document.body.offsetHeight):bodyHeight;
$("#right_top").height(bodyHeight-fotHeight);
$("#table").height(tabHeight);
$(".right_foot").show();
$("#fold").get(0).className="fold";
$("#table").html(tabHeight+"\n"+fotHeight);
isHide=false;
}
} //end hideFoot
} //end mousedone
})(jQuery)
</script>
</head>
<body onload="">
<div id="Right" >
<div id="Right_body">
<div id="right_top" style="border:1px solid yellow" >
<div class="Toolbar" id="Toolbar" style="height:50px; border:1px solid red"></div>
<div class="Searchbar" style="height:100px; border:1px solid green">
<p style="margin-top:3px;" >
</p>
</div>
<div id="table" class='main_table' style="height:450px; border:1px solid green"></div>
</div>
<table class="flod_x">
<tr>
<td class="fold_x_td" style="" onmousedown="$().mousedone.movedown(event,this)"></td>
<td><span onclick="$().mousedone.hideFoot()" class="fold_s" style="" id="fold"></span></td>
<td class="fold_x_td" style="" onmousedown="$().mousedone.movedown(event,this)">
</td>
</tr>
</table>
<div class="right_foot" id="right_foot" style="height:120">
<iframe src="" style="display:''" frameborder="0" scrolling = "no" width=100% height=100% name="subform" id="subform"></iframe>
</div>
</div>
</div>
</body>
</html>
div层高度可拖动demo
3星 · 超过75%的资源 需积分: 10 27 浏览量
2010-05-20
17:36:27
上传
评论
收藏 115KB RAR 举报 
scrop.rar （7个子文件） 
scrop 
jquery-1.3.2.min.js 56KB images 
flod_s.gif 116B fold_r.gif 140B Thumbs.db 220KB
right_fold.jpg 11KB flod_x.gif 116B
scrop.html 5KB资源评论
xiaofeng2652011-12-10基本可以用，但是还是太简单了，定位不准确
冷月飞雪2013-05-22太简单了点
