js 分栏效果实现代码
发布时间：2024-05-03 11:10:47
标签：分栏效果
网上我也见到一些分栏效果，也有一个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://www.aspxhome.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>
0
投稿猜你喜欢
- 在JavaScript中我们需要用到trim的地方很多，但是JavaScript又没有独立的trim函数或者方法可以使用，所以我们需要自己写
本文主要介绍了Opencv图片生成视频，分享给大家，具体如下：生成视频import random as rdimport cv2 as cv- 在SQL Server 中，如果给表的一个字段设置了默认值，就会在系统表sysobjects中生成一个默认约束。如果想删除这个设置了默认值的
- 正则表达式的定义在编写处理字符串的程时，经常会遇到在一段文本中查找符合某些规则的字符串的需求，正则表达式就是用于描述这些规则的工具，换句话说
- 寒假里学习了一下Python爬虫，使用最简单的方法扒取需要的天气数据，对，没听错，最简单的方法。甚至没有一个函数封装。。网址：http://
- GitHub : https://github.com/jayknoxqu/id-number-util身份组成方式中华人民共和国国家标准G
- 死锁是指在某组资源中，两个或两个以上的线程在执行过程中，在争夺某一资源时而造成互相等待的现象，若无外力的作用下,它们都将无法推进下去，死时就
- 这里假设你已经申请完微信支付1. 微信后台配置 如图我们先进行测试，所以先把测试授权目录和 测试白名单添加上。测试授权目录是你要
- 搭建MySQL主从后，很多时候不知道从的状态是否ok，有时候出现异常不能及时知道，这里通过shell脚本结合zabbix实现监控并告警一般情
- 列表解析——用来动态地创建列表[expr for iter_var in iterable if cond_expr]例子一：map(lam
- 1. 前言所谓的逃逸分析（Escape analysis）是指由编译器决定内存分配的位置吗不需要程序员指定。函数中申请一个新的对象如果分配在
- 目录socket概念socket基本用法创建tcp套接字创建udp套接字socket内建方法实现端口扫描总结socket概念socket又称
- vant文档：Vant 2 - Mobile UI Components built on Vue实现效果： 代码实现：1.nav
- 本文实例讲述了JS定义函数的几种常用方法。分享给大家供大家参考，具体如下：在 JavaScript 语言里，函数是一种对象，所以可以说函数是
- Python有大量强大又贴心的特性，如果要列个最受欢迎排行榜，那么装饰器绝对会在其中。初识装饰器，会感觉到优雅且神奇，想亲手实现时却总有距离
- 按照下面一步一步来，安 * p就是这么简单。脚本之家下载渗透测试软件Burp Suite Professionalhttps://www.jb
- Mysql查询以某"字符串"开头的查询查询不以某个或者某些字符串为开头的字符串1、使用left()函数select *
- 什么是ASP，它能干什么？ 一、什么是ASP？ 从字面上说，ASP包含三方面含义： 1、Active：ASP使用了Microsoft的Act
- worker pool简介worker pool其实就是线程池thread pool。对于go来说，直接使用的是goroutine而非线程，
- 0x00 前言eval是Python用于执行python表达式的一个内置函数，使用eval，可以很方便的将字符串动态执行。比如下列代码：&g
