onestopweb 阅读(382) 评论(0)

demo.html

<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>+++++++++++++++</p></li>

 

scrollpagination.js

(function( $ ){		 
 $.fn.scrollPagination = function(options) {
		var opts = $.extend($.fn.scrollPagination.defaults, options);  
		var target = opts.scrollTarget;
		if (target == null){
			target = obj; 
	 	}
		opts.scrollTarget = target;
		return this.each(function() {
		  $.fn.scrollPagination.init($(this), opts);
		});
  };
  $.fn.stopScrollPagination = function(){
	  return this.each(function() {
	 	$(this).attr('scrollPagination', 'disabled');
	  });
  };
  $.fn.scrollPagination.loadContent = function(obj, opts){
	 var target = opts.scrollTarget;
	 var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
	 if (mayLoadContent){
		 if (opts.beforeLoad != null){
			opts.beforeLoad(); 
		 }
		 $(obj).children().attr('rel', 'loaded');
		 $.ajax({
			  type: 'POST',
			  url: opts.contentPage,
			  data: opts.contentData,
			  success: function(data){
				$(obj).append(data); 
				var objectsRendered = $(obj).children('[rel!=loaded]');
				
				if (opts.afterLoad != null){
					opts.afterLoad(objectsRendered);	
				}
			  },
			  dataType: 'html'
		 });
	 }
  };
  
  $.fn.scrollPagination.init = function(obj, opts){
	 var target = opts.scrollTarget;
	 $(obj).attr('scrollPagination', 'enabled');
	 $(target).scroll(function(event){
		if ($(obj).attr('scrollPagination') == 'enabled'){
	 		$.fn.scrollPagination.loadContent(obj, opts);		
		}
		else {
			event.stopPropagation();	
		}
	 });
	 $.fn.scrollPagination.loadContent(obj, opts);
 };
	
 $.fn.scrollPagination.defaults = {
      	 'contentPage' : null,
     	 'contentData' : {},
		 'beforeLoad': null,
		 'afterLoad': null	,
		 'scrollTarget': null,
		 'heightOffset': 0		  
 };	
})( jQuery );

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/scrollpagination.js"></script>
<script type="text/javascript">
$(function(){
	$('#content').scrollPagination({
		'contentPage': 'demo.html', //你要搜索结果的页面
		'contentData': {},//你可以通过 children().size() 知道哪里是分页
		//谁该怎么滚动?在这个例子中,完整的窗口
		'scrollTarget': $(window),
		//在页面到达结束之前,从多少像素开始加载?
		'heightOffset': 10,
		//前负荷,一些功能,可能显示一个加载DIV
		'beforeLoad': function(){
			$('#loading').fadeIn();	
		},
		'afterLoad': function(elementsLoaded){ 
			//加载后,一些功能的动画结果和隐藏预载的div
			$('#loading').fadeOut();
			var i = 0;
			$(elementsLoaded).fadeInWithDelay();
			//如果超过100结果加载停止分页(仅用于测试)
			if ($('#content').children().size() > 100){
				$('#nomoreresults').fadeIn();
				$('#content').stopScrollPagination();
			}
		}
	});
	//元件中的延迟元件的褪色代码
	$.fn.fadeInWithDelay = function(){
		var delay = 0;
		return this.each(function(){
			$(this).delay(delay).animate({opacity:1}, 200);
			delay += 100;
		});
	};

});
</script>
</head>
<body>
<div id="demo">
    <div style="height:2000px;"></div>
    <ul id="content" style=" margin:0 auto; width:800px; color:#f60; background-color:eee;">
    	<li><p>内容开始</p></li>
    </ul>
    <div class="loading" id="loading">加载中</div>
    <div class="loading" id="nomoreresults">结束了</div>
</div>
</body>
</html>

 

效果图:

 

 

  • 大小: 57.8 KB