<!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>
<!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>
<html>
<head>
<title>Splitter Control</title>
</head>
<script src="../package/reactjs/react.js"></script>
<script src="../package/reactjs/JSXTransformer.js"></script>
<style type="text/css">
.container {
width: 605px;
height: 300px;
height: 300px;
margin: 0 auto 0 auto;
margin-top: 50px;
border: solid 1mm yellow;
}
.left-panel {
width: 300px;
height: 300px;
float: left;
background: grey;
}
.right-panel {
width: 300px;
height: 300px;
float: right;
background: green;
} </style>
<body>
<div id="container" class="container">
<div id="leftPanel" class="left-panel">Left</div>
<div id="rightPanel" class="right-panel">Right</div>
</div>
<script type="text/jsx">
var disX = 0;
var isBegin = false;
var Splitter = React.createClass({
getInitialState: function()
{
var left = document.getElementById(this.props.leftPanel);
var right = document.getElementById(this.props.rightPanel);
left.style.width = "100%";
right.style.width = "100%";
right.style.height = "100%";
return {
originalLeftWidth: this.props.originalLeftWidth,
originalLeftHeight: this.props.originalLeftHeight,
originalSplitterWidth: this.props.originalSplitterWidth,
originalSplitterHeight: this.props.originalSplitterHeight,
originalRightWidth: this.props.originalRightWidth,
originalRightHeight: this.props.originalRightHeight,
currentLeftWidth: this.props.originalLeftWidth,
currentSplitterLeft: this.props.originalLeftWidth,
currentRightWidth: this.props.originalRightWidth,
currentRightLeft: this.props.originalLeftWidth + this.props.originalSplitterWidth,
leftPanel: left,
rightPanel:right,
currentSplitterBackgroundColor: 'blue'
};
}, onMouseMove: function(ev){
ev.preventDefault();
if(isBegin == true)
{
var currLeftWidth = ev.clientX - disX;
if(currLeftWidth > this.props.maxLeftWidth || this.state.currentLeftWidth > this.props.maxLeftWidth)
{
var cuRightWidth = this.props.originalRightWidth + this.props.originalLeftWidth - this.props.maxLeftWidth;
this.setState({
currentLeftWidth:this.props.maxLeftWidth,
currentSplitterLeft:this.props.maxLeftWidth,
currentRightWidth:cuRightWidth,
currentSplitterBackgroundColor: 'black'
});
} else if(currLeftWidth < this.props.minLeftWidth || this.state.currentLeftWidth < this.props.mixLeftWidth) {
var cuRightWidth = this.props.originalRightWidth + this.props.originalLeftWidth - this.props.minLeftWidth;
this.setState({
currentLeftWidth:this.props.minLeftWidth,
currentSplitterLeft:this.props.minLeftWidth,
currentRightWidth:cuRightWidth,
currentSplitterBackgroundColor: 'black'
});
} else {
var cuRightWidth = this.props.originalLeftWidth + this.props.originalRightWidth - currLeftWidth;
this.setState({
currentLeftWidth:currLeftWidth,
currentSplitterLeft:currLeftWidth,
currentRightWidth:cuRightWidth,
currentSplitterBackgroundColor: 'black'
});
}
}
}, onMouseUp: function(){
isBegin = false;
disX = 0;
this.setState({
currentSplitterBackgroundColor: 'blue'
});
document.body.removeEventListener("mouseup", this.onMouseUp);
document.body.removeEventListener("mousemove", this.onMouseMove);
}, onMouseOver: function(){
this.setState({
currentSplitterBackgroundColor: 'black'
});
}, onMouseOut: function(){
this.setState({
currentSplitterBackgroundColor: 'blue'
});
}, onMouseDown: function(ev){
isBegin = true;
var splitter = React.findDOMNode(this.refs.splitter);
disX = ev.clientX - splitter.offsetLeft;
document.body.addEventListener("mouseup", this.onMouseUp);
document.body.addEventListener("mousemove", this.onMouseMove);
}, componentDidMount: function()
{
this.left= this.refs.left.getDOMNode();
this.right = this.refs.right.getDOMNode();
this.left.appendChild(this.state.leftPanel);
this.right.appendChild(this.state.rightPanel);
}, render: function()
{
return(
<div style={{position:'relative'}}>
<div id="message-list" ref="left" style={{ float:'left',
width:this.state.currentLeftWidth,
height:this.state.originalLeftHeight}}>
</div>
<div ref="splitter" className='splitter'
style={{
left:this.state.currentSplitterLeft,
height:this.state.originalSplitterHeight,
width:this.props.originalSplitterWidth,
backgroundColor: this.state.currentSplitterBackgroundColor,
float: 'left'
}}
onMouseDown={this.onMouseDown}
onMouseOver={this.onMouseOver}
onMouseOut={this.onMouseOut}>
</div>
<div ref="right" id="right-panel" style={{float:'left',
overflow: this.props.overflow,
width:this.state.currentRightWidth,
height:this.state.originalRightHeight}}>
</div>
</div>
);
}
}); React.render(
<Splitter
originalLeftWidth={300}
originalLeftHeight={300}
originalSplitterWidth={5}
originalSplitterHeight={300}
originalRightWidth={300}
originalRightHeight={300}
minLeftWidth={200}
maxLeftWidth={400}
leftPanel={"leftPanel"}
rightPanel={"rightPanel"}
overflow ={"auto"} />,
document.getElementById("container")
);
</script>
</body>
</html> 来自 网易手机号码邮箱 -- 有手机就有网易手机号码邮箱，了解详情>