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>

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

来自 网易手机号码邮箱 -- 有手机就有网易手机号码邮箱，了解详情>