<!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基础 存储过程和游标

    一.带游标的存储过程 游标作为参数有两种类型: 1.声明系统游标类型 SYS_REFCURSOR 1)游标作为存储过程的参数: --带游标的存储过程 CREATE OR REPLACE PROCEDU ...

  2. Linux_内存查询

    查询磁盘使用情况: [root@css-management ~]# df -hl 文件系统 容量 已用 可用 已用% 挂载点 Filesystem Size Used Avail Use% Moun ...

  3. spring + Quartz定时任务配置

    <bean id="exportBatchFileTask" class="com.ydcn.pts.task.ExportBatchFileTask"& ...

  4. [转]c# xml.Load() locking file on disk causing errors

    本文转自:http://stackoverflow.com/questions/1812598/c-sharp-xml-load-locking-file-on-disk-causing-errors ...

  5. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. xhtml+css基础知识1

    样式 行间样式:在标签里 <div style="width:400px; height:200px; background:red;">块</div> 内 ...

  7. freeCodeCamp:Diff Two Arrays

    比较两个数组,然后返回一个新数组,该数组的元素为两个给定数组中所有独有的数组元素.换言之,返回两个数组的差异. function diff(arr1, arr2) { var newArr = []; ...

  8. 第二回 认识CDN

    CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节 ...

  9. jQuery简介<思维导图>

    jQuery是继prototype之后有一个优秀的Javascript库,它由John Resig创建于2006年1月.它简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.它独特 ...

  10. 【学习笔记】【C语言】二维数组

    1. 什么是二维数组 一个数组能表示一个班人的年龄,如果想表示很多班呢? 什么是二维数组?int ages[3][10]; 三个班,每个班10个人 相当于3行10列 相当于装着3个一维数组 二维数组是 ...