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>
Javascript 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
js实现导航跟随效果
Nov 17 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php解析xml方法实例详解
2015/05/12 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python单链表实现代码实例
2013/11/21 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
python pandas模块基础学习详解
2019/07/03 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
作弊检讨书1000字
2014/02/01 职场文书
关于环保的演讲稿
2014/05/10 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
初中政教处工作总结
2015/08/12 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS