js分栏效果

最新推荐文章于 2025-11-08 12:41:35 发布

原创最新推荐文章于 2025-11-08 12:41:35 发布 · 1w 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#border #div #function #float #null

Javascript 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种使用纯JS实现的分栏效果，解决了拖动分割线时遇到iframe元素导致鼠标失灵的问题，并提供了详细的代码示例及使用说明。

原创JS分栏效果，面向对象，使用简单。

网上我也见到一些分栏效果，也有一个jquery的插件jquery.splitter.js, 但是他们基本都没有解决一个问题：如果页面上有iframe, 当拖动分割线经过iframe的时候，鼠标不听使唤了,我曾经开过帖子讨论过这个问题。本例采用一个小技巧解决了这个问题，使拖动流畅。

注：如果你想拷贝代码，不要直接拷贝下面的代码，下面的代码拷贝的时候被csdn蹂躏了。点击运行代码然后察看源代码

运行代码

<html> <head> <title>Splitter demo</title> <style> #splitter_container{ width: 100%; height: 100%; border: solid #eee 1px; margin: 0px; padding: 0px; overflow: hidden; } #splitter_left_panel{ width: 300px; height: 100%; float: left; border: solid blue 0px; } #splitter_bar{ width: 8px; height: 100%; float: left; background-color: #ccc; cursor: col-resize; } #splitter_right_panel{ height: 100%; padding-top: 10px; } </style> <script> /* * splitter.js * author: sunxing007 * http://blog.csdn.net/sunxing007 * date: 08/26/2009 ************************************************************************************** The css script below is needed for the html page when using splitter.js, please save it as splitter.css, and modify it carefully. ************************************************************************************** #splitter_container{ width: 100%; height: 100%; border: solid #eee 1px; margin: 0px; padding: 0px; overflow: hidden; } #splitter_left_panel{ width: 300px; height: 100%; float: left; border: solid blue 0px; } #splitter_bar{ width: 8px; height: 100%; float: left; background-color: #ccc; cursor: col-resize; } #splitter_right_panel{ height: 100%; padding-top: 10px; } ************************************************************************************** How to use this splitter? **************************************************************************************  </div> <div id="splitter_bar"></div> <div id="splitter_right_panel"> right panel  </div> </div> </body> </html> --> ************************************************************************************** */ /** this is a helper function used to get the dom element specified by id **/ function $(id){return document.getElementById(id);} /** the main functionality of splitter **/ var Splitter = { container: null, lPanel: null, rPanel: null, bar: null, movingBar: null, //左面板初始，最大，最小宽度 lPanelInitWidth: '250px', lPanelMaxWidth: '500px', lPanelMinWidth: '200px', rPanelInitWidth: '800px', rPanelMaxWidth: '999px', rPanelMinWidth: '500px', //分隔线被拖动的时候的颜色 barActiveColor: '#0080ff', //左面的面板是否设置最大/最小宽度 isWidthLimit: true, init: function(config){ if(!config.id){ alert('Can not initialize splitter.'); return; } if($(config.id)){ this.container = $(config.id); if(!($('splitter_left_panel')&&$('splitter_right_panel')&&$('splitter_bar'))){ alert('Can not initialize splitter.'); return; } else{ this.lPanel = $('splitter_left_panel'); this.rPanel = $('splitter_right_panel'); this.bar = $('splitter_bar'); } } if(config.lPanelMaxWidth){ this.lPanelMaxWidth = config.lPanelMaxWidth; } if(config.lPanelMinWidth){ this.lPanelMinWidth = config.lPanelMinWidth; } if(config.rPanelMaxWidth){ this.rPanelMaxWidth = config.rPanelMaxWidth; } if(config.rPanelMinWidth){ this.rPanelMinWidth = config.rPanelMinWidth; } if(config.lPanelInitWidth){ this.lPanelInitWidth = config.lPanelInitWidth; } if(config.rPanelInitWidth){ this.rPanelInitWidth = config.rPanelInitWidth; } if(config.barActiveColor){ this.barActiveColor = config.barActiveColor; } //alert(typeof(config.isWidthLimit)); if(config.isWidthLimit!=undefined){ this.isWidthLimit = config.isWidthLimit; } var mask = document.createElement('div'); document.body.appendChild(mask); with(mask.style){ position = 'absolute'; left = '0px'; top = '0px'; zIndex = 900; width = '100%'; height = '100%'; display = 'none'; backgroundColor = '#ccc'; filter = 'alpha(opacity=10)'; } //background-color:red;filter:alpha(opacity=60) Splitter.mask = mask; this.bar.onmousedown = Splitter.start; }, start: function(){ var o = Splitter.container; o.lastMouseX = event.x; Splitter.mask.style.display = ''; var movingBar = document.createElement('div'); Splitter.container.appendChild(movingBar); with(movingBar.style){ position = 'absolute'; left = Splitter.bar.offsetLeft + 'px'; top = '0px'; width = Splitter.bar.currentStyle.width; height = '100%'; backgroundColor = Splitter.barActiveColor; zIndex = 999; cursor = 'col-resize'; } movingBar.dx = 0; Splitter.movingBar = movingBar; document.onmousemove = Splitter.move; document.onmouseup = Splitter.end; }, move: function(){ var o = Splitter.container; var dx = event.x - o.lastMouseX; Splitter.movingBar.dx = Splitter.movingBar.dx + dx; var left = parseInt(Splitter.movingBar.style.left) + dx; Splitter.movingBar.style.left = left; o.lastMouseX = event.x; }, end: function(){ document.onmousemove = null; document.onmouseup = null; Splitter.mask.style.display = 'none'; var dx = Splitter.movingBar.dx; Splitter.container.removeChild(Splitter.movingBar); var w = parseInt(Splitter.lPanel.currentStyle.width) + dx; if(Splitter.isWidthLimit){ var _width = (w > parseInt(Splitter.lPanelMaxWidth) ? Splitter.lPanelMaxWidth : (w < parseInt(Splitter.lPanelMinWidth) ? Splitter.lPanelMinWidth : w)); w = _width; } Splitter.lPanel.style.width = w; } }; </script> </head> <body onload="Splitter.init({id: 'splitter_Container', isWidthLimit: true});"> <div id="splitter_container"> <div id="splitter_left_panel"> <iframe frameborder="0" height="100%" id="" width="100%" src="http://www.google.com"></iframe> </div> <div id="splitter_bar"></div> <div id="splitter_right_panel"> 在此处右键察看源代码并把其中的js保存为splitter.js<br> splitter.js使用方法：<br> 页面上需要有一个div作为容器(id=splitter_container): 可拖动效果就在这个容器里面进行<br> 容器里面需要有3个div,分别代表左栏(id=splitter_left_panel)，分割线(id=splitter_bar), 右栏(id=splitter_right_panel)<br> 这4个div需要用css修饰一下<br> <code> #splitter_container{ width: 100%; height: 100%; border: solid #eee 1px; margin: 0px; padding: 0px; overflow: hidden; }<br> #splitter_left_panel{ width: 300px; height: 100%; float: left; border: solid blue 0px; }<br> #splitter_bar{ width: 8px; height: 100%; float: left; background-color: #ccc; cursor: col-resize; }<br> #splitter_right_panel{ height: 100%; padding-top: 10px; } </code> <br><br> 给body加上onload事件处理函数,以触发splitter: <br> onload="Splitter.init({id: 'splitter_Container', isWidthLimit: true});" <br> Splitter的init方法传入一个json对象作为配置参数,其中容器id是必需的.<br> 还可以配置更多的参数, 比如:<br> isWidthLimit: 可选值true, false, 设置左面板是否限制宽度;<br> lPanelMaxWidth: 左面板最大宽度,比如: 500px;<br> lPanelMinWidth: 左面板最小宽度,比如: 100px;<br> barActiveColor: 分割线拖动的时候的颜色: 比如'red', '#0080ff';<br> 更多web开发相关的内容就在<a href='http://blog.csdn.net/sunxing007'>blog.csdn.net/sunxing007</a> </div> </div> </body> </html>

转载请注明来自：http://blog.csdn.net/sunxing007