div层高度可拖动demo资源-CSDN下载

共7个文件

gif：3个

jpg：1个

js：1个

3星 · 超过75%的资源需积分: 10 59 浏览量 2010-05-20 17:36:27 上传评论收藏 115KB RAR 举报

在网页设计中，`div`元素是HTML中最基础也是最重要的布局工具之一，它用于定义页面上的块级元素区域。在本“div层高度可拖动demo”中，开发者利用`div`来创建一个可交互的界面，使得用户可以通过鼠标拖动来调整`div`的高度，从而增强用户体验和互动性。这种功能在各种需要用户自定义界面尺寸的应用场景中非常常见，如数据可视化的图表区域、可调整大小的编辑器窗口等。这个示例采用了jQuery框架，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使开发者能更高效地编写JavaScript代码。在这个例子中，jQuery被用来处理用户的鼠标事件，实现拖动功能。拖动功能的实现通常包括以下几个关键步骤： 1. **事件监听**：我们需要在`div`元素上绑定`mousedown`事件，当用户按下鼠标按钮时触发该事件。同时，还需要监听`mousemove`和`mouseup`事件，分别对应鼠标移动和释放的情况。 2. **初始状态记录**：在`mousedown`事件中，我们需要记录下鼠标按下的位置（鼠标相对于`div`顶部的距离）和`div`当前的高度。 3. **拖动处理**：在`mousemove`事件中，根据鼠标的移动更新`div`的高度。计算新高度时，要考虑到鼠标当前位置与初始按下位置的差值。 4. **边界检查**：为了防止`div`高度超出预定范围，我们需要设置最小和最大高度限制，并在每次调整时进行检查。 5. **兼容性处理**：由于不同的浏览器可能对某些CSS属性或事件处理有不同的实现，因此需要确保代码在火狐和IE等主流浏览器上都能正常工作。例如，使用`getBoundingClientRect()`方法获取元素的实时位置信息，以适应不同浏览器的差异。 6. **样式更新**：使用`CSS`更新`div`的高度，并确保页面布局的其他部分能够正确响应这个变化，例如使用`box-sizing`属性控制元素边框和内填充对元素尺寸的影响。在压缩包中的“scrop”文件可能是实现这一功能的源代码文件，包含HTML、CSS和JavaScript代码。通过分析和学习这个文件，我们可以更深入地理解如何用jQuery实现跨浏览器的`div`拖动高度功能。同时，这也是一个提升前端开发技能的好机会，尤其是对于理解DOM操作、事件处理和浏览器兼容性问题有很好的实践价值。

资源推荐

资源详情

资源评论

收起资源包目录

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

<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>

评论收藏

内容反馈