编程 Javascript

js 分栏效果实现代码

Posted in Javascript onAugust 29, 2009

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

<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? 
************************************************************************************** 
<!-- 
     <html> 
<head> 
<title>Splitter demo</title> 
<link href="splitter.css" type="text/css" rel="stylesheet" /> 
<script src="splitter.js"></script> 
</head> 
<body onload="Splitter.init({id: 'splitter_Container'});"> 
<div id="splitter_container"> 
<div id="splitter_left_panel"> 
left panel 
<!--you can put any html code here--> 
</div> 
<div id="splitter_bar"></div> 
<div id="splitter_right_panel"> 
right panel 
<!--you can put any html code here--> 
</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="https://3water.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>

js 分栏效果实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS之小练习代码

Oct 12 Javascript

JavaScript 快捷键设置实现代码

Mar 13 Javascript

浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总

Jul 08 Javascript

Javascript简单实现可拖动的div

Oct 22 Javascript

JSON中双引号的轮回使用过程中一定要小心

Mar 05 Javascript

z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)

Nov 18 Javascript

jQuery模拟select实现下拉菜单功能

Jun 20 Javascript

Bootstrap优化站点资源、响应式图片、传送带使用详解3

Oct 14 Javascript

fullPage.js和CSS3实现全屏滚动效果

May 05 Javascript

JS按钮闪烁功能的实现代码

Jul 21 Javascript

深入浅析ES6 Class 中的 super 关键字

Oct 20 Javascript

浅谈vue中组件绑定事件时是否加.native

Nov 09 Javascript

javascript 简练的几个函数

Aug 29 #Javascript

关于IE、Firefox、Opera页面呈现异同写脚本很痛苦

Aug 28 #Javascript

jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera

Aug 28 #Javascript

javascript 遍历验证所有文本框的值

Aug 27 #Javascript

JQuery 浮动导航栏实现代码

Aug 27 #Javascript

jQuery ui1.7 dialog只能弹出一次问题

Aug 27 #Javascript

JSON 客户端和服务器端的格式转换

Aug 27 #Javascript