1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>PDemo</title>
  5.  
  6. </head>
  7. <body>
  8. <div id="test">
  9. <div id="container" style="position:absolute; top:0px;height:535px;width:805px;left:0px; background-color:red;">
  10. <div id="leftPanel" style="position:absolute;top:0px;width:400px;height:535px;left:0px;overflow:hidden;background-color:gray;"></div>
  11. <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;"
  12. ></div>
  13. <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>
  14. </div>
  15. </div>
  16. </body>
  17. <script type="text/javascript">
  18. function fnMouseDown(ev,minLeftWidth,maxLeftWidth,oriLeftWidth, oriRightWidth){
  19. var splitterBar = document.getElementById('splitterBar');
  20. var leftPanel = document.getElementById('leftPanel');
  21. var rightPanel = document.getElementById('rightPanel');
  22. var container = document.getElementById('container');
  23. var minLeftWidths = minLeftWidth;
  24. var maxLeftWidths = maxLeftWidth;
  25. var origianlLeftWidth = oriLeftWidth;
  26. var originalRightWidth = oriRightWidth;
  27.  
  28. var left = splitterBar.offsetLeft;
  29. var oWidth = leftPanel.offsetWidth;
  30. var rightLeft = rightPanel.offsetLeft;
  31. var containerWidth = parseInt(container.style.width);
  32. var leftPanelWidth = parseInt(leftPanel.style.width);
  33. var rightPanelWidth = parseInt(rightPanel.style.width);
  34. var splitterBarWidth = parseInt(splitterBar.style.width);
  35.  
  36. var oEvent = ev || event;
  37. var disX = oEvent.clientX - left;
  38. var disForRightPanel = rightLeft - oEvent.clientX;
  39. document.onmousemove = function (ev){
  40. var oEvent = ev || event
  41.  
  42. var currentleftWidth = oEvent.clientX - disX;
  43.  
  44. if(currentleftWidth > maxLeftWidths || leftPanelWidth > maxLeftWidths){
  45. leftPanel.style.width = origianlLeftWidth + 200 + "px";
  46. splitterBar.style.left = origianlLeftWidth + 200 + "px";
  47. rightPanel.style.width = rightPanelWidth - 200 + "px";
  48.  
  49. } else if(currentleftWidth < minLeftWidths || leftPanelWidth < minLeftWidths) {
  50. leftPanel.style.width = origianlLeftWidth - 200 + "px";
  51. splitterBar.style.left = origianlLeftWidth - 200 + "px";
  52. rightPanel.style.width = originalRightWidth + 200 + "px";
  53. } else {
  54. splitterBar.style.left = oEvent.clientX - disX + 'px';
  55. console.log("splitterBar.style.left is : " + splitterBar.style.left);
  56. leftPanel.style.width = oEvent.clientX - disX + 'px';
  57. //console.log("leftPanel.style.width： " + oEvent.clientX - disX +'sfsdfsdfsd');
  58. rightPanel.style.left = oEvent.clientX - disX + splitterBarWidth + 'px';
  59. /*rightPanel.style.width = (containerWidth - parseInt(rightPanel.style.left)) +    'px';*/
  60. rightPanel.style.width = (containerWidth - (oEvent.clientX - disX) - splitterBarWidth) +'px';
  61. console.log("rightPanel width" + (containerWidth - (oEvent.clientX - disX) - splitterBarWidth));
  62. }
  63. document.onmouseup = function (){
  64. document.onmousemove= null;
  65. document.onmouseup = null;
  66. };
  67. return false;
  68. }; 
  69.  
  70. }
  71. </script>
  72.  
  73. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>PDemo</title>
  5.  
  6. </head>
  7. <body>
  8. <div id="test">
  9. <div id="container" style="position:absolute; top:0px;height:535px;width:805px;left:0px; background-color:red;">
  10. <div id="leftPanel" style="position:absolute;top:0px;width:400px;height:535px;left:0px;overflow:hidden;background-color:gray;"></div>
  11. <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;"
  12. ></div>
  13. <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>
  14. </div>
  15. </div>
  16. </body>
  17. <script type="text/javascript">
  18. function fnMouseDown(ev,minLeftWidth,maxLeftWidth,oriLeftWidth, oriRightWidth){
  19. var splitterBar = document.getElementById('splitterBar');
  20. var leftPanel = document.getElementById('leftPanel');
  21. var rightPanel = document.getElementById('rightPanel');
  22. var container = document.getElementById('container');
  23. var minLeftWidths = minLeftWidth;
  24. var maxLeftWidths = maxLeftWidth;
  25. var origianlLeftWidth = oriLeftWidth;
  26. var originalRightWidth = oriRightWidth;
  27.  
  28. var left = splitterBar.offsetLeft;
  29. var oWidth = leftPanel.offsetWidth;
  30. var rightLeft = rightPanel.offsetLeft;
  31. var containerWidth = parseInt(container.style.width);
  32. var leftPanelWidth = parseInt(leftPanel.style.width);
  33. var rightPanelWidth = parseInt(rightPanel.style.width);
  34. var splitterBarWidth = parseInt(splitterBar.style.width);
  35.  
  36. var oEvent = ev || event;
  37. var disX = oEvent.clientX - left;
  38. var disForRightPanel = rightLeft - oEvent.clientX;
  39. document.onmousemove = function (ev){
  40. var oEvent = ev || event
  41.  
  42. var currentleftWidth = oEvent.clientX - disX;
  43.  
  44. if(currentleftWidth > maxLeftWidths || leftPanelWidth > maxLeftWidths){
  45. leftPanel.style.width = origianlLeftWidth + 200 + "px";
  46. splitterBar.style.left = origianlLeftWidth + 200 + "px";
  47. rightPanel.style.width = rightPanelWidth - 200 + "px";
  48.  
  49. } else if(currentleftWidth < minLeftWidths || leftPanelWidth < minLeftWidths) {
  50. leftPanel.style.width = origianlLeftWidth - 200 + "px";
  51. splitterBar.style.left = origianlLeftWidth - 200 + "px";
  52. rightPanel.style.width = originalRightWidth + 200 + "px";
  53. } else {
  54. splitterBar.style.left = oEvent.clientX - disX + 'px';
  55. console.log("splitterBar.style.left is : " + splitterBar.style.left);
  56. leftPanel.style.width = oEvent.clientX - disX + 'px';
  57. //console.log("leftPanel.style.width： " + oEvent.clientX - disX +'sfsdfsdfsd');
  58. rightPanel.style.left = oEvent.clientX - disX + splitterBarWidth + 'px';
  59. /*rightPanel.style.width = (containerWidth - parseInt(rightPanel.style.left)) +    'px';*/
  60. rightPanel.style.width = (containerWidth - (oEvent.clientX - disX) - splitterBarWidth) +'px';
  61. console.log("rightPanel width" + (containerWidth - (oEvent.clientX - disX) - splitterBarWidth));
  62. }
  63. document.onmouseup = function (){
  64. document.onmousemove= null;
  65. document.onmouseup = null;
  66. };
  67. return false;
  68. }; 
  69.  
  70. }
  71. </script>
  72.  
  73. </html>
  1. <html>
  2.     <head>
  3.         <title>Splitter Control</title>
  4.     </head>
  5.     <script src="../package/reactjs/react.js"></script>
  6.     <script src="../package/reactjs/JSXTransformer.js"></script>
  7.     <style type="text/css">
  8.         .container {
  9.             width: 605px;
  10.             height: 300px;
  11.             height: 300px;
  12.             margin: 0 auto 0 auto;
  13.             margin-top: 50px;
  14.             border: solid 1mm yellow;
  15.         }
  16.         .left-panel {
  17.             width: 300px;
  18.             height: 300px;
  19.             float: left;
  20.             background: grey;
  21.         }
  22.         .right-panel {
  23.             width: 300px;
  24.             height: 300px;
  25.             float: right;
  26.             background: green;
  27.         }
  28.  
  29.     </style>
  30.     <body>
  31.         <div id="container" class="container">
  32.             <div id="leftPanel" class="left-panel">Left</div>
  33.             <div id="rightPanel" class="right-panel">Right</div>
  34.         </div>
  35.         <script type="text/jsx">
  36.             var disX = 0;
  37.             var isBegin = false;
  38.             var Splitter = React.createClass({
  39.              getInitialState: function()
  40.              {
  41.                  var left = document.getElementById(this.props.leftPanel);
  42.                  var right = document.getElementById(this.props.rightPanel);
  43.                  left.style.width = "100%";
  44.                  right.style.width = "100%";
  45.                  right.style.height = "100%";
  46.                  return {
  47.                       originalLeftWidth: this.props.originalLeftWidth,
  48.                       originalLeftHeight: this.props.originalLeftHeight,
  49.                       originalSplitterWidth: this.props.originalSplitterWidth,
  50.                       originalSplitterHeight: this.props.originalSplitterHeight,
  51.                       originalRightWidth: this.props.originalRightWidth,
  52.                       originalRightHeight: this.props.originalRightHeight,
  53.                       currentLeftWidth: this.props.originalLeftWidth,
  54.                       currentSplitterLeft: this.props.originalLeftWidth,
  55.                       currentRightWidth: this.props.originalRightWidth,
  56.                       currentRightLeft: this.props.originalLeftWidth + this.props.originalSplitterWidth,
  57.                       leftPanel: left,
  58.                       rightPanel:right,
  59.                       currentSplitterBackgroundColor: 'blue'
  60.                  };
  61.              },
  62.  
  63.              onMouseMove: function(ev){
  64.                  ev.preventDefault();
  65.                  if(isBegin == true)
  66.                  {
  67.                      var currLeftWidth = ev.clientX - disX;
  68.                      if(currLeftWidth > this.props.maxLeftWidth || this.state.currentLeftWidth > this.props.maxLeftWidth)
  69.                      {
  70.                          var cuRightWidth = this.props.originalRightWidth + this.props.originalLeftWidth - this.props.maxLeftWidth;
  71.                          this.setState({
  72.                               currentLeftWidth:this.props.maxLeftWidth,
  73.                               currentSplitterLeft:this.props.maxLeftWidth,
  74.                               currentRightWidth:cuRightWidth,
  75.                               currentSplitterBackgroundColor: 'black'
  76.                          });
  77.                      } else if(currLeftWidth < this.props.minLeftWidth || this.state.currentLeftWidth < this.props.mixLeftWidth) {
  78.                          var cuRightWidth = this.props.originalRightWidth + this.props.originalLeftWidth - this.props.minLeftWidth;
  79.                          this.setState({
  80.                               currentLeftWidth:this.props.minLeftWidth,
  81.                               currentSplitterLeft:this.props.minLeftWidth,
  82.                               currentRightWidth:cuRightWidth,
  83.                               currentSplitterBackgroundColor: 'black'
  84.                          });
  85.                      } else {
  86.                              var cuRightWidth = this.props.originalLeftWidth + this.props.originalRightWidth - currLeftWidth;
  87.                              this.setState({
  88.                                   currentLeftWidth:currLeftWidth,
  89.                                   currentSplitterLeft:currLeftWidth,
  90.                                   currentRightWidth:cuRightWidth,
  91.                                   currentSplitterBackgroundColor: 'black'
  92.                              });
  93.                      }
  94.                  }
  95.              },
  96.  
  97.              onMouseUp: function(){
  98.                  isBegin = false;
  99.                  disX = 0;
  100.                  this.setState({
  101.                       currentSplitterBackgroundColor: 'blue'
  102.                  });
  103.                  document.body.removeEventListener("mouseup", this.onMouseUp);
  104.                  document.body.removeEventListener("mousemove", this.onMouseMove);
  105.              },
  106.  
  107.              onMouseOver: function(){
  108.                  this.setState({
  109.                       currentSplitterBackgroundColor: 'black'
  110.                  });
  111.              },
  112.  
  113.              onMouseOut: function(){
  114.                  this.setState({
  115.                       currentSplitterBackgroundColor: 'blue'
  116.                  });
  117.              },
  118.  
  119.              onMouseDown: function(ev){
  120.                  isBegin = true;
  121.                  var splitter = React.findDOMNode(this.refs.splitter);
  122.                  disX = ev.clientX - splitter.offsetLeft;
  123.                  document.body.addEventListener("mouseup", this.onMouseUp);
  124.                  document.body.addEventListener("mousemove", this.onMouseMove);
  125.              },
  126.  
  127.              componentDidMount: function()
  128.              {
  129.                  this.left= this.refs.left.getDOMNode();
  130.                  this.right = this.refs.right.getDOMNode();
  131.                  this.left.appendChild(this.state.leftPanel);
  132.                  this.right.appendChild(this.state.rightPanel);
  133.              },
  134.  
  135.              render: function()
  136.              {
  137.                  return(
  138.                       <div style={{position:'relative'}}>
  139.                           <div id="message-list" ref="left" style={{ float:'left',
  140.                                width:this.state.currentLeftWidth,
  141.                                height:this.state.originalLeftHeight}}>
  142.                           </div>
  143.                           <div ref="splitter" className='splitter'
  144.                                style={{
  145.                                    left:this.state.currentSplitterLeft,
  146.                                    height:this.state.originalSplitterHeight,
  147.                                    width:this.props.originalSplitterWidth,
  148.                                    backgroundColor: this.state.currentSplitterBackgroundColor,
  149.                                 float: 'left'
  150.                                }}
  151.                                onMouseDown={this.onMouseDown}
  152.                                onMouseOver={this.onMouseOver}
  153.                                onMouseOut={this.onMouseOut}>
  154.                           </div>
  155.                           <div ref="right" id="right-panel" style={{float:'left',
  156.                                overflow: this.props.overflow,
  157.                                width:this.state.currentRightWidth,
  158.                                height:this.state.originalRightHeight}}>
  159.                           </div>
  160.                       </div>
  161.                  );
  162.              }
  163.             });
  164.  
  165.             React.render(
  166.                 <Splitter
  167.                     originalLeftWidth={300}
  168.                     originalLeftHeight={300}
  169.                     originalSplitterWidth={5}
  170.                     originalSplitterHeight={300}
  171.                     originalRightWidth={300}
  172.                     originalRightHeight={300}
  173.                     minLeftWidth={200}
  174.                     maxLeftWidth={400}
  175.                     leftPanel={"leftPanel"}
  176.                     rightPanel={"rightPanel"}
  177.                     overflow ={"auto"} />,
  178.                     document.getElementById("container")
  179.             );
  180.         </script>
  181.     </body>
  182. </html>
  183.  
  184. 来自 网易手机号码邮箱 -- 有手机就有网易手机号码邮箱，了解详情>

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. hdu 3909 数独扩展

    思路:做法与9*9的一样.只不过是变量. #include<set> #include<map> #include<cmath> #include<queue ...

  2. UITabBar实现自定义背景及UITabBarItem自定义图片和字体

    UITabBarItem *firstItem = [[UITabBarItem alloc]initWithTitle:]; //设置字体颜色(后面设置字体状态)(UITextAttributeTe ...

  3. 两种局部刷新UITableView的方法的使用条件

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ //1.取消选 ...

  4. # HTML && CSS 学习笔记

    https://www.zybuluo.com/denglongku/note/532786 1.Div左右居中 <div>1<div> div{ width:300px; h ...

  5. JQuery.Gantt（甘特图）开发

    一.简介 JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库. 二.前端页面 2.1 资源引用 首先需要将下载到的源码中的CSS.IMG.JS等资源放入 ...

  6. ubuntu 删除除了某个文件或文件夹之外的所有文件或者目录

    今天需要将网站根目录下的所有文件全部删除但是还需要保留phpmyadmin这个文件夹,本来是可以一个一个删除的,后来想应该会有 一个命令是可以用一个命令删除除了phpmyadmin之外的所有文件和文件 ...

  7. vs2010工具栏 不显示dx控件

    进入命令提示符 跳转到Dev控件安装目录,如目录D:\Program Files (x86)\DevExpress 2010.1\Components\Toolss下, 然后执行命令:ToolboxC ...

  8. UI4_UIStepper与UIProgressView

    // // ViewController.m // UI4_UIStepper与UIProgressView // // Created by zhangxueming on 15/7/7. // C ...

  9. Js获取标签高度

    能力有限:问个问题,标签相对页面高度,是怎么写? 鼠标的横坐标,X轴: event.clientX; 鼠标的竖坐标,Y轴: event.clientY; 网页可见区域宽:    document.bo ...

  10. javascript笔记——前端实现分页和查询

    //Modal function Modal(obj){ var that = this; that.ref = ""; that.obj = obj; that.init(); ...