- 浏览: 403725 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
qiuqinjun:
你好,项目的文献能否打包学习下呢
java定时任务管理实现 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
使用jQuery Autocomplete(自动完成)插件 -
CommonAccount:
我的showModalDialog() 传对象参数,在子窗口用 ...
JS中showModalDialog (模态窗口)详细使用 -
wyfn18:
very good
使用jQuery Autocomplete(自动完成)插件 -
jiangqingtian:
xiexie
使用jQuery Autocomplete(自动完成)插件
jQuery实现spliter效果
splitter.js文件
<!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 <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> </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
http://www.jscssshare.com/#/sample/ZmW5wbFc
发表评论
-
Ajax Session Timeout处理
2014-07-01 09:57 9416对于session过期跳转的问题,很简单,就是一个过滤器,然 ... -
Query代码封装成一个jQuery插件
2013-06-03 23:53 0如果你希望将你的jQuery代码封装成一个jQuery插件, ... -
jQuery Autocomplete Plugin Demo
2012-09-06 23:31 1690jQuery Autocomplete Plugin Demo ... -
简洁jQuery滑动门插件
2012-08-17 03:13 1875滑动门,就是传说中的多tab显示 <!DOCTYPE ...
相关推荐
jQuery Splitter插件就是这样一个强大的工具,它允许用户通过拖动分割线来实现布局的灵活调整,与Visual Studio 2010中的拖拉区域条功能类似,极大地提高了用户体验。 jQuery Splitter是基于JavaScript库jQuery的一...
标题中的“spliter”可能指的是一个分隔符或者数据拆分工具,这在编程和数据分析领域是常见的概念。描述中的“spliter”同样简洁,没有提供太多具体信息,但我们可以推测它可能涉及到字符串处理、文件分割或数据流的...
总之,Layout Spliter 是一款基于jQuery的布局工具,它提供水平和垂直分割功能,支持响应式设计,能帮助开发者创建出灵活、用户友好的界面。通过学习和使用这个工具,开发者可以提升其在网页布局设计和用户体验方面...
pdf9spliter合并软件,解决PDF文档不能打印的问题。
4. **用户体验**:为了提供良好的用户体验,开发者需要考虑分割条的视觉效果,如线条样式、颜色以及鼠标悬停和按下时的反馈。 5. **多面板支持**:分割条不仅可以用于两个面板之间,也可以用于三个或更多面板的分割...
总之,VB编写的自定义Spliter控件是实现动态布局调整的一种实用工具,它通过捕获和处理鼠标事件来实现分隔条的拖动功能。对于希望扩展VB应用程序功能或学习控件编程的开发者来说,研究这样的源代码是非常有价值的。
《PyPI官网下载 | sentence-spliter-1.1.7.tar.gz——Python库解析与应用》 在Python的世界里,PyPI(Python Package Index)是开发者和用户获取开源Python库的重要平台。"sentence-spliter-1.1.7.tar.gz"是一个从...
用于自动供分段(分解字符信息 主要用于测试通信信息信息的分解
本压缩包文件“pdf9spliter.zip”正是为了解决这类问题而设计的,它包含了"PDF9Splitter"这款软件,可以高效地实现PDF的拆分与合并功能。 首先,我们来看"PDF9Splitter"的主要特点。PDF9Splitter是一款用户友好的...
资源分类:Python库 所属语言:Python 资源全名:sentence-spliter-1.2.3.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
本示例中的"QSplitter例子,Splitter按钮分割两个窗体"旨在演示如何使用QSplitter将两个独立的窗体进行分割,实现交互式布局控制。 QSplitter类是Qt Widgets库的一部分,它允许用户通过拖动分隔条来调整子窗口小...
"Spliter"在这里可能指的是数据分隔器或者数据拆分工具,它在数据抓取过程中起到整理和处理数据的作用。 数据抓取通常涉及到以下几个关键步骤: 1. **目标识别**:确定要抓取的网页或网站。这可能基于特定的网址、...
作为一个开源工具,我们可以查看其源码来了解其实现机制。PDF文档是由一系列的对象组成,包括页面、字体、图像等。拆分PDF的过程实际上就是遍历PDF对象,提取出每个页面,并将其封装成新的PDF文件。这个过程中,通常...
在网页设计中,分割器(Spliter)是一种常见的布局组件,它允许用户通过拖动来动态调整两个或多个内容区域的大小。在这个项目中,我们将使用JavaScript和CSS来实现一个自定义的Splitter功能。这个功能可以让用户自由...
这个名为"java_spliter.zip"的压缩包包含了一个名为"Splitter.java"的源代码文件,它是实现文件分割功能的Java程序。这个小程序对理解Java的输入/输出(I/O)操作具有很好的学习价值。 首先,让我们深入了解一下...
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:轻松切割与管理MP3音乐的工具》 MP3Spliter1.0.1是一款专为MP3音乐爱好者设计的切割软件,被...无论是对音乐有特殊需求的个人还是音频制作初学者,都能从中受益,轻松实现MP3音乐的定制和管理。
《音频剪切精灵MyMp3Spliter v2.1.3:打造个性化音频与铃声的专业工具》 在数字化时代,音频编辑已经成为许多音乐爱好者和专业人士的必备技能。音频剪切精灵MyMp3Spliter v2.1.3是一款专为用户设计的媒体工具,它以...
PDFSPLITER是一款专为处理PDF文档而设计的工具,主要功能是将大型或包含多个页面的PDF文件拆分成多个较小、更易于管理和使用的独立文件。在日常工作中,我们经常会遇到一些PDF文档,它们可能由于内容过多或者组织...