很多朋友在建站过程中尤其是新闻类以及图片类网站,需要用到列表无限加载,下面就告诉大家如何实现这个功能,而且又不影响列表静态页的生成。
我们需要用到Jquery.load()方法来请求下一页达到列表页无限加载的效果。下面是具体的代码:
列表页简单的dom结构代码:
<div class="list"> <ul> <li><a href="">列表简单的dom结构</a></li> </ul> </div>
分页按钮样式:
1 |
<!-- data-catid的值为当前栏目 id data-list是当前模版列表特殊样式 --> |
2 |
<div class= "list_next" data-catid= "{dede:field.id/}" data-list= "" > |
3 |
<a href= "javascript:;" >下一页</a> |
5 |
<div class= "list_load" ></div> |
|
JS请求的代码如下:
01 |
<script type= "text/javascript" > |
02 |
var catid = $( ".list_next" ).data( "catid" ); |
03 |
var cur_list = $( ".list_next" ).data( "list" ) == "列表样式2" ? "列表样式2" : ".list" ; |
05 |
var path_arr = window.location.pathname.split( "/" ); |
06 |
var file = path_arr[path_arr.length-1]; |
07 |
if (file != "index.html" && file != "" ){ |
08 |
next_no = parseInt(file.split( "." )[0].split( "-" )[1]) + 1; |
10 |
$( ".list_next a" ).click( function (){ |
12 |
_this.html( "正在加载中..." ); |
13 |
$( ".list_load" ).load( "./" +catid+ "-" +next_no+ ".html?now=" + new Date().getTime()+ " " +cur_list+ " ul" , function (data , status){ |
14 |
if (status == "success" ){ |
15 |
if ($( ".list_load" ).html().indexOf( "li" )<0){ |
16 |
_this.html( "没有更多内容了" ); |
17 |
_this.css( "background-color" , "#888" ); |
18 |
_this.unbind( "click" );} else { |
20 |
$(cur_list+ " ul" ).append($( ".list_load ul" ).html()); |
23 |
_this.html( "没有更多内容了" ); |
24 |
_this.css( "background-color" , "#888" ); |
25 |
_this.unbind( "click" ); |
|
代码就基本上完成了,这里需要注意一下,模板里面必须要引入jquery库文件,另外catid 和next_no不能为空。大家赶快自己试试吧!
相关标签:
转载:
感谢您对孟文鹏个人博客网站平台的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源孟文鹏个人博客”。
http://www.63seo.cn/grbkrj/cxrs/220.html
很赞哦!
(
)