Splitter

<!DOCTYPE html>
<html>
<head>
<title>PDemo</title>

</head>
<body>
<div id="test">
<div id="container" style="position:absolute; top:0px;height:535px;width:805px;left:0px; background-color:red;">
<div id="leftPanel" style="position:absolute;top:0px;width:400px;height:535px;left:0px;overflow:hidden;background-color:gray;"></div>
<div id="splitterBar" onmousedown="fnMouseDown(event,200,600,400,400);" style="padding:0px;border:0px;height:100%; left:400px;top:0;width:5px;background-color:black;cursor:w-resize;position:absolute;border-style:solid;"
></div>
<div id="rightPanel" style="position:absolute; left:405px;top:0;height:535px;width:400px;min-width:200px;max-width:600px;overflow:hidden; background-color:green;"></div>
</div>
</div>
</body>
<script type="text/javascript">
function fnMouseDown(ev,minLeftWidth,maxLeftWidth,oriLeftWidth, oriRightWidth){
var splitterBar = document.getElementById('splitterBar');
var leftPanel = document.getElementById('leftPanel');
var rightPanel = document.getElementById('rightPanel');
var container = document.getElementById('container');
var minLeftWidths = minLeftWidth;
var maxLeftWidths = maxLeftWidth;
var origianlLeftWidth = oriLeftWidth;
var originalRightWidth = oriRightWidth;

var left = splitterBar.offsetLeft;
var oWidth = leftPanel.offsetWidth;
var rightLeft = rightPanel.offsetLeft;
var containerWidth = parseInt(container.style.width);
var leftPanelWidth = parseInt(leftPanel.style.width);
var rightPanelWidth = parseInt(rightPanel.style.width);
var splitterBarWidth = parseInt(splitterBar.style.width);

var oEvent = ev || event;
var disX = oEvent.clientX - left;
var disForRightPanel = rightLeft - oEvent.clientX;
document.onmousemove = function (ev){
var oEvent = ev || event

var currentleftWidth = oEvent.clientX - disX;

if(currentleftWidth > maxLeftWidths || leftPanelWidth > maxLeftWidths){
leftPanel.style.width = origianlLeftWidth + 200 + "px";
splitterBar.style.left = origianlLeftWidth + 200 + "px";
rightPanel.style.width = rightPanelWidth - 200 + "px";

} else if(currentleftWidth < minLeftWidths || leftPanelWidth < minLeftWidths) {
leftPanel.style.width = origianlLeftWidth - 200 + "px";
splitterBar.style.left = origianlLeftWidth - 200 + "px";
rightPanel.style.width = originalRightWidth + 200 + "px";
} else {
splitterBar.style.left = oEvent.clientX - disX + 'px';
console.log("splitterBar.style.left is : " + splitterBar.style.left);
leftPanel.style.width = oEvent.clientX - disX + 'px';
//console.log("leftPanel.style.width: " + oEvent.clientX - disX +'sfsdfsdfsd');
rightPanel.style.left = oEvent.clientX - disX + splitterBarWidth + 'px';
/*rightPanel.style.width = (containerWidth - parseInt(rightPanel.style.left)) + 'px';*/
rightPanel.style.width = (containerWidth - (oEvent.clientX - disX) - splitterBarWidth) +'px';
console.log("rightPanel width" + (containerWidth - (oEvent.clientX - disX) - splitterBarWidth));
}
document.onmouseup = function (){
document.onmousemove= null;
document.onmouseup = null;
};
return false;
};

}
</script>

</html>

你可能感兴趣的:(split)