`
lzj0470
  • 浏览: 1276905 次
  • 性别: 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）来自动化这个过程。 总之...

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

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

    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...

    CSS工具-CSS工具

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

Magicbox
Global site tag (gtag.js) - Google Analytics