很多朋友在建站过程中尤其是新闻类以及图片类网站,需要用到列表无限加载,下面就告诉大家如何实现这个功能,而且又不影响列表静态页的生成。
我们需要用到Jquery.load()方法来请求下一页达到列表页无限加载的效果。下面是具体的代码:
列表页简单的dom结构代码:
| | 3 | <li><a href="">列表简单的dom结构</a></li> | 
 | 
分页按钮样式:| | 1 | <!-- data-catid的值为当前栏目iddata-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,我们尽快处理。