<!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 的文件读取操作

    /** * @param filePath 文件的全路径 * 返回我们读取到的文件内容 * **/ public static String readFile(String filePath) { F ...

  2. [Android 开源项目学习]Android的UITableView(1)

         最近由于项目加急,手里有好多看了差不多的开源项目,其中好多是大家经常用到的.图片的缓存BitmapFun(Android的文档中),AfinalMap,下拉刷新PullToRefresh等等 ...

  3. 关于TransactionScope出错：“与基础事务管理器的通信失败”的解决方法总结

    遇到此问题先需确认几个问题: 1)MS DTC是否设置正确? 2)是否启用了防火墙?是否对DTC做了例外? 3)是否做了hosts映射?是否跨网域通信? 开发分布式事务,碰到一个错误“与基础事务管理器 ...

  4. Umbraco（1） - Document Types（翻译文档）

    Document Types Data first nothing in = nothing out! 任何网站的第一步是创建一个"Document Type"-几次安装后你会熟悉 ...

  5. 5059 一起去打CS

    5059 一起去打CS  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 早就和lyk约好了去 ...

  6. 【转载】Android开发学习笔记：Intent的简介以及属性的详解

    http://liangruijun.blog.51cto.com/3061169/634411/ 一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent ...

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

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

  8. 2015影响因子Excel版

    现在终于有影响因子2015的Excel版了,这个版本除了还包括杂志全称和缩写等基本信息还,包括中科院分区, 应该是迄今2015影响因子最奢华的版本了吧. 看了这个版本,发现中国的SCI杂志还是不少的, ...

  9. 另类安装系统——PE工具提取

    1. 在当前系统使用安装工具win$man打开,即pe里集成安装工具 2. 选择安装的磁盘或者分区和引导分区 3. 可以默认下一步 4. 不想更改盘符可以默认下一步 5. 最后完成开始安装部署(还需要 ...

  10. 10款很酷的HTML5动画和实用的HTML5应用

    1.HTML5的画布花朵生成器可生成多种样式的花朵 HTML5非常流行,利用HTML5制作动画也非常方便,今天要分享一款利用HTML5 Canvas制作的花朵生成器,我们只需要在Canvas画布上点击 ...