JS Table Scroll View

Trochę nudów, pracy z ios i powstało cos na wzór uitable view w … js. Bez jakiś konkretnych celów:) Czysta zabawa:D Może scrollocwać rolką, scrolem bądź dragować myszką.

Iframe bo mam lenia ^^

No i kod dla zainteresowanych:

	function getCellForRowAtIndex(index){
			return '<li class="cell"><b>Title of cell</b><p>cell for row '+index+' and some cool text</p></li>';
		}
		
		function detailedViewAtIndex(index){
			return '<div> this is a detailed view for cell '+index;
		}
	
		function cellDidSelectAtIndex(index){
		
		}
	
		(function( $ ){
			$.fn.tableView = function(options) {

				var settings = $.extend( {
					'a' : '',
					height: parseInt(this.css('height').split('px')[0]),
					outerHeight: parseInt(this.outerHeight()),
					tagName : 'ul',
					scrollAutoHide : true,
					scrollbarInteractionEnabled : false
				}, options);
				
				var didScroll = false;
				
				this.append('<'+settings.tagName+' style="position:absolute" id="tableViewcontent"></'+settings.tagName+'>');
				$('#tableViewcontent').css('top' ,  '0px')
				
				this.append('<div style="position:absolute" id="tabeViewScroll"></div>')
				
				this.append('<div style="position:absolute" id="tableViewDetailedView"></div>')
	
				
				for(i = 0; i < settings['count']; i++){
					this.find('#tableViewcontent').append(getCellForRowAtIndex(i));
				}
		
				
				
				var scrollRatio = parseInt($('#tableViewcontent').css('height'))/settings['height'];
				var scrollHeight = parseInt(settings['height']/scrollRatio);
				
				settings['scrollHeight'] = scrollHeight;
				$('#tabeViewScroll').css('height' ,  scrollHeight);
				$('#tabeViewScroll').css('right' ,  0);
				$('#tabeViewScroll').css('top' , 0)
		
				var scrollBarVisible;
				if(settings.scrollAutoHide){
					scrollBarVisible = false;
					$('#tabeViewScroll').css('opacity' , 0)
				} else {
					scrollBarVisible = true;
					$('#tabeViewScroll').css('opacity' , 0.75)
				}
				
		
				$('#tableViewcontent div').live('mouseup', function(){
					if(!didScroll){
						$('.tableViewActiveCell').removeClass('tableViewActiveCell')
						$(this).addClass('tableViewActiveCell')
						$('#tableViewcontent').animate({'left' : -200});
						
						
						$('#tableViewDetailedView').html(detailedViewAtIndex(1));
						$('#tableViewDetailedView').animate({'left' : 0});
					}
				
				})
		
				var originTouchPoint = null;
				var scrollTouch = false;
				this.mousedown(function(e){
					$('#tableViewcontent').stop(true, false);
					if(e.srcElement.id == 'tabeViewScroll'){
						scrollTouch = true;
					}
					originTouchPoint = {};
					originTouchPoint['x'] = e.pageX;
					originTouchPoint['y'] = e.pageY;
				})
				
				
				var scrollTimeout = null;
				var scrollbarClickCompens = 0;
				
				$(document).mouseup(function(e){
					originTouchPoint = null;
					scrollTouch = false;
					scrollbarClickCompens = 0;
					if(didScroll){
						didScroll = false;
					}
					/* move to top if first cell is lower that top */
					if(parseInt($('#tableViewcontent').css('top').split('px')[0]) > 0){
						$('#tableViewcontent').animate({'top' : 0}, 200);
						
						$('#tabeViewScroll').animate({'top' : 0, 'height' : settings['scrollHeight']}, 200);
					}
					
					/* move to bottom if last cell is higher than bottom  */
					var maxTopScroll = parseInt($('#tableViewcontent').css('height')) - settings['height']
					maxTopScroll *= -1;
					if(parseInt($('#tableViewcontent').css('top').split('px')[0]) < maxTopScroll){
						$('#tableViewcontent').animate({'top' : maxTopScroll}, 200);
						
		
						$('#tabeViewScroll').animate({'top' : settings['height'] - scrollHeight}, 200);
					}
					
					if(Math.abs(yFactor) > 10){
						var dst = parseInt($('#tableViewcontent').css('top'))+(yFactor * -1);
						//$('#tableViewcontent').animate({'top' : dst}, 200);
					}
					
					yFactor = 0;
					if(settings.scrollAutoHide){
						scrollTimeout = setTimeout(function(){
							$('#tabeViewScroll').animate({opacity : 0}, function(){
								scrollBarVisible = false;
							});
						}, 500)
					}

				})
			
			
				var yFactor = 0;
				
				$(document).mousemove(function(e){
					if(originTouchPoint != null){
						var t ;
						
						didScroll = true;
						
						if(scrollTouch){
							var offset = originTouchPoint['y'] - e.pageY;
							yFactor = originTouchPoint['y'] - e.pageY;
							originTouchPoint['y'] = e.pageY;
							
						
							//offset *= -1;
							offset += parseInt($('#tableViewcontent').css('top').split('px')[0])
						
							if(scrollbarClickCompens == 0){
								scrollbarClickCompens = e.pageY - parseInt($('#tabeViewScroll').css('top').split('px')[0]);
								console.log(scrollbarClickCompens)
							}
						

							
								
							$('#tabeViewScroll').css('top' ,  e.pageY - scrollbarClickCompens);
								
							var scrollTopRatio = parseInt($('#tabeViewScroll').css('top').split('px')[0])/parseInt(settings['outerHeight']);
							var scrollTop = parseInt($('#tableViewcontent').css('height').split('px')[0])*scrollTopRatio;
							console.log('Ratio '+scrollTopRatio)
							$('#tableViewcontent').css('top' ,  + scrollTop*-1)
							
						} else {
							if(scrollTimeout){
								clearTimeout(scrollTimeout);
								scrollTimeout = null;
							}
						
							if(!scrollBarVisible){
								$('#tabeViewScroll').animate({opacity : 0.75},100);
								scrollBarVisible = true;
							
							}
						
							var offset = originTouchPoint['y'] - e.pageY;
							yFactor = originTouchPoint['y'] - e.pageY;
							originTouchPoint['y'] = e.pageY;
							
						
							offset *= -1;
							offset += parseInt($('#tableViewcontent').css('top').split('px')[0])
						
							$('#tableViewcontent').css('top' ,  + offset)
						
							console.log(settings['outerHeight'])
							var scrollTopRatio = parseInt($('#tableViewcontent').css('top'))/(parseInt($('#tableViewcontent').css('height')));
							var scrollTop = parseInt((settings['outerHeight'])*scrollTopRatio);
							scrollTop *= -1;
							if(scrollTop < 0){
								$('#tabeViewScroll').css('height' ,  settings['scrollHeight'] + scrollTop);
							} else if(scrollTop > parseInt($('#tableViewcontent').css('height')) - settings['scrollHeight']){
								$('#tabeViewScroll').css('top' ,  scrollTop);
								$('#tabeViewScroll').css('height' ,  settings['scrollHeight'] + scrollTop);
							} else {
								$('#tabeViewScroll').css('top' ,  scrollTop);
							}
						}
						
						
					}
				});
				
				
				this.mousewheel(function(e, delta){		
						var offset = delta*4
						
						if(!scrollBarVisible){
							$('#tabeViewScroll').animate({opacity : 0.75},100);
							scrollBarVisible = true;
							
						}
						
						//offset *= -1;
						offset += parseInt($('#tableViewcontent').css('top').split('px')[0])
						
						if(offset > 0){
							$('#tableViewcontent').css('top' ,  0)
							return;
						}
						
						$('#tableViewcontent').css('top' ,  + offset)
						
						console.log(settings['outerHeight'])
						var scrollTopRatio = parseInt($('#tableViewcontent').css('top'))/(parseInt($('#tableViewcontent').css('height')));
						var scrollTop = parseInt((settings['outerHeight'])*scrollTopRatio);
						scrollTop *= -1;
					
						if(scrollTop < 0){
							$('#tabeViewScroll').css('height' ,  settings['scrollHeight'] + scrollTop);
						} else if(scrollTop > parseInt($('#tableViewcontent').css('height')) - settings['scrollHeight']){
							$('#tabeViewScroll').css('top' ,  scrollTop);
							$('#tabeViewScroll').css('height' ,  settings['scrollHeight'] + scrollTop);
						} else {
							$('#tabeViewScroll').css('top' ,  scrollTop);
						}
						
						
					
				});
				
				
  			};
		})( jQuery );
		
		
		
		/*  
		
			tagName : ul,div,section etc, the name of the scroll container
		
		*/
		
		$('#tableview').tableView({count : 15, tagName:'ul', scrollAutoHide: false, scrollbarInteractionEnabled : true});

About the author

Logos

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>