建站技术网专注分享网站建设技术,网站建设教程,真正帮你学会做网站技术,轻松解决网站建设过程中遇到的常见问题,为广大站长服务。 网站地图 | 收藏本站 | 订阅
域名投资,就来找米网,认准网址:www.zhaomi.cc 专业仿站,就到仿站网:www.fangzhan.org
  站内公告: ·帝国cms教程内容已更新,欢迎关注     ·建站技术网采用阿里云服务器,备案已通    
您当前的位置:建站技术网 > cms教程 > 帝国cms教程

使用jquery-ias.min.js插件做帝国cms的下拉无限加载

时间:2019-05-12 11:12:01  来源:网络收集  整理: 建站技术网 www.jzjsw.com     点击:0次

今天在cms大学小编在Github上闲逛,发现了一个名为Infinite AJAX Scroll的开源项目,使用它来通过很简单的程序配置,就可以让帝国cms支持分页Ajax下拉无限加载功能。专程进行了测试,发现非常简单好用,这里分享给大家。

第一步:首先下载jquery-ias.min.js(下载地址)。

第二步:将 jquery-ias.min.js 文件放到网站根目录下的/js/文件夹,也就是路径为 /js/jquery-ias.min.js

第三步:在需要进行无限加载的页面,插入如下配置代码,这是插件运行的必要参数。

折叠JavaScript 代码
  1. <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>  
  2. <script src="/js/jquery-ias.min.js"></script>  
  3. <script>  
  4. var ias = $.ias({  
  5.   container:  "#container",  
  6.   item:       ".scroll",  
  7.   pagination: "#epages",  
  8.   next:       ".next"  
  9. });  
  10. ias.extension(new IASSpinnerExtension());  
  11. ias.extension(new IASNoneLeftExtension({html: '<div class="blank20"></div><div style="text-align:center"><p><em>后面已经没有数据了</em></p></div>'}));  
  12. </script>  

第四步:在需要无限加载的页面所属列表模板中,写入以下代码,这里要注意容器id和容器class类的对应,否则会出错。

折叠PHP 代码
  1. <div id="container">  
  2.             <ul class="scroll">  
  3. [!--empirenews.listtemp--]  
  4. <!--list.var1-->  
  5. [!--empirenews.listtemp--]  
  6.  <span class="blank20"></span>  
  7.             </ul>  
  8. </div>  
  9.             <span class="blank20"></span>  
  10. <div id="epages">  
  11. [!--show.listpage--]  
  12. </div>  

第五步:打开 /e/class/t_functions.php 文件,在第129行(帝国cms7.2UTF8版本),或搜索以下代码

折叠PHP 代码
  1. $nextpage=' <a href="'.$nextpagelink.'">'.$fun_r['nextpage'].'</a>';  

替换为

折叠PHP 代码
  1. $nextpage=' <a href="'.$nextpagelink.'" class="next">'.$fun_r['nextpage'].'</a>';  

到这里就结束了,快试试无限加载的效果吧!

 

另外还有一点需要补充,如果页面上启用了Lazyload懒加载插件,在第二页开始之后的页面图片会造成加载不出来,在配置参数中加入下面的代码即可解决:

折叠JavaScript 代码
  1. ias.on('rendered',function(items){  
  2. $("img.lazy").lazyload({effect:"fadeIn"});//这里是你调用Lazyload的代码  
  3. })  

 

标签:
文章标题:使用jquery-ias.min.js插件做帝国cms的下拉无限加载
文章网址:http://www.jzjsw.com/cmsJiaocheng/diguocms/11232.html
上一篇:帝国cms带有内嵌标签的循环子栏目调用,更利于新手使用
下一篇:帝国cms实现信息关键字与TAGS自动同步更新的方法
来顶一下
返回首页
返回首页
相关文章
    无相关信息
推荐资讯
如何通过SEO优化排名赚钱?SEO赚钱方法
如何通过SEO优化排名赚
seo优化教程:网站seo内容优化
seo优化教程:网站seo
SEO细节:企业SEO如何快速为新站做出效果
SEO细节:企业SEO如何
电商技术将如何发展?2018年有这五个大胆预测
电商技术将如何发展?
最新文章
栏目更新
栏目热门