分页按钮样式:

"景先生毕设|www.jxszl.com

织梦dedecms列表页实现无限加载的教程

2022-10-29 16:28编辑: www.jxszl.com景先生毕设
很多朋友在建站过程中尤其是新闻类以及图片类网站,需要用到列表无限加载,下面就告诉大家如何实现这个功能,而且又不影响列表静态页的生成.


我们需要用到Jquery.load()方法来请求下I.页达到列表页无限加载的效果.下面是具体的代码:
列表页简单的dom结构代码:

 更多精彩就在： 51免费论文网|www.jxszl.com 


  • 列表简单的dom结构



分页按钮样式:
下I.页



JS请求的代码如下:
varcatid=$(".list_next").data("catid");//获取栏目idvarcur_list=$(".list_next").data("list")=="列表样式II"?"列表样式II":".list";//列表样式varnext_no=II;//分页数varpath_arr=window.location.pathname.split("/");varfile=path_arr[path_arr.length-I.];if(file!="index.html"&&file!=""){next_no=parseInt(file.split(".")[0].split("-")[I.])+I.;}$(".list_nexta").click(function(){var_this=$(this);_this.html("正在加载中...");//给定按钮临时加载状态$(".list_load").load("./"+catid+"-"+next_no+".html?now="+newDate().getTime()+""+cur_list+"ul",function(data,status){if(status=="success"){if($(".list_load").html().indexOf("li")<0){_this.html("没有更多内容了");_this.css("background-color","#VIIIVIIIVIII");_this.unbind("click");}else{_this.html("下I.页");$(cur_list+"ul").append($(".list_loadul").html());next_no++;}}else{_this.html("没有更多内容了");_this.css("background-color","#VIIIVIIIVIII");_this.unbind("click");}});});
代码就基本上完成了,这里需要注意I.下,模板里面必须要引入jquery库文件,另外catid和next_no不能为空.大家赶快自己试试吧!


原文链接：http://www.jxszl.com/biancheng/dedecms/75138.html
最新推荐
热门阅读
随机阅读

相关阅读
点击排行
更多推荐....