很多朋友在建站过程中尤其是新闻类以及图片类网站,需要用到列表无限加载,下面就告诉大家如何实现这个功能,而且又不影响列表静态页的生成。
我们需要用到Jquery.load()方法来请求下一页达到列表页无限加载的效果。下面是具体的代码:
列表页简单的dom结构代码:
3 | <li><a href= "" >列表简单的dom结构</a></li> |
|
分页按钮样式:1 | <!-- data-catid的值为当前栏目 id data-list是当前模版列表特殊样式 --> |
2 | <div class= "list_next" data-catid= "{dede:field.id/}" data-list= "" > |
3 | <a href= "javascript:;" >下一页</a></div> |
4 | <div class= "list_load" ></div> |
|
JS请求的代码如下:01 | <script type = "text/javascript" > |
02 | var catid = $( ".list_next" ).data( "catid" ); //获取栏目 id |
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 != "" ){ next_no = parseInt( file . split ( "." )[0]. split ( "-" )[1]) + 1; } |
08 |
$( ".list_next a" ).click( function (){ |
10 | _this.html( "正在加载中..." ); //给定按钮临时加载状态 |
11 |
$( ".list_load" ).load( "./" +catid+ "-" +next_no+ ".html?now=" +new Date().getTime()+ " " +cur_list+ " ul" , function (data , status){ |
12 | if (status == "success" ){ |
13 | if ($( ".list_load" ).html().indexOf( "li" )<0){ |
15 | _this.css( "background-color" , "#888" ); |
16 | _this.unbind( "click" );} else { |
18 | $(cur_list+ " ul" ).append($( ".list_load ul" ).html()); |
22 | _this.css( "background-color" , "#888" ); |
23 |
_this.unbind( "click" ); } }); }); |
|
代码就基本上完成了,这里需要注意一下,模板里面必须要引入jquery库文件,另外catid 和next_no不能为空。大家赶快自己试试吧!
郑重声明:
本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
我们不承担任何技术及版权问题,且不对任何资源负法律责任。
如无法下载,联系站长索要。
如有侵犯您的版权,请给我们来信:cainiaovip8@qq.com,我们尽快处理。