当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js 分栏效果实现代码

Javascript
jQuery开发者都需要知道的5个小技巧
Extjs学习笔记之六 面版
Javascript 中的类和闭包
IE6下JS动态设置图片src地址问题
Extjs学习笔记之七 布局
Extjs学习笔记之八 继承和事件基础
Extjs TriggerField在弹出窗口显示不出问题的解决方法
JavaScript中的集合及效率
利用js获取服务器时间的两个简单方法
在html页面上拖放移动标签
了解jQuery技巧来提高你的代码
JavaScript 页面坐标相关知识整理
Javascript UrlDecode函数代码
JQuery 遮罩层实现(mask)实现代码
jQuery 页面 Mask实现代码
Javascript的构造函数和constructor属性
js或css文件后面跟参数的原因说明
将CKfinder整合进CKEditor3.0的新方法
jQuery UI-Draggable 参数集合
jQuery 行级解析读取XML文件（附源码）

No. « 259 260 261 262 »

技术文章搜索

关键字

Javascript 中的 js 分栏效果实现代码

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 167 ::
收藏到网摘: n/a

原创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.ruanchen.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>