From bf47cc823a7b4715f526c9a661e27faf106c3970 Mon Sep 17 00:00:00 2001 From: HyeonJe Jun Date: Sat, 10 Nov 2012 03:07:47 +0900 Subject: [PATCH] Add update and destroy function, enhance css. this is the release version! --- min/perfect-scrollbar.min.css | 2 +- min/perfect-scrollbar.min.js | 2 +- src/perfect-scrollbar.css | 53 +++++++++++++++++++++++++++-------- src/perfect-scrollbar.js | 42 +++++++++++++++++++++++---- 4 files changed, 80 insertions(+), 19 deletions(-) diff --git a/min/perfect-scrollbar.min.css b/min/perfect-scrollbar.min.css index db9052e..52703ad 100644 --- a/min/perfect-scrollbar.min.css +++ b/min/perfect-scrollbar.min.css @@ -1 +1 @@ -.ps-container .ps-scrollbar-x{position:absolute;height:10px;bottom:5px;background-color:gray}.ps-container .ps-scrollbar-x:hover{background-color:#000;cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{background-color:#000}.ps-container .ps-scrollbar-y{position:absolute;width:10px;right:5px;background-color:gray}.ps-container .ps-scrollbar-y:hover{background-color:#000;cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{background-color:#000} \ No newline at end of file +.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=90)} \ No newline at end of file diff --git a/min/perfect-scrollbar.min.js b/min/perfect-scrollbar.min.js index 6980760..e6d6d52 100644 --- a/min/perfect-scrollbar.min.js +++ b/min/perfect-scrollbar.min.js @@ -1,3 +1,3 @@ /* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae) * Licensed under the MIT License - */(function(e){e.fn.perfectScrollbar=function(){var t=e(this).addClass("ps-container"),n=e(this).children(),r=e("
").appendTo(t),i=e("
").appendTo(t),s,o,u,a,f,l,c=parseInt(r.css("bottom")),h,p,d=parseInt(i.css("right")),v=function(){var e=parseInt(p*a/o);t.scrollTop(e),r.css({bottom:c-e})},m=function(){var e=parseInt(l*u/s);t.scrollLeft(e),i.css({right:d-e})},g=function(){s=t.width(),o=t.height(),u=n.width(),a=n.height(),so?l=o:l=i,r.css({left:l+t.scrollLeft()})},b=function(e,n){var r=e+n,s=o-h;r<0?p=0:r>s?p=s:p=r,i.css({top:p+t.scrollTop()})},w=function(){var t,n;r.bind("mousedown.perfect-scroll",function(e){n=e.pageX,t=r.position().left,r.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){r.hasClass("in-scrolling")&&(y(t,e.pageX-n),m(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){r.hasClass("in-scrolling")&&r.removeClass("in-scrolling")})},E=function(){var t,n;i.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=i.position().top,i.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){i.hasClass("in-scrolling")&&(b(t,e.pageY-n),v(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")})},S=function(){t.mousewheel(function(e,n,r,i){t.scrollTop(t.scrollTop()-i*10),t.scrollLeft(t.scrollLeft()+r*10),g(),(a>o||u>s)&&e.preventDefault()})};return g(),w(),E(),t.mousewheel&&S(),t}})(jQuery); \ No newline at end of file + */(function(e){e.fn.perfectScrollbar=function(t){if(t==="update"){e(this).data("perfect_scrollbar_update")();return}if(t==="destroy"){e(this).data("perfect_scrollbar_destroy")();return}if(e(this).data("perfect_scrollbar"))return;var n=e(this).addClass("ps-container"),r=e(this).children(),i=e("
").appendTo(n),s=e("
").appendTo(n),o,u,a,f,l,c,h=parseInt(i.css("bottom")),p,d,v=parseInt(s.css("right")),m=function(){var e=parseInt(d*f/u);n.scrollTop(e),i.css({bottom:h-e})},g=function(){var e=parseInt(c*a/o);n.scrollLeft(e),s.css({right:v-e})},y=function(){o=n.width(),u=n.height(),a=r.width(),f=r.height(),os?c=s:c=r,i.css({left:c+n.scrollLeft()})},w=function(e,t){var r=e+t,i=u-p;r<0?d=0:r>i?d=i:d=r,s.css({top:d+n.scrollTop()})},E=function(){var t,n;i.bind("mousedown.perfect-scroll",function(e){n=e.pageX,t=i.position().left,i.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){i.hasClass("in-scrolling")&&(b(t,e.pageX-n),g(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")})},S=function(){var t,n;s.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=s.position().top,s.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){s.hasClass("in-scrolling")&&(w(t,e.pageY-n),m(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){s.hasClass("in-scrolling")&&s.removeClass("in-scrolling")})},x=function(){n.mousewheel(function(e,t,r,i){n.scrollTop(n.scrollTop()-i*10),n.scrollLeft(n.scrollLeft()+r*10),y(),(f>u||a>o)&&e.preventDefault()})},T=function(){i.remove(),s.remove(),n.unbind("mousewheel"),e(window).unbind("mousemove.perfect-scroll"),e(window).unbind("mouseup.perfect-scroll"),n.data("perfect_scrollbar",null),n.data("perfect_scrollbar_update",null),n.data("perfect_scrollbar_destroy",null)},N=function(){y(),E(),S(),n.mousewheel&&x(),n.data("perfect_scrollbar",!0),n.data("perfect_scrollbar_update",y),n.data("perfect_scrollbar_destroy",T)};return N(),n}})(jQuery); \ No newline at end of file diff --git a/src/perfect-scrollbar.css b/src/perfect-scrollbar.css index 4b69c79..bd91fe5 100644 --- a/src/perfect-scrollbar.css +++ b/src/perfect-scrollbar.css @@ -1,31 +1,60 @@ .ps-container .ps-scrollbar-x { - position: absolute; - height: 10px; - bottom: 5px; - background-color: gray; + position: absolute; /* please don't change 'position' */ + bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */ + height: 8px; + background-color: #aaa; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + opacity: 0; + filter: alpha(opacity = 0); + -webkit-transition: opacity.2s linear; + -moz-transition: opacity .2s linear; + transition: opacity .2s linear; +} + +.ps-container:hover .ps-scrollbar-x { + opacity: 0.6; + filter: alpha(opacity = 60); } .ps-container .ps-scrollbar-x:hover { - background-color: black; + opacity: 0.9; + filter: alpha(opacity = 90); cursor:default; } .ps-container .ps-scrollbar-x.in-scrolling { - background-color: black; + opacity: 0.9; + filter: alpha(opacity = 90); } .ps-container .ps-scrollbar-y { - position: absolute; - width: 10px; - right: 5px; - background-color: gray; + position: absolute; /* please don't change 'position' */ + right: 3px; /* there must be 'right' for ps-scrollbar-y */ + width: 8px; + background-color: #aaa; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + opacity: 0; + -webkit-transition: opacity.2s linear; + -moz-transition: opacity .2s linear; + transition: opacity .2s linear; +} + +.ps-container:hover .ps-scrollbar-y { + opacity: 0.6; + filter: alpha(opacity = 60); } .ps-container .ps-scrollbar-y:hover { - background-color: black; + opacity: 0.9; + filter: alpha(opacity = 90); cursor: default; } .ps-container .ps-scrollbar-y.in-scrolling { - background-color: black; + opacity: 0.9; + filter: alpha(opacity = 90); } diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js index 1d41383..e0f0a2c 100644 --- a/src/perfect-scrollbar.js +++ b/src/perfect-scrollbar.js @@ -2,7 +2,21 @@ * Licensed under the MIT License */ ((function($) { - $.fn.perfectScrollbar = function() { + $.fn.perfectScrollbar = function(option) { + if(option === 'update') { + $(this).data('perfect_scrollbar_update')(); + return; + } + else if(option === 'destroy') { + $(this).data('perfect_scrollbar_destroy')(); + return; + } + + if($(this).data('perfect_scrollbar')) { + // if there's already perfect_scrollbar + return; + } + var $this = $(this).addClass('ps-container'), $content = $(this).children(), $scrollbar_x = $("
").appendTo($this), @@ -159,11 +173,29 @@ }); }; + var destroy = function() { + $scrollbar_x.remove(); + $scrollbar_y.remove(); + $this.unbind('mousewheel'); + $(window).unbind('mousemove.perfect-scroll'); + $(window).unbind('mouseup.perfect-scroll'); + $this.data('perfect_scrollbar', null); + $this.data('perfect_scrollbar_update', null); + $this.data('perfect_scrollbar_destroy', null); + }; + + var initialize = function() { + updateBarSizeAndPosition(); + bindMouseScrollXHandler(); + bindMouseScrollYHandler(); + if($this.mousewheel) bindMouseWheelHandler(); + $this.data('perfect_scrollbar', true); + $this.data('perfect_scrollbar_update', updateBarSizeAndPosition); + $this.data('perfect_scrollbar_destroy', destroy); + }; + // initialize - updateBarSizeAndPosition(); - bindMouseScrollXHandler(); - bindMouseScrollYHandler(); - if($this.mousewheel) bindMouseWheelHandler(); + initialize(); return $this; };