<!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. Java Script基础（五） 内置对象Date

    在JavaScript中,系统的内置对象有Date对象.Array对象.String对象和Math对象等. 1.Date:用于操作日期和时间. 2.Array:用于在单独的变量名中存储一系列的值. 3 ...

  2. jquery plugins —— datatables 增加行号

    table = $("#Table").DataTable({ "rowCallback": function (row, data, dataIndex) { ...

  3. 你有没有试过“闭上眼”使用：京东、滴滴、QQ、支付宝？

    正在看这篇文章的同学,也许是幸运的. 互联网的发展,让我们的生活越来越便利,但这个“我们”,也许并不包括那些残障人士.正常人眼里来说再简单不过的页面操作,对于盲人来说都是不可攀越的高墙.换句话说,越行 ...

  4. 最初步的正则表达式引擎:生成nfa

    这个版本修改了前面版本的两个个bug. 第一个:识别到字符集的时候,只是将name_number加1,却并不对reg_pattern_table[name_number]进行初始化. 第二个:识别到假 ...

  5. 第03篇. 标准Web项目Jetty9内嵌API简单启动

    一直以来,想改变一些自己早已经习惯的事情. 到了一定年龄,便要学会寡言,每一句话都要有用,有重量. 喜怒不形于色,大事淡然,有自己的底线. --胖先生 昨天,简单的说了一下关于Jetty9的配置,大家 ...

  6. 51nod 棋盘问题(博弈论)

    题目链接: 棋盘问题 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 上帝创造了一个n*m棋盘,每一个格子都只有可能是黑色或者白色的. 亚当和夏娃在玩一个游戏,每次寻找边长为x的正方 ...

  7. noi 97 积木游戏

    思路:黑书的例题 #include<map> #include<set> #include<cmath> #include<queue> #includ ...

  8. Unity3d之截图

    1.Application.CaptureScreenshot("Screenshot.png", 0); 2. exture2D CaptureScreenshot2(Rect  ...

  9. 2012的数据库 select @@version 都是说版本为2008 R2

    如图 我使用的是sqlserver2012登录的,select @@version 查询出来的却是2008 ,而且附加不了2012的数据库. 在网上搜到解决方法:1确认是否安装了2012(废话没安装是 ...

  10. CSS之简单树形菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...