jquery实现页面滚动到最下方自动按分页的形式加载内容效果

标签： jquery 页面 分页 | 发表时间：2013-02-01 23:53 | 作者：
出处：http://www.iteye.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
  <head>
   <title>jQuery scrollExtend demo</title>
   <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="js/jquery.scrollExtend.js"></script>
   <style type="text/css">
    div {
		margin-left: auto;
		margin-right: auto;
	}
	div.scroll_body {
		width: 500px;
		border: 1px solid #CCCCCC;
		text-align: center;
	}
	div.list_item {
		height: 200px;
		margin-bottom: 5px;
		width: 90%;
		border: 1px solid #999999;
	}
	div.more_content {
		height: 100px;
		width: 500px;		
		border: 1px solid blue;
	}
	div.scrollExtend-loading {
		height: 20px;
		background-image:url('images/loading-bars.gif');
		background-position: center center;
		background-repeat: no-repeat;		
	}
   </style>

   <script type="text/javascript">

	jQuery(document).ready(
		function() {
			jQuery('.scroll_body').scrollExtend(			//此处的 scroll_body 是滚动的元素，就是在这个区域滚动会触发事件来加载新的内容
				{	
					'target': 'div#scroll_items',			//这个是目标应该添加到的窗口是哪个，此处为 div的ID为scroll_items的div,新加的内容会追加到此元素内部的最后面
					'url': 'get_content.html',				//此处为需要调用的内容，可以为api接口，直接调用，然后那个页面可以分别用分页的方式显示数据
					'newElementClass': 'list_item more_content'	//此处为新元素的class样式，此处为 list_item 和 more_content , 新加的元素是带一个div的
				}
			);
		}
	);

   </script>

  </head>
  <body>
  <div class="scroll_body">
     <div id="scroll_items">
        <div class="list_item">
	        [ List Item 2 ]
     	</div>
		        <div class="list_item">
	        [ List Item 2 ]
     	</div>        <div class="list_item">
	        [ List Item 2 ]
     	</div> 

     </div>
  </div>
    <div style="clear:both;"></div>
  </body>
</html>

 

new content! <br />

 

上传了压缩包，里面有注释，内容很简单，希望能帮助朋友提高更多的效率





已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery 页面 分页] 推荐：

jquery实现页面滚动到最下方自动按分页的形式加载内容效果

- - ITeye博客
//此处的 scroll_body 是滚动的元素，就是在这个区域滚动会触发事件来加载新的内容. //这个是目标应该添加到的窗口是哪个，此处为 div的ID为scroll_items的div,新加的内容会追加到此元素内部的最后面. //此处为需要调用的内容，可以为api接口，直接调用，然后那个页面可以分别用分页的方式显示数据.

jquery+json实现数据列表分页

- - CSDN博客Web前端推荐文章
该实例中，新闻数据列表未使用表格显示. 下面将所有源码附上，其中用到jquery插件.