首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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
SHARP(1) 乐信(1) BCL3000(2) H-501(1) PL550(1) ICF-SW07(1) RP2100(1) ICF-SW7600(1) 低放电路(1) PL450(1)
You might like
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
详解php中的implements 使用
2017/06/13 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现
2015/03/05 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
js实现漫天星星效果
2017/01/19 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
用Python实现随机森林算法的示例
2017/08/24 Python
python中sys.argv函数精简概括
2018/07/08 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
GE设备配件：GE Appliance Parts（家电零件、配件和滤水器）
2018/11/28 全球购物
为您的家、后院、车库等在线购物：Spreetail
2019/06/17 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
linux面试题参考答案（1）
2016/01/22 面试题
工厂厂长岗位职责
2013/11/08 职场文书
财会自我鉴定范文
2013/12/27 职场文书
魅力教师事迹材料
2014/01/10 职场文书
篝火晚会主持词
2014/03/25 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
法人代表证明书格式
2014/10/01 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
vue封装数字翻牌器
2022/04/20 Vue.js