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