f
jQuery:Ajax分页加载简单使用前奏
jQuery:Ajax分页加载简单使用前奏
二呆 6年前 (2018-08-04) jquery专题  #ajax# 
浏览:5214

已经有好久没发布教程类的文章了,以前也只不过是copy百度来的教程做一个记录,随后记录的是培训时的笔记,现在只要是有价值的文章,何必去区分是copy还是笔记,关键在于是否坚持过,可坚持二字,真的可以做到吗?

在主题中用到了分页加载,可还不是很熟悉,这里就把2中方法先记录下来,方便查阅。

1、首先载入jquery.ias.min.js文件,可以直接百度到下载链接;

2、然后下面代码是百度到的2种方法,任选其一即可:

(方法一“可能”出自舍力博客)

  1. var ias = $.ias({
  2.     container: "#content"/*包含所有文章的元素*/
  3.     item: ".tleajaxpage"/*文章元素*/
  4.     pagination: ".am-pagination"/*分页元素*/
  5.     next: ".am-pagination a#tlenextpage"/*下一页元素*/
  6. });
  7. ias.extension(new IASTriggerExtension({
  8.     text: '<div class="cat-nav am-round"><small>猛点几次查看更多内容</small></div>', /*此选项为需要点击时的文字*/
  9.     offset: 2, /*设置此项后,到 offset+1 页之后需要手动点击才能加载,取消此项则一直为无限加载*/
  10. }));
  11. ias.extension(new IASSpinnerExtension());
  12. ias.extension(new IASNoneLeftExtension({
  13.     text: '<div class="cat-nav am-round"><small>已经是全部内容了</small></div>', /*加载完成时的提示*/
  14. }));

或者

(方法二“可能”是jQuery原版)

  1. jQuery.ias({
  2.             history: false,
  3.             container : '#content',
  4.             item: '.tleajaxpage',
  5.             pagination: '.am-pagination',
  6.             next: '.am-pagination a#tlenextpage',
  7.             trigger: '猛点几次查看更多内容',
  8.             loader: ,
  9.             triggerPageThreshold: 5,
  10.             onRenderComplete: function() {
  11.             }
  12.         });

以上仅是使用jQuery实现Ajax分页加载简单使用的前奏,后续有何优化欢迎按Ctrl+D收藏同乐儿网址。

推荐阅读
  • 暂无相关文章!

o p
Ú
>