Welcome to Delicate template
Header
Just another WordPress site
Header

使用jquery-ias.min.js结合帝国做无限下拉加载

3月 6th, 2014 | Posted by 无 名 in html | jQuery | js

jquery-ias.min.js是一款无限下拉加载的jquery插件。
它的配置参数如下:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="/js/jquery-ias.min.js"></script>
<script>
var ias = $.ias({
  container:  "#container",
  item:       ".scroll",
  pagination: "#epages",
  next:       ".next"
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({html: '<div class="blank20"></div><div style="text-align:center"><p><em>后面已经没有数据了</em></p></div>'}));
</script>

使用它需要特别注意的是,当有容器悬浮时,必须要清除浮动。否则在页面一打开就会加载,一拖动滚动条就会加载。

帝国cms代码如下:

<div id="container">
            <ul class="scroll">
[!--empirenews.listtemp--]
<!--list.var1-->
<!--list.var2-->
<!--list.var3-->
<!--list.var4-->
<!--list.var5-->
[!--empirenews.listtemp--]
 <span class="blank20"></span>
            </ul>
</div>
            <span class="blank20"></span>
<div id="epages">
[!--show.listpage--]
</div>

在帝国的e/class里面把分页函数里面的下一页链接加上class=”next”即可。
下载jquery-ias.min
官方网站:http://infiniteajaxscroll.com/download.html
示例:http://www.hncmec.com/e/action/ListInfo/?classid=97

You can follow any responses to this entry through the RSS 2.0 Both comments and pings are currently closed.