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

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

Splitter的更多相关文章

  1. Ultra Video Splitter & Converter

    1. Video Splitter http://www.aone-soft.com/splitter.htm Ultra Video Splitter 是一款视频分割工具.可将一个巨大的AVI/Di ...

  2. guava之Joiner 和 Splitter

    最近在给客户准备一个Guava的分享,所以会陆续的更新关于Guava更多的细节分享.本文将记录Guava中得字符串处理Joiner(连接)和Splitter(分割)处理. Joiner 首先我们来看看 ...

  3. guava--Joiner、Splitter、MapJoinner、MapSplitter

    Joiner: List<String> stringList = new ArrayList<String>(); stringList.add("aa" ...

  4. angular的splitter案例学习

    angular的splitter案例学习,都有注释了,作为自己的备忘. <!DOCTYPE html> <html ng-app="APP"> <he ...

  5. Google Guava学习笔记——基础工具类Splitter的使用

    另一项经常对字符串的操作就是根据指定的分隔符对字符串进行分隔.我们基本上会使用String.split方法: String testString = "Monday,Tuesday,,Thu ...

  6. Data Flow ->> CDC Control Task, CDC Source, CDC Splitter

    CDC Control Task可以从控制CDC数据同步,比如初始化加载.LSN范围的管理.它可以代替另一种做法,就是通过调用一批CDC函数来完成同样的事情.从SSIS的角度来完成,事情编程简单,和另 ...

  7. Google Guava的splitter用法

    google的guava库是个很不错的工具库,这次来学习其spliiter的用法,它是一个专门用来 分隔字符串的工具类,其中有四种用法,分别来小结 1 基本用法: String str = " ...

  8. Google的Guava工具类splitter和apache stringutil对比 编辑

    一直用的是apache的stringutil工具类,其实google的工具类项目 guava中居然也有字符串的分隔类splitter的,在 http://code.google.com/p/guava ...

  9. c# splitter控件使用简介

    摘自:http://blog.itpub.net/26221264/viewspace-735903 1.先在窗体上放置部分一的控件,这里是TreeView控件,然后把它的 Dock 属性设置为 Le ...

随机推荐

  1. ASP.NET入门(1) - 建立和开发ASP.NET 5 项目

    原文转载自:http://www.cnblogs.com/zergcom/p/4493358.html 建立项目 首先,目前只有VS 2015支持开发最新的ASP.NET 5 程序,所以我们首先需要下 ...

  2. oracle PL/SQL（procedure language/SQL）程序设计之触发器（trigger）

    创建触发器 触发器类似于过程和函数,都拥有声明.执行和异常处理过程的带名PL/SQL块.与包类似,触发器必须存储在数据库中.前面已经讲过,过程是显式地通过过程调用执行的,同时过程调用可以传递参数.与之 ...

  3. hdu-5505(数论)

    题目链接: GT and numbers Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Ot ...

  4. 转: app端数据库(性能高) realm （ios, android 均支持）

    转:  http://ios.jobbole.com/85041/ 移动端数据库新王者:realm 2016/05/14 · iOS开发 · 数据库 分享到:0 原文出处: 没故事的卓同学(@没故事的 ...

  5. Tensorflow之安装

    1.fellow the instruction of https://github.com/tensorflow/tensorflow/blob/master/tensorflow/g3doc/ge ...

  6. css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

  7. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  8. WEB系统架构

    客户端方向:框架+控件+模板+元数据辅助:懒加载+合并请求+异步任务+推送+缓存技术:reactjs,requirejs,jquery,angularjs,bootstrap,ant.design,f ...

  9. 用LINQ在集合中查询特定对象

    这里是原文出处: 简单的概括LINQ LINQ是Language-Integrated Query的缩写,是C# 3.0和VB 9.0中新加入的语言特性,可以在编程时使用内置的查询语言进行基于集合的操 ...

  10. iOS - OC & Xcode

    一.入门 1.1 iOS模版介绍 1.2 简单工程项目 1.3 设置App启动的设备方向 1.4 Xcode界面介绍 1.5 快速查找文件 1.6 快速更改同名变量 1.7 将代码提取为方法 1.8 ...