讯睿cms如何利用 jq插件 实现ajax瀑布流加载

资源来源网络,如需授权,请更换源码,模块仅供学习,如需商用请购买正版授权,本栏目不提供技术服务,积分不够请签到!如何签到?系统升级暂停签到,恢复关注公告!
如遇下载链接蓝奏网盘打不开lanzous替换成lanzoux尝试! 广告

ajax瀑布流加载方案 有两种 一种是官方提供的

另外一种便是通过前端 jq插件 实现的 下面说方法

列表的调用案例

<ul class=”listbox”> class=”listbox” 对应下面的 container: “.listbox”,
{list action=module module=news page=1 pagesize=10 urlrule=index.php?page=[page]}
<li class=”item”>{$t.title}</li> class=”item” 对应下面的 item: “.item”,
{/list}
</ul>
<div class=”pagelist”> {$pages} </div> class=”pagelist” 对应下面的 pagination: “.pagelist”,

下载 jq插件 infinite-scroll (在下面附件下载) 代码放在list循环之后

<script src=”/static/default/ajax/js/jquery-ias.min.js” type=”text/javascript”></script>
<!– 在此之前必须先加载jq库以及infinite-scroll插件 路径别错了 没有加载jq就用不了 –>
<script type=”text/javascript”>
var ias = $.ias({
container: “.listbox”, //包含所有文章的元素
item: “.item”, //对应的每篇文章元素
pagination: “.pagelist”, //对应下面的分页元素
next: ” .pagelist a[rel^=next] “, //下一页元素
//分页里面 下一页带了 rel=”next” 所以这个是获取.pagelist类下面的rel元素next的
});
ias.extension(new IASSpinnerExtension({
src: “/static/default/ajax/img/load.gif”,
html: ‘<p style=”text-align: center;”><img src=”{src}”/></p>’
}));
ias.extension(new IASTriggerExtension({
text: ‘点击加载更多’, //此选项为需要点击时的文字
html: ‘<p style=”text-align: center; cursor: pointer;”><a>{text}</a></p>’,
offset: 2, //设置此项后,到 offset:2 页之后需要手动点击才能加载,offset:!1 则一直为无限加载
}));
ias.extension(new IASNoneLeftExtension({
text: ‘已经加载完成!’, // 加载完成时的提示
html: ‘<p style=”text-align: center; cursor: pointer;”><a>{text}</a></p>’,
}));
</script>

至此已经完成

代码下载也可以自行百度下载

ajax下载地址

©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!
风格酷模板网 » 讯睿cms如何利用 jq插件 实现ajax瀑布流加载
NOTICE:【咨询风格酷】客服QQ:1131734965
NOTICE:【咨询风格酷】客服微信:wwwxmamnet
NOTICE:【风格酷模板网②群】QQ群:288678775
☉免责声明:本站所有模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服,我们核实后会立即删除。
☉如果源码网盘地址失效!或有其他问题,请点我报错,谢谢合作!
☉人民币与积分汇率为1比10,即1元=10积分.有任何疑问请联系客服
☉如有其他问题,请加网站客服QQ(1131734965)进行交流。
☉本站提供的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
☉源码、模板等资源会随着技术、环境的升级而存在部分问题,还请慎重选择。

发表评论

风格酷模板网www.xmam.net分享优质网站模板

立即查看 了解详情