IE中通过setCapture监听鼠标按下和移动,Chrome浏览器中没有相应的方法,所以通过其它方式来实现。
兼容IE和Chrome的拖动改变布局宽度var leftWidth;
var widths=[140,0];
var iw=1;
var swidth;
var sheight;
function get(id) {
return document.getElementById(id)
}
function SwitchLeftWidth(){
document.all("left").style.width=widths[iw];
iw++;
if(iw>=widths.length) iw=0;
}
function startResize(){
if(resizeBox.setCapture){
resizeBox.setCapture();
resizeBox.οnmοusemοve=function(e){
var w=(e||event).x-6;
if(w<0) w=0;
document.all("left").style.width=w;
}
resizeBox.οnmοuseup=function(){
resizeBox.releaseCapture();
leftWidth=document.all("left").style.pixelWidth;
resizeBox.οnmοusemοve=null;
resizeBox.οnmοuseup=null;
}
}else{
var oLeft = get("left"),oMain =get("main"),
oMainTd =get("mainTd");
var oWrapperDiv=ge("wrapperDiv");
swidth = document.body.clientWidth;
sheight = document.body.clientHeight;
document.οnmοusemοve=function(e){
if(oWrapperDiv.style.display=="none"){
oWrapperDiv.style.width=swidth;
oWrapperDiv.style.height=sheight;
oWrapperDiv.style.display="";
}
var w=(e||event).screenX-6;
if(w<0) w=0;
//oLine.style.left =w+ "px";
//oMain.style.left = w + "px";
oLeft.style.width=w+ "px";
oMain.style.width=(oMain.style.width-w)+ "px";
//oMainTd.style.width=(oMainTd.style.width-w)+ "px";
return false
}
document.οnmοuseup=function(){
oWrapperDiv.style.display="none";
leftWidth=document.all("left").style.pixelWidth;
document. = null;
document. = null;
}
}
}
border=0 id="box" >
class="easyui-resizable" >
style="z-index: 2; visibility: inherit; width: 140; height: 100%;"
name=left src="a.html" frameBorder=0
scrolling=auto>
style="position:relative;cursor:e-resize;left:0;">
style="cursor:pointer;width:8px;height:50px;background:#FF0000" >
style="z-index: 1;visibility: inherit; width: 100%; height: 100%;"
name=main src="b.html" frameBorder=0
scrolling=yes>
resizeBox.
add
注:wrapperDiv的处理是为了一360极速浏览器的兼容模式等的情况