浏览 5120 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-13
这两天因工作需要做了一个网页分割条，期间碰到不少问题，好在最后都解决了，最后 版本在ie8和firefox3.5上都能流畅运行，现总结一下： 1. 拖动分割条的一个问题是要把鼠标的移动和释放事件不间断地捕获到并进行处理，当 鼠标快速移动时，要保证即使鼠标移出了分割条，进入页面其他元素的范围内，这些事 件也能被捕获到并进行相应的处理。在ie中，这需要使用setCapture()方法，拖动动作 完成后还要用releaseCapture()方法释放。但firefox不支持该方法，网上有的说可以 用window.captureEvents方法，但我在firefox中试过也不行，找了找资料据说这是 netscape的特性，firefox只实现了一个空的方法，并不起作用。firefox解决这一问题 的办法是按下分割条后，就将鼠标移动和释放的事件处理方法绑定到document上，然后 在鼠标释放的时候再进行移除。 2. 拖动分割条中碰到的第二个问题是，在firefox中，拖动很容易中断，可能是因为一 旦鼠标移出了分割条，相应的鼠标事件在某些情况下会被页面中的其他元素截留，这个 问题可以通过event的preventDefault()方法解决。 最后代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<style>
.shadowDivA {
overflow: scroll;
width: 200px;
height: 100%;
position: absolute;
top: 0px ; left : 0px;
background-color: yellow;
filter: alpha(opacity = 70);
opacity: 0.7;
}
.shadowDivB {
overflow: scroll;
width: 500px;
height: 100%;
position: absolute;
top: 0px ; left : 205px;
background-color: blue;
filter: alpha(opacity = 70);
opacity: 0.7;
}
.shadowDivM {
width: 5px;
height: 100%;
position: absolute;
top: 0px ; left : 200px;
background-color: grey;
cursor:e-resize;
filter: alpha(opacity = 70);
opacity: 0.7;
}
</style>
<script type="text/javascript">
var flag = false ;
var objSplitter = false;
function down(event, obj){
if(!flag){
if(obj.setCapture)
obj.setCapture();
else {
document.addEventListener('mouseup', up, true);
document.addEventListener('mousemove', move, true);
event.preventDefault();
}
flag = true ;
objSplitter = obj;
}
}
function up(event){
if(flag){
if(objSplitter.releaseCapture)
objSplitter.releaseCapture();
else {
document.removeEventListener('mouseup', up, true);
document.removeEventListener('mousemove', move, true);
event.preventDefault();
}
flag = false ;
}
}
function move(event){
if(flag){
var obj1 = document.getElementById("a") ;
var obj2 = document.getElementById("b") ;
obj1.style.width = event.clientX + "px" ;
obj2.style.left = (event.clientX + 5) + "px" ;
obj2.style.width = (700 - event.clientX) + "px" ;
objSplitter.style.left = event.clientX + "px" ;
if(!objSplitter.releaseCapture) {
event.preventDefault();
}
}
}
</script>
</head>
<body>
<div id="a" class="shadowDivA">
</div>
<div class="shadowDivM" onmousedown="down(event, this);" onmouseup="up(event);" onmousemove="move(event);">
</div>
<div id="b" class="shadowDivB">
</div>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-01-13
报告BUG:
当分割条到黄色或者蓝色的边界时, 会出现参数无效的错误. |
| 返回顶楼 | |
|
发表时间：2010-01-13
呵呵，只是试一下分割条，没做边界值处理
谢了 |
| 返回顶楼 | |
|
发表时间：2010-01-18
报告BUG: ie6下分隔条不能拖拽
|
| 返回顶楼 | |
|
发表时间：2010-01-18
确实
把.shadowDivM的 background-color: grey; 改成 background-color: #888888; 就可以了，难道是ie6不支持grey这个颜色定义? |
| 返回顶楼 | |
|
发表时间：2010-01-19
楼主能修正一下再贴上来吗？
我也学习学习 |
| 返回顶楼 | |
|
发表时间：2010-01-19
这个版本在ie6上也能跑
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<style>
.shadowDivA {
overflow: scroll;
width: 200px;
height: 100%;
position: absolute;
top: 0px ; left : 0px;
background-color: yellow;
filter: alpha(opacity = 70);
opacity: 0.7;
}
.shadowDivB {
overflow: scroll;
width: 500px;
height: 100%;
position: absolute;
top: 0px ; left : 205px;
background-color: blue;
filter: alpha(opacity = 70);
opacity: 0.7;
}
.shadowDivM {
width: 5px;
height: 100%;
position: absolute;
top: 0px ; left : 200px;
background-color: #888888;
cursor:e-resize;
filter: alpha(opacity = 70);
opacity: 0.7;
}
</style>
<script type="text/javascript">
var flag = false ;
var objSplitter = false;
function down(event, obj){
if(!flag){
if(obj.setCapture)
obj.setCapture();
else {
document.addEventListener('mouseup', up, true);
document.addEventListener('mousemove', move, true);
event.preventDefault();
}
flag = true ;
objSplitter = obj;
}
}
function up(event){
if(flag){
if(objSplitter.releaseCapture)
objSplitter.releaseCapture();
else {
document.removeEventListener('mouseup', up, true);
document.removeEventListener('mousemove', move, true);
event.preventDefault();
}
flag = false ;
}
}
function move(event){
if(flag){
var obj1 = document.getElementById("a") ;
var obj2 = document.getElementById("b") ;
obj1.style.width = event.clientX + "px" ;
obj2.style.left = (event.clientX + 5) + "px" ;
obj2.style.width = (700 - event.clientX) + "px" ;
objSplitter.style.left = event.clientX + "px" ;
if(!objSplitter.releaseCapture) {
event.preventDefault();
}
}
}
</script>
</head>
<body>
<div id="a" class="shadowDivA">
</div>
<div class="shadowDivM" onmousedown="down(event, this);" onmouseup="up(event);" onmousemove="move(event);">
</div>
<div id="b" class="shadowDivB">
</div>
</body>
</html>
|
| 返回顶楼 | |
|
发表时间：2010-01-19
IE8下还是拉出边界之后还是有问题
|
| 返回顶楼 | |
|
发表时间：2010-01-19
哦，那些没改，加些判断就可以了
|
| 返回顶楼 | |
