• 滑到底部自动加载Infinite Ajax Scroll,a jQuery plugin


          随着智能机的普及,一些手机拥有的效果也慢慢的在网页上实现,最近的一个web项目客户就要球实现当页面滑动到底部的时候自动加载下一页的数据,实现无刷新的自动加载。

         因为敝人能力有限也比较懒,所以直接从网上找源码来进行实现,不是很多,但是也有,庆幸的找到以下这个网址:

    10 个支持列表无限滚动的 jQuery 插件

    http://www.oschina.net/news/29428/10-aggressively-used-jquery-infinite-scroll-plugins

          该文章介绍了10个能够实现该功能的插件,最初的时候我用了介绍的第四个的插件:

           4. Scroll Extend Plugin

          然而该插件只是木然的加载另外一个页面的数据,不能从数据库判断数据已经加载到了哪里,是否已经加载完毕。自己利用session来传递相关的数据,庆幸的是实现了判断数据的加载,在谷歌浏览器下正常,不幸的是不知道为何在ie下只能加载同一条数据,不正常!白死不得其解之后只能含恨放弃了该插件,放弃了之前完成的东西。

          然后我又选择了介绍的第八个插件:

          8. Infinite Ajax Scroll, a jQuery Plugin

           Infinite Ajax Scroll 可将你现有的网页变成支持无限滚动的页面,无需太麻烦就可搞定。仔细研究后发现该插件正是我所需,而且结构很简单,如果你现在的页面已经实现了分页功能的话,那么很容易的就能把它变成支持无限滚动的页面,现有的页面几乎不需要做任何改动,只需要引用相关的js文件,然后配置如下的js:

       1:  jQuery.ias({
       2:    container     : ".listing",
       3:            // Enter the selector of the element containing  写入容器的元素<selector>
       4:            // your items that you want to paginate.   具体数据的元素标识
       5:   
       6:    item        : ".post",
       7:          // Enter the selector of the element that each   要加载数据的元素标识
       8:          // item has. Make sure the elements are inside    用来提取下一页信息里面的元素
       9:          // the container element.                         从而加载到上面的容器中
      10:   
      11:    pagination    : "#content .navigation",
      12:          // Enter the selector of the element that contains    分页信息的容器元素标识
      13:          // your regular pagination links, like next,        即:首页,上一页,下一页,尾页等信息的容器。
      14:          // previous and the page numbers. This element
      15:          // will be hidden when IAS loads.
      16:   
      17:    next        : ".next-posts a",
      18:          // Enter the selector of the link element that      下一页的元素标识,用来获取下一页的信息元素
      19:          // links to the next page. The href attribute
      20:          // of this element will be used to get the items
      21:          // from the next page.
      22:   
      23:    loader    : "images/loader.gif"
      24:          // Enter the url to the loader image. This image     数据进行提取加载的时候显示的图片
      25:          // will be displayed when the next page with items
      26:          // is loaded via AJAX.
      27:  });

  • 相关阅读:
    开源工作流 Bonita BPM (JAVA)
    java怎么样判断一个进程是否已近结束
    struts2 Annotation 实现文件下载功能 文件名中文乱码问题
    struts2中s:radio标签的使用 Map
    Win7下声音由小逐渐变大
    JSTL EL 详解
    CHM格式 打开后不显示内容的解决办法
    jquery radio 判断是否被选中的例子
    火狐的funmoods都已经清除了,config里怎么还有他它的项目
    由MyEclipse内存不足谈谈JVM内存
  • 原文地址:https://www.cnblogs.com/oheec/p/2868556.html
Copyright © 2020-2023  润新知