同乐儿

  1. 首页
  2. jquery专题
jQuery:Ajax分页加载简单使用前奏
发布 | 4个月前 (08-04) | 阅读数:433 | 评论数:0 | 来源:同乐儿

已经有好久没发布教程类的文章了,以前也只不过是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收藏同乐儿网址。


如果觉得该作者的文章对你有帮助,请随意打赏给他。您的支持将鼓励作者继续创作!
打赏
X
打赏本文作者方式

微信扫一扫可留言


继续浏览有关 ajax,jQuery,分页加载 的文章

分享至:




评论
  • 117 评论
  • 129 粉丝
  • 131 文章
  • 最新评论
    二呆说:看见岛有了点信号,我用的时候就是看对应网...
    123123123说:我试过了,没改成功,不着急用,看了qur...
    二呆说:6.0应该也行,时间太长忘记了,好像6....
    123123123说:能不能适配下emlog6.0
    二呆说:啥意思,背景就是简单的网页背景图片。。。
    随机热门
    标签
    wordpress (81) wordpress优化 (26) wordpress主题 (24) 原创 (23) wordpress插件 (21) wordpress教程 (18) wordpress seo (17) Typecho (14) Typecho插件 (11) 博客主题 (8) emlog插件 (6) wordpress维护 (6) emlog (6) CMS主题 (5) 企业主题 (4) DNSPod for emlog (3) 淘宝客主题 (3) 修订版本 (3) 自动保存 (3) 移动适配 (3)