欢迎光临
我们一直在努力

jQuery ias插件使用

jQuery ias是流式分页插件,随着用户滚轴的滚动而自动去加载下一页数据。网上也有很多的教程,但是笔者认为在交互方面还需强调一下。

插件下载地址

https://plugins.jquery.com/ias/

应用示例

先用一个简单的例子来展示ias的基本用法。首先需要引入JS如下:

<script src="/blog/js/jquery.ias.js"></script> 

其中HTML网页中需包含类似如下内容:

<div class="content">    
      <!-- 分页开始 -->
      <article class="excerpt excerpt-1">
        <header><a class="cat" href="program">ias<i></i></a>
          <h2><a href="" target="_blank" title="">ias使用方法</a></h2>
        </header>
        <p class="meta">
          <time class="time"><i class="glyphicon glyphicon-time"></i>2017</time>
          <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共99人围观</span> <a class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i>23个不明物体</a></p>
        <p class="note">ias使用... </p>
      </article>
      <article class="excerpt excerpt-1">
        <header><a class="cat" href="program">ias<i></i></a>
          <h2><a href="" target="_blank" title="">ias使用方法</a></h2>
        </header>
        <p class="meta">
          <time class="time"><i class="glyphicon glyphicon-time"></i>2017</time>
          <span class="views"><i class="glyphicon glyphicon-eye-open"></i> 共99人围观</span> <a class="comment" href="article.html#comment"><i class="glyphicon glyphicon-comment"></i>23个不明物体</a></p>
        <p class="note">ias使用... </p>
      </article>
      <!-- 分页结束 -->
  </div>
      <nav class="pagination" style="display: none;">
        <ul>
          <li class="next-page"><a href="/article/index?pageNo={* pageNo *}">下一页</a></li>
        </ul>
      </nav>

如上所示,HTML中需要有两大要素:分页数据、翻页标签。其中一般来说带有分页URL的模块,都是隐藏的,以满足页面美观需要。

然后就是加入JS代码如下:

jQuery.ias({
    history: false,
    container : '.content',
    item: '.excerpt',
    pagination: '.pagination',
    next: '.next-page a',
    trigger: '查看更多',
    loader: '<div class="pagination-loading"><img src="/blog/images/loading.gif" /></div>',
    triggerPageThreshold: 5,
    onRenderComplete: function() {
        $('.excerpt .thumb').lazyload({
            placeholder: '/blog/images/occupying.png',
            threshold: 400
        });
        $('.excerpt img').attr('draggable','false');
        $('.excerpt a').attr('draggable','false');
    }
});

下面详细的介绍一下相关的参数含义:

  • container:分页数据的上一层标签定位,这里指的是class=’content’的标签。
  • item:在container中的一条条的分页数据的定位标识,这里指的是class=’excerpt’的标签。
  • pagination:分页模块的顶层标签,这里指的是class=’pagination’的标签,插件会自动将其隐藏。
  • next:用以获取下一页的分页连接,这里指的是class=’next-page’下面的a标签。
  • trigger:当分页自动加载到一定页数后,会触发手动分页。该参数就是其展示值。如果不设置,则会显示默认值。
  • loader:自动加载器内容,是一个html标签。如果不设置,则会显示默认值。
  • triggerPageThreshold:自动加载的数量。如上所示,当触发自动加载时,则会自动加载5页的内容。

其他参数请参见官方文档:https://infiniteajaxscroll.com/docs/overview.html

注意事项

在进行AJAX分页的时候,返回的分页数据是全量的第二页数据。意思就是除了有分页的内容外,还有页面的其他部分内容。这里虽然返回的是全量的下一页数据,但是页面并没有全量刷新。(但是笔者认为,这样的分页会浪费一些服务器资源)

赞(0)
未经允许不得转载:傻子哦 » jQuery ias插件使用
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    好的,去官方文档看一下,谢谢分享

    cess2个月前 (09-26)回复