<!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. Oracle基础 exp/imp和expdp/impdp的区别：

    一.exp/imp和expdp/impdp在功能上的区别: 1.把用户usera的对象导入到userb emp/imp用法: formuser=usera touser=userb; empdp/im ...

  2. VMware系统运维（十）部署虚拟化桌面 Horizon View 5.2 Connection Server安装

    部署桌面虚拟化,首先得安装连接服务器,下面我们开始安装Connection Server. 1.下载并安装以下软件,提示:只能在Win2008R2上安装,Win2012R2无法安装. 2.双击打开程序 ...

  3. hdu 4612 Warm up 桥缩点

    4612Warm hdu up 题目:给出一个图,添加一条边之后,问能够在新图中得到的最少的桥的数量. 分析:我们可以双联通分量进行缩点,原图变成了一棵树.问题变成了:求树中添加一条边之后,使得不在圈 ...

  4. 快速调试的VS设置

    这是2013年“惹”的“祸”. 自己一直使用着VS2012,以前的调试是相当方便的,或许是之前的同事设置好的VS,我一直不会去注意我停掉调试(停掉调试的意思是:将状态1正在调试的状态,变更为状态2待启 ...

  5. 简直喝血！H.265要被专利费活活玩死

    转自 http://news.mydrivers.com/1/440/440145.htm H.264是如今最流行的视频编码格式之一,不但技术先进,而且专利费很低,企业每年只需支付650万美元,而个人 ...

  6. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

  7. 百度编辑器ueditor前台代码高亮无法自动换行解决方法

    这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题 问题描述:   在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换 ...

  8. Oracle数据库对象_视图

    视图是一种非常重要的数据库对象,它的形式类似于普通表,我们可以从视图中查询数据. 实际上它是建立在表上的一种虚表,在视图中并不存储真正的数据,而是仅仅保存一条SELECT语句,对视图的访问将被转化为对 ...

  9. 简单的json传送数据

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  10. WCF之安全

    传输安全. 点对点,对整个消息进行加密,性能损失,当中间者不安全时,消息也就不安全了. WCF中支持传输安全和消息安全模式. 通过配置和绑定来设置.<Security Mode =Transct ...