- 浏览: 400174 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
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 9327对于session过期跳转的问题,很简单,就是一个过滤器,然 ... -
Query代码封装成一个jQuery插件
2013-06-03 23:53 0如果你希望将你的jQuery代码封装成一个jQuery插件, ... -
jQuery Autocomplete Plugin Demo
2012-09-06 23:31 1652jQuery Autocomplete Plugin Demo ... -
简洁jQuery滑动门插件
2012-08-17 03:13 1829滑动门,就是传说中的多tab显示 <!DOCTYPE ...
相关推荐
spliter
动态分割页面布局,支持拖拉分割线,功能类似于vs2010中的拖拉区域条
pdf9spliter合并软件,解决PDF文档不能打印的问题。
用于自动供分段(分解字符信息 主要用于测试通信信息信息的分解
PDF拆分合并软件,pdf9spliter.zip
资源分类:Python库 所属语言:Python 资源全名:sentence-spliter-1.2.3.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
资源来自pypi官网。 资源全名:sentence-spliter-1.1.7.tar.gz
JS+CSS實現Spliter功能 效果參考http://blog.csdn.net/losedguest/article/details/79494418
vb编写的自定义控件,包含源代码,用于放在连个容器中间上下或者左右拖动。
QSplitter例子,Splitter按钮分割两个窗体
NULL 博文链接:https://yanguz123.iteye.com/blog/2426936
pb 界面分割条 spliter powerbuild
界面分割条,可以自由拖动,用起来非常方面,共享了大家瞧瞧
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); }
PDFSPLITER是一款PDF拆分软件,能够有效的修改一些禁止修改的PDF文档
布局拼写 拆分标签(水平,垂直),可以根据需要进行布局! 可以水平或垂直分割容器,可以进行控制大小,想要某种的布局自己来分割!(> _ <)! 响应式布局
java写的一个分割文件的小程序,对于学习java的I/O有帮助。
音乐剪切软件(MP3Spliter)完美破解版,想要做铃声的同学可以看一看,顺便试一试。
音频剪切精灵(My Mp3 Spliter) 顾名思义,帮助用户裁剪一段MP3音频中自己需要的部分,用来制作素材或者铃声。 可以保持音频原有的属性(不改变音频质量)