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);
1520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
