js 分栏效果实现代码

160 阅读 0 评论 106 点赞

我是靠谱客的博主义气睫毛，最近开发中收集的这篇文章主要介绍js 分栏效果实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

网上我也见到一些分栏效果，也有一个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="http://www.uoften.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>