`
lzj0470
  • 浏览: 1273838 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

纯js 分栏

    博客分类:
  • js
 
阅读更多
<html>
 <head>
  <title>纯JS 分栏</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <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>
	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(event){
			var o = Splitter.container;
			event = event || window.event;
			o.lastMouseX = event.clientX;
			if(document.all){
				Splitter.mask.style.display = '';
			}else{
				// ff nothing;
			}
			var movingBar = document.createElement('div');
			Splitter.container.appendChild(movingBar);
			with(movingBar.style){
				position = 'absolute';
				left = Splitter.bar.offsetLeft + 'px';
				top = '0px';
				if(document.all){
					width = Splitter.bar.currentStyle.width;
				}
				else{
					width = window.getComputedStyle(Splitter.bar,null).getPropertyValue('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(event){
			var o = Splitter.container;
			event = event || window.event;
			var dx = event.clientX - 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.clientX;
		},
		end: function(event){
			event = event || window.event;
			document.onmousemove = null;
			document.onmouseup = null;
			Splitter.mask.style.display = 'none';
			var dx = Splitter.movingBar.dx;
			Splitter.container.removeChild(Splitter.movingBar);
			if(document.all){
				width = Splitter.lPanel.currentStyle.width;
			}
			else{
				width = window.getComputedStyle(Splitter.lPanel,null).getPropertyValue('width');
			}
			var w = parseInt(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">
		asdf
		</div>
		<div id="splitter_bar"></div>
		<div id="splitter_right_panel">
		asdfasfada
		</div>
	</div>
 </body>
</html>
分享到:
评论

相关推荐

    纯js实现的分栏效果

    原创JS分栏效果,面向对象, 使用简单。网上我也见到一些分栏效果,也有一个jquery的插件jquery.splitter.js, 但是他们基本都没有解决一个问题:如果页面上有iframe, 当拖动分割线经过iframe的时候,鼠标不听使唤了...

    用纯JS实现iFrame框架分栏显示效果

    用纯JS实现iFrame框架分栏显示效果

    html5响应式左右分栏个人主页模板

    压缩包内的“Zp_demo.demohuo.top_47”可能是示例文件或模板的主文件,包含了HTML、CSS和可能的JavaScript代码。为了实现这个模板,开发者可能使用了Bootstrap框架,这是一个流行的响应式前端框架,提供了预设的CSS...

    CSS3图片画廊效果

    9. **多列布局**:通过`column-count`和`column-gap`等属性,可以将内容分栏显示,适用于创建瀑布流式的图片展示。 10. **背景图像和背景裁剪(Background-image & background-size)**:可以设置背景图像并控制其...

    纯css3实现工单回复流程垂直时间轴特效源码.zip

    【描述】"纯css3实现工单回复流程垂直时间轴特效源码.zip"的描述简单明了,表明这个源码是完全基于CSS3的,不依赖任何JavaScript库或框架。CSS3是层叠样式表的最新版本,它引入了许多强大的新特性,如选择器增强、...

    ToastUIEditor支持左右栏预览和wysiwyg模式的Markdown编辑器

    Markdown是一种轻量级的标记语言,它允许用户使用易读易写的纯文本格式编写文档,然后转换成结构化的HTML(超文本标记语言)文档。Markdown的流行在于其简洁的语法和良好的可读性,使得无论是初学者还是专业开发者都...

    markdown生成目录/侧边栏目录

    对于更复杂的侧边栏需求,可能需要结合JavaScript库,如jQuery或Vue.js,以及CSS来动态生成和管理侧边栏。同时,你也可以利用GitHub Pages、GitBook或其他静态站点生成器(如Jekyll、Hugo)来自动化这个过程。 总之...

    java版多用户商城源码-360mall:java使用servlet实现360商城,Javausingservlettoachieve360m

    分栏推荐 搜索 显示关键词搜到的产品 能通过产品进入详情页 详情页 显示商品详情 多图画廊展示 购物车 立即购买功能 购物车 显示加入购物车产品信息 登录注册 实现登录注册功能 后台管理 后台首页 商品管理 用户管理...

    html实例,选项卡,flash+xml,DIV+css

    实现HTML选项卡可以使用纯HTML和JavaScript,或者利用像jQuery这样的JavaScript库来简化代码和增强用户体验。选项卡通常由一组互斥的容器(如`&lt;div&gt;`)组成,每个容器对应一个内容面板,并通过CSS控制显示和隐藏。 ...

    markedit:节点中的Markdown编辑器

    3. **前端框架**:尽管`markedit`是迷你项目,但为了实现更高效的UI更新和事件处理,可能采用了前端框架(如Vue.js或React.js)。这些框架简化了DOM操作,提高了性能,使得代码更加模块化和可维护。 4. **NodeJS...

    HTML写的新海诚电影简介.zip

    在CSS的帮助下,可以将多个DIV组合成复杂的网页布局,如网格系统、分栏布局等。在这个新海诚电影简介网站中,我们可能看到多个DIV被用来组织电影海报、简介文本和其它内容区块。 Dreamweaver是Adobe公司的一款集成...

    CSS工具-CSS工具

    - 在不使用JavaScript的情况下实现动态效果,提高网站性能。 - **技术要点**: - 使用CSS伪类`:hover`实现鼠标悬停时的样式变化。 - 图片切片技术,将不同状态下的按钮图像分割成多个部分。 #### 三、圆角盒子...

Global site tag (gtag.js) - Google Analytics