/*
http://www.rjboy.cn
By sean at 2010.06 - 2011.03
Demo:
$(".container").hScrollPane({
mover:".press", //指定container对象下的哪个元素需要滚动位置 | 必传项;
moverW:function(){return $(".press").width();}(), //传入水平滚动对象的长度值,不传入的话默认直接获取mover的宽度值 | 可选项;
handleMinWidth:300, //指定handle的最小宽度,要固定handle的宽度请在css中设定handle的width属性(如 width:28px!important;),不传入则不设定最小宽度 | 可选项;
showArrow:true, //指定是否显示左右箭头,默认不显示 | 可选项;
dragable:false, //指定是否要支持拖动效果,默认可以拖动 | 可选项;
handleCssAlter:"draghandlealter", //指定拖动鼠标时滚动条的样式,不传入该参数则没有变化效果 | 可选项;
easing:true, //滚动是否需要滑动效果,默认有滑动效果 | 可选项;
mousewheel:{bind:true,moveLength:500} //mousewheel: bind->'true',绑定mousewheel事件; ->'false',不绑定mousewheel事件;moveLength是指定鼠标滚动一次移动的距离,默认值:{bind:true,moveLength:300} | 可选项;
});
*/
(function($){
$.extend(jQuery.easing,{
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
});
$.fn.hScrollPane=function(settings){
settings=$.extend(true,{},$.fn.hScrollPane.defaults,settings);
this.each(function(){
var container=$(this),
mover=container.find(settings.mover),
w=container.width(),
c=settings.moverW || mover.width(),
dragbar=(container.find(".hScrollPane_dragbar").length==0 && c>w ) ? container.append('
').find(".hScrollPane_dragbar") : container.find(".hScrollPane_dragbar"),//避免多次初始化时的重复append;
handle=dragbar.find(".hScrollPane_draghandle");
if(settings.showArrow){
container.append('');
leftArrow=container.find(".hScrollPane_leftarrow");
rightArrow=container.find(".hScrollPane_rightarrow");
dragbar.css({
width:container.width()-leftArrow.outerWidth()*2,
left:leftArrow.outerWidth()
});
leftArrow.unbind();
rightArrow.unbind();
}else{
dragbar.css("width",container.width());
}
mover.stop().css("left","0px");
container.unbind();//避免多次初始化时的事件重复绑定;
handle.unbind();
dragbar.unbind();
handle.stop().css({
width:(w/c)*w >settings.handleMinWidth ? (w/c)*w : settings.handleMinWidth,
left:0
});
if(chandle.offset().left+handle.outerWidth() ? -1 : 1;
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,flag);
});
handle.bind("mousedown",function(e){
var x=e.pageX;
var hx=parseInt(handle.css("left"));
if(settings.handleCssAlter){$(this).addClass(settings.handleCssAlter);}
$(document).bind("mousemove",function(e){
var left=e.pageX-x+hx<0?0:(e.pageX-x+hx>=maxlen?maxlen:e.pageX-x+hx);
handle.stop().css({left:left});
if(settings.easing){
mover.stop().animate({
left:-left/maxlen*(c-w)
},{duration:1500,easing:'easeOutQuint',queue:false});
}else{
mover.css({left:-left/maxlen*(c-w)});
}
return false;
});
$(document).bind("mouseup",function(){
if(settings.handleCssAlter){handle.removeClass(settings.handleCssAlter);}
$(this).unbind("mousemove");
})
return false;
}).click(function(){
return false;
})
if(settings.dragable){
mover.bind("mousedown",function(e){
var x=e.pageX;
$(this).bind("mousemove",function(e){
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,x,e.pageX);
return false;
})
$(document).bind("mouseup",function(){
mover.unbind("mousemove");
})
})
}
if(settings.mousewheel.bind){
container.bind("mousewheel",function(event, delta){
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,delta);
return false;
});
}
if(settings.showArrow){
leftArrow.click(function(){
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,1);
return false;
}).focus(function(){this.blur();});
rightArrow.click(function(){
$.fn.hScrollPane.move(settings,mover,handle,w,c,maxlen,-1);
return false;
}).focus(function(){this.blur();});
}
this.ondragstart=function(){return false;}
this.onselectstart=function(){return false;}
})
}
$.fn.hScrollPane.defaults = {
showArrow:false,
handleMinWidth:0,
dragable:true,
easing:true,
mousewheel:{bind:true,moveLength:300}
};
$.fn.hScrollPane.move=function(settings,mover,handle,w,c,maxlen,x,nx){
if(arguments.length==7){
var left=parseInt(mover.css("left"))+x*settings.mousewheel.moveLength;
}else{
var left=parseInt(mover.css("left"))+((nx-x)/w)*(c-w);
}
left=left.toFixed(0);
left=left>0?0:left