1 /** 2 * 模拟滚动条 3 * @constructor 4 * @author putaoshu@126.com 5 * @date 2012-07-13 6 * @param {Object} obj 主对象 7 * @param {Object} options 组件配置 8 * @param {Number} options.top null top 9 10 * @param {Number} options.wrapWidth 500 主体宽度 11 * @param {Number} options.wrapHeight 200 主体高度 12 * @param {Number} options.wrapClass isScrollWrap 主体class 13 * @param {Number} options.scrollWidth 20 滚动条宽度 14 * @param {Number} options.scrollMinHeight 50 滚动条最小高度 15 * @param {Number} options.scrollClass isScroll 滚动条class 16 * @param {Number} options.step 5 滚动条步进值 17 * @param {Number} options.setScrollOnce false 重新设置滚动条高度Tag 18 19 * @example 20 vui.isScroll($('#content')); 21 vui.isScroll($('#content'),{setScrollOnce:true});//重置滚动条 22 */ 23 vui.isScroll = function(obj,options){ 24 options = $.extend({ 25 wrapWidth : 500,//主体宽度 26 wrapHeight : 200,//主体高度 27 wrapClass : 'isScrollWrap',//主体class 28 29 scrollWidth : 20,//滚动条宽度 30 scrollMinHeight : 50,//滚动条最小高度 31 scrollClass : 'isScroll',//滚动条class 32 step :5, //滚动条步进值 33 34 setScrollOnce:false //重新设置滚动条高度Tag 35 },options); 36 37 var o={ 38 init:function(){ 39 //配置信息绑定到obj上 40 obj.data('data',options); 41 42 if (options.setScrollOnce){ 43 options = obj.data('data'); 44 this.setScrollHeight(); 45 this.dragInit(); 46 }else{ 47 this.setInit(); 48 } 49 }, 50 setInit:function(){ 51 this.styleInit(); 52 this.createWrap(); 53 this.createScroll(); 54 this.setScrollHeight(); 55 this.bind(); 56 this.dragInit(); 57 }, 58 bind:function(){ 59 var self = this; 60 var mousewheelEvent = 'mousewheel'; 61 if (vui.browser.firefox){ 62 mousewheelEvent = 'DOMMouseScroll'; 63 } 64 $('.'+options.wrapClass).bind(mousewheelEvent,function(event){ 65 var stepValue; 66 var wheelValue = event.wheelDelta; 67 //to down wheelValue<0 ; to up wheelValue>0 68 if (vui.browser.firefox){ 69 wheelValue = - event.detail; 70 } 71 72 self.step(wheelValue); 73 event.preventDefault(); 74 }); 75 }, 76 //滚动条top --. 主体top 77 setContentTop:function(scrollTopValue){ 78 var H = obj.outerHeight();//主体高度 79 var h1 = options.wrapHeight;//可视区域高度 80 var h2 = this.getElementHeight($('.'+options.scrollClass));//滚动条高度 81 var top = [( H - h1) / (h1-h2)] * scrollTopValue; 82 obj.css({top:-top}); 83 }, 84 //拖拽init 85 dragInit:function(){ 86 var self = this; 87 vui.drag($('.'+options.scrollClass),{ 88 lockX:true, 89 maxTop:0, 90 maxBottom:options.wrapHeight-this.getElementHeight($('.'+options.scrollClass)), 91 drag:self.drag 92 }); 93 }, 94 //拖拽回调 95 drag:function(top){ 96 o.setContentTop(top); 97 }, 98 scrollTopValue:0, 99 //鼠标滑轮滑动 100 step:function(wheelValue){ 101 var H = obj.outerHeight();//主体高度 102 var h1 = options.wrapHeight;//可视区域高度 103 var h2 = this.getElementHeight($('.'+options.scrollClass));//滚动条高度 104 105 var stepNumber = options.step * parseInt( (H-h1) / h1);//整除数 106 var scrollStepValue = ( 1 / stepNumber ) * (h1-h2); 107 108 if (wheelValue<0){ 109 this.scrollTopValue += scrollStepValue; 110 }else{ 111 this.scrollTopValue -= scrollStepValue; 112 } 113 114 if (this.scrollTopValue>(h1-h2) && wheelValue<0){ 115 this.scrollTopValue=(h1-h2); 116 } 117 118 if (this.scrollTopValue<0 && wheelValue>0){ 119 this.scrollTopValue=0; 120 } 121 122 $('.'+options.scrollClass).css({top:this.scrollTopValue}); 123 this.setContentTop(this.scrollTopValue); 124 }, 125 126 setScrollHeight:function(){ 127 var heightTemp = obj.outerHeight() - options.wrapHeight; 128 if (heightTemp<0){ 129 this.hide(); 130 }else{ 131 132 var H = obj.outerHeight();//主体所有高度 133 var h1 = options.wrapHeight;//可视区域高度 134 var h2 = parseInt ( ( h1 * h1 ) / H ); //滚动条高度 135 if (h2<options.scrollMinHeight){ 136 h2 = options.scrollMinHeight; 137 } 138 $('.'+options.scrollClass).css({height:h2}); 139 this.show(); 140 } 141 }, 142 143 getElementHeight:function(element){ 144 var currentHeight = element.css('height'); 145 var height = parseFloat(currentHeight.slice(0,currentHeight.length-2)); 146 return height; 147 }, 148 149 createWrap:function(){ 150 var div = $(document.createElement('div')); 151 div.addClass(options.wrapClass); 152 obj.after(div); 153 div.append(obj); 154 var $this = this; 155 var isScrollWrapCss = { 156 position:'relative', 157 overflow:'hidden', 158 width:options.wrapWidth, 159 height:options.wrapHeight, 160 border:'2px solid blue' 161 }; 162 div.css(isScrollWrapCss); 163 }, 164 createScroll:function(){ 165 var div = $(document.createElement('div')); 166 div.addClass(options.scrollClass); 167 obj.after(div); 168 169 var isScrollCss = { 170 position:'absolute', 171 right:0, 172 top:0, 173 width:options.scrollWidth, 174 backgroundColor:'#333' 175 }; 176 div.css(isScrollCss); 177 }, 178 styleInit:function(){ 179 obj.css({position:'absolute',left:0,top:0}) 180 }, 181 182 show:function(){ 183 $('.'+options.scrollClass).show(); 184 }, 185 hide:function(){ 186 $('.'+options.scrollClass).hide(); 187 } 188 } 189 190 o.init(); 191 } 192 193