`

jQuery实现spliter效果

jquery 
阅读更多
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);
  • ddd.rar (36.8 KB)
  • 下载次数: 275
分享到：
| 很不错的表格特效
评论
1 楼 coosummer 2016-05-18  
可以使用jquery ui 的resizable实现，非常简单，效果参见：
http://www.jscssshare.com/#/sample/ZmW5wbFc
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery splitter 动态分割区域布局，支持动态拖拉，功能强大，简单易用

    jQuery Splitter插件就是这样一个强大的工具，它允许用户通过拖动分割线来实现布局的灵活调整，与Visual Studio 2010中的拖拉区域条功能类似，极大地提高了用户体验。 jQuery Splitter是基于JavaScript库jQuery的一...

    spliter

    标题中的“spliter”可能指的是一个分隔符或者数据拆分工具，这在编程和数据分析领域是常见的概念。描述中的“spliter”同样简洁，没有提供太多具体信息，但我们可以推测它可能涉及到字符串处理、文件分割或数据流的...

    layout-spliter：拆分标签（水平，垂直），您可以根据需要进行布局！

    总之，Layout Spliter 是一款基于jQuery的布局工具，它提供水平和垂直分割功能，支持响应式设计，能帮助开发者创建出灵活、用户友好的界面。通过学习和使用这个工具，开发者可以提升其在网页布局设计和用户体验方面...

    pdf9spliter合并软件

    pdf9spliter合并软件，解决PDF文档不能打印的问题。

    pb9 spliter(分割条).rar

    4. **用户体验**：为了提供良好的用户体验，开发者需要考虑分割条的视觉效果，如线条样式、颜色以及鼠标悬停和按下时的反馈。 5. **多面板支持**：分割条不仅可以用于两个面板之间，也可以用于三个或更多面板的分割...

    vb编写的自定义Spliter控件

    总之，VB编写的自定义Spliter控件是实现动态布局调整的一种实用工具，它通过捕获和处理鼠标事件来实现分隔条的拖动功能。对于希望扩展VB应用程序功能或学习控件编程的开发者来说，研究这样的源代码是非常有价值的。

    PyPI 官网下载 | sentence-spliter-1.1.7.tar.gz

    《PyPI官网下载 | sentence-spliter-1.1.7.tar.gz——Python库解析与应用》 在Python的世界里，PyPI（Python Package Index）是开发者和用户获取开源Python库的重要平台。"sentence-spliter-1.1.7.tar.gz"是一个从...

    Spliter工具

    用于自动供分段（分解字符信息 主要用于测试通信信息信息的分解

    PDF拆分合并,pdf9spliter.zip

    本压缩包文件“pdf9spliter.zip”正是为了解决这类问题而设计的，它包含了"PDF9Splitter"这款软件，可以高效地实现PDF的拆分与合并功能。 首先，我们来看"PDF9Splitter"的主要特点。PDF9Splitter是一款用户友好的...

    Python库 | sentence-spliter-1.2.3.tar.gz

    资源分类：Python库 所属语言：Python 资源全名：sentence-spliter-1.2.3.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059

    spliter.rar

    本示例中的"QSplitter例子，Splitter按钮分割两个窗体"旨在演示如何使用QSplitter将两个独立的窗体进行分割，实现交互式布局控制。 QSplitter类是Qt Widgets库的一部分，它允许用户通过拖动分隔条来调整子窗口小...

    数据抓取数据抓取数据抓取数据抓取

    "Spliter"在这里可能指的是数据分隔器或者数据拆分工具，它在数据抓取过程中起到整理和处理数据的作用。 数据抓取通常涉及到以下几个关键步骤： 1. **目标识别**：确定要抓取的网页或网站。这可能基于特定的网址、...

    pdf_spliter

    作为一个开源工具，我们可以查看其源码来了解其实现机制。PDF文档是由一系列的对象组成，包括页面、字体、图像等。拆分PDF的过程实际上就是遍历PDF对象，提取出每个页面，并将其封装成新的PDF文件。这个过程中，通常...

    JS+CSS實現Spliter功能

    在网页设计中，分割器（Spliter）是一种常见的布局组件，它允许用户通过拖动来动态调整两个或多个内容区域的大小。在这个项目中，我们将使用JavaScript和CSS来实现一个自定义的Splitter功能。这个功能可以让用户自由...

    java_spliter.zip_java split_java spliter_分割文件

    这个名为"java_spliter.zip"的压缩包包含了一个名为"Splitter.java"的源代码文件，它是实现文件分割功能的Java程序。这个小程序对理解Java的输入/输出（I/O）操作具有很好的学习价值。 首先，让我们深入了解一下...

    字符串分割类StringSpliter.zip

    StringSpliter string_spliter(str, ","); int n; const char *sec; for (n=0, sec = string_spliter.Next(); sec; sec=string_spliter.Next(), n ) {  printf("-: %s\n", n, sec); }

    MP3Spliter1.0.1

    《MP3Spliter1.0.1：轻松切割与管理MP3音乐的工具》 MP3Spliter1.0.1是一款专为MP3音乐爱好者设计的切割软件，被...无论是对音乐有特殊需求的个人还是音频制作初学者，都能从中受益，轻松实现MP3音乐的定制和管理。

    音频剪切精灵MyMp3Spliterv2.1.3英文官方版

    《音频剪切精灵MyMp3Spliter v2.1.3：打造个性化音频与铃声的专业工具》 在数字化时代，音频编辑已经成为许多音乐爱好者和专业人士的必备技能。音频剪切精灵MyMp3Spliter v2.1.3是一款专为用户设计的媒体工具，它以...

    pdf9spliter

    PDFSPLITER是一款专为处理PDF文档而设计的工具，主要功能是将大型或包含多个页面的PDF文件拆分成多个较小、更易于管理和使用的独立文件。在日常工作中，我们经常会遇到一些PDF文档，它们可能由于内容过多或者组织...

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