文档章节

jQuery实现spliter效果

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 1292
阅读 22
收藏 0
点赞 0
评论 0
jQuery实现spliter效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery splitter demo</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="splitter.js"></script>
<style type="text/css" media="all">

html, body{
height:100%;width:100%; 
margin:0;padding:0;overflow: hidden;
}
#header{background:#c4dcfb;height:5%;}/* Header */

#splitterContainer {/* Main splitter element */
height:95%;width:100%;margin:0;padding:0;
}
#leftPane{
float:left;width:15%;height:100%;border-top:solid 1px #9cbdff;
background:#c4dcfb;
overflow: auto;
}
#rightPane{	/*Contains toolbar and horizontal splitter*/
float:right;width:85%;height:100%;
background:#f4f4f4;
}
#rightSplitterContainer{/*horizontal splitter*/	
width:100%;
background:#FFFFFF;border-top:solid 1px #9cbdff;
} 

#rightTopPane{/*Top nested in horizontal splitter */
width:100%;height:50%;overflow:auto;background:#f4f4f4;
}
#rightBottomPane{/*Bottom nested in horizontal splitter */
background:#f4f4f4;width:100%;overflow:auto;
}


/* Splitbar styles; these are the default class names and required styles */
.splitbarV {
float:left;width:6px;height:100%;
line-height:0px;font-size:0px;
border-left:solid 1px #9cbdff;border-right:solid 1px #9cbdff;
background:#cbe1fb url(img/panev.gif) 0% 50%;
}
.splitbarH {
height:6px;text-align:left;line-height:0px;font-size:0px;
border-top:solid 1px #9cbdff;border-bottom:solid 1px #9cbdff;
background:#cbe1fb url(img/paneh.gif) 50% 0%;
}

.splitbuttonV{
margin-top:-41px;margin-left:-4px;top:50%;position:relative;
height:83px;width:10px;
background:transparent url(img/panevc.gif) 10px 50%;
}
.splitbuttonV.invert{
margin-left:0px;background:transparent url(img/panevc.gif) 0px 50%;
}
.splitbuttonH{
margin-left:-41px;left:50%;position:relative;
height:10px !important;width:83px;
background:transparent url(img/panehc.gif) 50% 0px;
}
.splitbuttonH.invert{
margin-top:-4px;background:transparent url(img/panehc.gif) 50% -10px;
}
.splitbarV.working,.splitbarH.working,.splitbuttonV.working,.splitbuttonH.working{
 -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;
}
</style>
<script type="text/javascript">

$(document).ready(function() {
$("#splitterContainer").splitter({minAsize:100,maxAsize:300,splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),slave:$("#rightSplitterContainer"),closeableto:0});
$("#rightSplitterContainer").splitter({splitHorizontal:true,A:$('#rightTopPane'),B:$('#rightBottomPane'),closeableto:100});
});
</script>
</head>

<body>

<div id="header">
jQuery splitter v1.1 demo. Download&nbsp; <a href="splitter.zip">here</a></div>
<div id="splitterContainer">
	<div id="leftPane">
		<p>This pane limited to a range of 100 to 300 pixels wide with the minAsize / maxAsize 
		properties of the plugin..</p>
		<p>&nbsp;</p>

	</div>
	<!-- #leftPane -->
	<div id="rightPane">
	<div style="height:5%;background:#bac8dc">Toolbar?</div>
		<div id="rightSplitterContainer" style="height:95%">
			<div id="rightTopPane">
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
				<p>testing</p>
			</div>
			<!-- #rightTopPane-->
			<div id="rightBottomPane">
				<div>
					<p>some content</p>
					<p>some content</p>
					<p>some content</p>
					<p>some content</p>
					<p>some content</p>
					<p>some content</p>
				</div>
			</div>
			<!-- #rightBottomPane--></div>
		<!-- #rightSplitterContainer--></div>
	<!-- #rightPane --></div>
<!-- #splitterContainer -->

</body>

</html>


splitter.js文件
/*
* jQuery.splitter.js - animated splitter plugin
*
* version 1.0 (2010/01/02) 
* 
* Dual licensed under the MIT and GPL licenses: 
*   http://www.opensource.org/licenses/mit-license.php 
*   http://www.gnu.org/licenses/gpl.html 
*/

/**
* jQuery.splitter() plugin implements a two-pane resizable animated window, using existing DIV elements for layout.
* For more details and demo visit: http://krikus.com/js/splitter
*
* @example $("#splitterContainer").splitter({splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),closeableto:0});
* @desc Create a vertical splitter with toggle button
*
* @example $("#splitterContainer").splitter({minAsize:100,maxAsize:300,splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),slave:$("#rightSplitterContainer"),closeableto:0});
* @desc Create a vertical splitter with toggle button, with minimum and maximum width for plane A and bind resize event to the slave element
*
* @name splitter
* @type jQuery
* @param Object options Options for the splitter ( required)
* @cat Plugins/Splitter
* @return jQuery
* @author Kristaps Kukurs (contact@krikus.com)
*/

 

;(function($){

	$.fn.splitter = function(args){
		args = args || {};
		return this.each(function() {
			var _ghost;		//splitbar  ghosted element 
			var splitPos;	 // current splitting position
			var _splitPos;	 // saved splitting position
			var _initPos;	//initial mouse position
			var _ismovingNow=false;	// animaton state flag

			// Default opts
			var direction = (args.splitHorizontal? 'h':'v');
			var opts = $.extend({
			minAsize:0, //minimum width/height in PX of the first (A) div.
			maxAsize:0, //maximum width/height  in PX of the first (A) div.
			minBsize:0, //minimum width/height in PX of the second (B) div.
			maxBsize:0, //maximum width/height  in PX of the second (B) div.
			ghostClass: 'working',// class name for _ghosted splitter and hovered button
			invertClass: 'invert',//class name for invert splitter button
			animSpeed: 250 //animation speed in ms
			},{
			v:{ // Vertical
			moving:"left",sizing: "width", eventPos: "pageX",splitbarClass:"splitbarV",buttonClass: "splitbuttonV", cursor: "e-resize"
			},
			h: { // Horizontal 
			moving:"top",sizing: "height", eventPos: "pageY",splitbarClass:"splitbarH",buttonClass: "splitbuttonH",  cursor: "n-resize"
			}
			}[direction], args);

			//setup elements
			var splitter = $(this);
			var mychilds =splitter.children(); //$(">*", splitter[0]);
			var A = args.A;	// left/top frame
			var B = args.B;// right/bottom frame
			var slave=args.slave;//optional, elemt forced to receive resize event
//Create splitbar 
var C=$('<div><span></span></div>');
A.after(C);
C.attr({"class": opts.splitbarClass,unselectable:"on"}).css({"cursor":opts.cursor,"user-select": "none", "-webkit-user-select": "none","-khtml-user-select": "none", "-moz-user-select": "none"})
.bind("mousedown", startDrag);
 		
if(opts.closeableto!=undefined){
var Bt=$('<div></div>').css("cursor",'pointer');
C.append(Bt);
Bt.attr({"class": opts.buttonClass, unselectable: "on"});
Bt.hover(function(){$(this).addClass(opts.ghostClass);},function(){$(this).removeClass(opts.ghostClass);});
Bt.mousedown(function(e){if(e.target != this)return;Bt.toggleClass(opts.invertClass).hide();splitTo((splitPos==opts.closeableto)?_splitPos:opts.closeableto,true);return false;});
}		
//reset size to default.			
var perc=(((C.position()[opts.moving]-splitter.offset()[opts.moving])/splitter[opts.sizing]())*100).toFixed(1);
splitTo(perc,false,true); 
// resize  event handlers;
splitter.bind("resize",function(e, size){if(e.target!=this)return;splitTo(splitPos,false,true);});
$(window).bind("resize",function(){splitTo(splitPos,false,true);});

//C.onmousedown=startDrag
			function startDrag(e) {
			if(e.target != this)return;
		 _ghost = _ghost || C.clone(false).insertAfter(A);
				splitter._initPos=C.position();
				splitter._initPos[opts.moving]-=C[opts.sizing]();
_ghost.addClass(opts.ghostClass).css('position','absolute').css('z-index','250').css("-webkit-user-select", "none").width(C.width()).height(C.height()).css(opts.moving,splitter._initPos[opts.moving]);
mychilds.css("-webkit-user-select", "none");	// Safari selects A/B text on a move
A._posSplit = e[opts.eventPos];

$(document).bind("mousemove", performDrag).bind("mouseup", endDrag);
			}
//document.onmousemove=performDrag
			function performDrag(e) {
			if (!_ghost||!A) return;
				var incr = e[opts.eventPos]-A._posSplit;
				_ghost.css(opts.moving, splitter._initPos[opts.moving]+incr);
			}
//C.onmouseup=endDrag			
			function endDrag(e){
				var p=_ghost.position();
				_ghost.remove(); _ghost = null;	
				mychilds.css("-webkit-user-select", "text");// let Safari select text again
				$(document).unbind("mousemove", performDrag).unbind("mouseup", endDrag);
				var perc=(((p[opts.moving]-splitter.offset()[opts.moving])/splitter[opts.sizing]())*100).toFixed(1);		 
				splitTo(perc,(splitter._initPos[opts.moving]>p[opts.moving]),false); 
				splitter._initPos=0;
			}
//Perform actual splitting and animate it;					
	function splitTo(perc,reversedorder,fast) {
if(_ismovingNow||perc==undefined)return;//generally MSIE problem
_ismovingNow=true;
if(splitPos&&splitPos>10&&splitPos<90)//do not save accidental events
		_splitPos=splitPos;
splitPos=perc;

var barsize=C[opts.sizing]()+(2*parseInt(C.css('border-'+opts.moving+'-width')));//+ border. cehap&dirty
var splitsize=splitter[opts.sizing]();
if(opts.closeableto!=perc){
var percpx=Math.max(parseInt((splitsize/100)*perc),opts.minAsize);
if(opts.maxAsize)percpx=Math.min(percpx,opts.maxAsize);
}else{
var percpx=parseInt((splitsize/100)*perc,0);
}
if(opts.maxBsize){
if((splitsize-percpx)>opts.maxBsize)
percpx=splitsize-opts.maxBsize;
}
if(opts.minBsize){
if((splitsize-percpx)<opts.minBsize)
percpx=splitsize-opts.minBsize;
}
var sizeA=Math.max(0,(percpx-barsize));
var sizeB=Math.max(0,(splitsize-percpx));
splitsize=(splitsize-barsize);

//A.attr('title','- '+sizeA);  B.attr('title','- '+sizeB);
 if(fast){
					A.show().css(opts.sizing,sizeA+'px');
					B.show().css(opts.sizing,sizeB+'px');
					Bt.show();
					if (!$.browser.msie ){
					mychilds.trigger("resize");if(slave)slave.trigger("resize");
					}
				_ismovingNow=false;	
				return true;
				}				
	if(reversedorder){//reduces flickering if total percentage becomes more  than 100 (possible while animating)
					var anob={};
					anob[opts.sizing]=sizeA+'px';
					A.show().animate(anob,opts.animSpeed,function(){Bt.fadeIn('fast');if($(this)[opts.sizing]()<2){this.style.display='none';B.stop(true,true);B[opts.sizing](splitsize+'px');}});
					var anob2={};
					anob2[opts.sizing]=sizeB+'px';
					B.show().animate(anob2,opts.animSpeed,function(){Bt.fadeIn('fast');if($(this)[opts.sizing]()<2){this.style.display='none';A.stop(true,true);A[opts.sizing](splitsize+'px')}});
	}else{
					var anob={};
					anob[opts.sizing]=sizeB+'px';
					B.show().animate(anob,opts.animSpeed,function(){Bt.fadeIn('fast');if($(this)[opts.sizing]()<2){this.style.display='none';A.stop(true,true);A[opts.sizing](splitsize+'px')}});
					var anob={};
					anob[opts.sizing]=sizeA+'px';
					A.show().animate(anob,opts.animSpeed,function(){Bt.fadeIn('fast');if($(this)[opts.sizing]()<2){this.style.display='none';B.stop(true,true);B[opts.sizing](splitsize+'px');}});					
}	
//trigger resize evt
splitter.queue(function(){  
setTimeout(function(){  
splitter.dequeue();
_ismovingNow=false;
mychilds.trigger("resize");if(slave)slave.trigger("resize");		
}, opts.animSpeed+5);  
});
 
 }//end splitTo()
			
});//end each
	};//end splitter

})(jQuery);

本文转载自:http://lgscofield.iteye.com/blog/1637686

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 105
码字总数 63036
作品 0
南京
架构师
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 前天 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒 ⋅ 05/08 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaWeb04-HTML篇笔记(二)

1.1 使用JQuery完成定时弹出广告:1.1.1 需求: 之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果: 1.1.2 分析1.1.2.1 技术分析: 【JQuery的概述】 【JS对象和JQ对象的转...

我是小谷粒 ⋅ 05/08 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 10分钟前 ⋅ 0

482. License Key Formatting - LeetCode

Question 482. License Key Formatting Solution 思路:字符串转化为char数组,从后遍历,如果是大写字母就转化为小写字母,如果是-就忽略,如果遍历了k个字符(排除-)就追加一个-。 Java实现...

yysue ⋅ 28分钟前 ⋅ 0

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 53分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 59分钟前 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 今天 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 今天 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 今天 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 今天 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 今天 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部