jScrollbar.jquery.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /************************************************************************
  2. *************************************************************************
  3. @Name : jScrollbar - jQuery Plugin
  4. @Revison : 1.6
  5. @Date : 02/02/2012
  6. @Author: ALPIXEL - http://www.myjqueryplugins.com - http://www.alpixel.fr
  7. @License : Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
  8. **************************************************************************
  9. *************************************************************************/
  10. (function($) {
  11. $.fn.jScrollbar= function(op) {
  12. var defaults = {
  13. scrollStep : 10,
  14. allowMouseWheel : true,
  15. showOnHover : false,
  16. position : 'right',
  17. marginPos : 15
  18. };
  19. if(this.length>0)
  20. return this.each(function() {
  21. /*
  22. // Vars
  23. */
  24. var
  25. $this = $(this),
  26. opts = $.extend(defaults, op),
  27. js_mask = $this.find('.jScrollbar_mask'),
  28. js_drag = $this.find('.jScrollbar_draggable a.draggable'),
  29. js_Parentdrag = $this.find('.jScrollbar_draggable'),
  30. diff = parseInt(js_mask.innerHeight()) - parseInt($this.height());
  31. /** if mask container is heighter than the main container **/
  32. if(diff > 0)
  33. {
  34. ApplyCSS();
  35. if(opts.showOnHover) {
  36. js_Parentdrag.hide();
  37. $this.hover(function(){
  38. js_Parentdrag.stop(true,true).fadeIn();
  39. },function(){
  40. js_Parentdrag.stop(true,true).fadeOut();
  41. });
  42. }
  43. else {
  44. js_Parentdrag.stop(true,true).show();
  45. }
  46. var pxDraggable = parseInt(js_Parentdrag.height()) - parseInt(js_drag.height());;
  47. var pxUpWhenScrollMove = opts.scrollStep;
  48. var pxUpWhenMaskMove = pxUpWhenScrollMove * (diff/pxDraggable);
  49. js_drag
  50. .click(function(e){e.preventDefault();})
  51. .draggable({
  52. axis:'y',
  53. containment: js_Parentdrag,
  54. scroll: false,
  55. drag: function(event, ui){
  56. js_mask.css('top','-'+(ui.position.top * (diff/pxDraggable))+'px');
  57. }
  58. });
  59. /** if mousewheel allowed **/
  60. if(opts.allowMouseWheel)
  61. $this.mousewheel(function(objEvent, intDelta) {
  62. // mousewheel up (first if) and mousewheel down (second if)
  63. if (intDelta > 0 && parseInt(js_mask.css('top')) < 0){
  64. js_drag.stop(true, true).animate({top:'-='+pxUpWhenScrollMove+'px'}, 100);
  65. js_mask.stop(true, true).animate({top:'+='+pxUpWhenMaskMove+'px'},100,function(){
  66. RelativeTop = parseInt(js_mask.css('top'));
  67. if(RelativeTop > 0 ) {
  68. js_drag.animate({top:'0px'},150);
  69. js_mask.css({top:0});
  70. }
  71. });
  72. }
  73. else if (intDelta < 00 && parseInt(js_mask.css('top')) > -diff) {
  74. js_drag.stop(true, true).animate({top:'+='+pxUpWhenScrollMove+'px'}, 100);
  75. js_mask.stop(true, true).animate({top:'-='+pxUpWhenMaskMove+'px'},100,function(){
  76. RelativeTop = parseInt(js_mask.css('top'));
  77. if(RelativeTop < -diff)
  78. {
  79. js_mask.css({top:-diff});
  80. js_drag.animate({top:pxDraggable},150);
  81. }
  82. });
  83. }
  84. });
  85. }
  86. function ApplyCSS() {
  87. switch (opts.position) {
  88. case 'right' :
  89. js_mask.css({'float':'left'});
  90. js_Parentdrag.css({marginLeft:opts.marginPos});
  91. break;
  92. case 'left' :
  93. js_mask.css({'float':'right'});
  94. js_Parentdrag.css({marginRight:opts.marginPos});
  95. break;
  96. default :
  97. js_mask.css({'float':'left'});
  98. js_Parentdrag.css({marginLeft:opts.marginPos});
  99. }
  100. };
  101. });
  102. }
  103. })(jQuery);