jquery插件(二):Infinite Scroll–无限分页
来源:互联网 发布:mac safari打不开页面 编辑:程序博客网 时间:2024/05/19 03:26
一、前言
现在有很多网站都有这样的交互
1、当你往下浏览页面时,页面会自动去异步加载数据。
2、在页面下方有一个“点击加载”的按钮,点击之后页面会去加载数据。
虽说这样的操作用js并不难实现,但是现在有很多成熟的插件,很好很强大,让你可以很简单的就实现这样的功能。
这篇文章就是要介绍其中的一种jquery插件–Infinite Scroll, 用它来实现无限分页。
本文已经同步至我的个人博客站点:
jquery插件(二):Infinite Scroll–无限分页(http://ifxoxo.com/jquery-infinite-scroll.html)
如果想要看实例,可以到以下网址查看:
http://520xmn.com
二、具体用法
1、所需的资源
(1)jquery
既然是jquery插件,肯定是需要先加载jquery的,可以到jquery官网去下载最新的jquery:http://jquery.com/
(2)infinite scroll
到github上去下载最新的infinite scroll插件,地址如下:https://github.com/paulirish/infinite-scroll
在里面找到一个 jquery.infinitescroll.min.js
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitescroll.min.js"></script>
2、所需的html
(1)有一个容器
当异步加载后,内容可以存在在这里
<div class="item">内容</div>
<div class="item">内容</div>
......
<div class="item">内容</div>
</div>
(2)在页面上需要有一个翻页的连接
(待会需要在js上指明),比如
<a href="/Pic/randpage?page=2"></a>
</div>
3、所需的css
在加载的时候,页面会出现一个loading的层(id是#infscr-loading),这个部分的样式需要我们自己去定义,
下面是我自己网站的一个半透明黑色的样式,如果你喜欢,可以直接拿去用
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 40px;
width: 200px;
padding: 10px;
background: #000;
opacity: 0.8;
color: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
4、js部分–自动加载
前面的部分都准备之后,js部分其实是很容易的,直接调用infinitescroll方法,指明一些参数就行。(参数列表详见一、6)
如果想要看示例,可以查看520xmn.com,里面的无限分页就是用了这个插件.
navSelector : "#next", // 页面分页元素(成功后会被隐藏)
nextSelector : "#next a", // 需要点击的下一页链接,和2的html要对应
itemSelector : ".item" , // ajax回来之后,每一项的selecter
//(比如每篇文章都有item这个class)
animate : true, //加载完毕是否采用动态效果
extraScrollPx: 100, //向下滚动的像素,必须开启动态效果
// debug : true, //调试的时候,可以打开
bufferPx : 5, //提示语展现的时长,数字越大,展现时间越短
loading: {
finishedMsg: '没有更多内容了', //当加载失败,或者加载不出内容之后的提示语
img: 'loading-new.gif', //自定义loadding的动画图
msgText : '正在加载中...', //加载时的提示语
},
},
function( newElements, opt ) {
//成功后执行自定义的函数
//如果需要对新内容进行加工,就在这里实现
}
};
5、js部分–点击后再加载
infinite scroll默认是自动加载的,但是在某些情况下,我们希望的是用户点击“加载”按钮之后,才去异步加载数据,实现起来也不难。
就在需要实现点击后再加载的地方,加上类似的代码
$(window).unbind('.infscr');
// 手动点击的元素
$('#next').click(function(){
$('#masonny-div').infinitescroll('retrieve');
});
// 如果没有下一页,去掉分页
$(document).ajaxError(function(e,xhr,opt){
if (xhr.status == 404) $('#next').remove();
});
$('#next').show(); //显示下一页
6、参数说明
infinitescroll还有很多强大的参数支持
这是从 https://github.com/paulirish/infinite-scroll翻译过来的,如果觉得翻译的不对,可以自行查询原版。
比如每篇文章都有item这个classanimatefalse加载完毕是否采用动态效果pathParseunderfine切割nextSelector的url的规则, 提取出需要加载第几页
如:["/index?key1=${val1 }&key2=${val2}&page=",""]dataTypehtml加载回来的数据格式,支持”json|html”bufferPx40提示语展现的时长,数字越大,展现时间越短infid0示例的id,用于区分页面多次用到这个插件
7、其他
(1)操作
infiniter scroll还提供暂停和恢复操作,
如
$('.selector').infinitescroll('resume');
(2)状态
提供了几个状态供我们去查询
isDuringAjax
isInvalidPage
isDestroyed //处在destroyed状态?
isDone //加载完毕?
isPaused //处在暂停状态?
currPage //当前页数
我们可以在自定义函数里面去查询
var page = opts.state.currPage;
//console.log(page);
}
p.s
本文已经同步至我的个人博客站点:
jquery插件(二):Infinite Scroll–无限分页(http://ifxoxo.com/jquery-infinite-scroll.html)
如果想要看实例,可以到以下网址查看:
http://520xmn.com
- jquery插件(二):Infinite Scroll–无限分页
- Infinite Scroll–无限分页
- jQuery Infinite Ajax Scroll(ias) 分页插件介绍
- 无限滚动插件infinite-scroll介绍
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用
- ng中infinite-scroll插件无限请求问题解决方法
- infinite-scroll插件使用
- 小白入门---Vue无限滚动(vue-infinite-scroll)
- 【无限滚动加载数据】—infinite-scroll插件的使用---------下拉加载数据、无线滚动
- jquery jquery插件infinite scroll <%each list as goods%> 模板 产品循环
- ionic 下拉分页 ion-infinite-scroll标签
- android scroll view infinite scroll
- 常用的JS插件介绍:3、masonry——瀑布流(结合requirejs、art-template、infinite-scroll)
- Infinite Ajax Scroll (IAS)
- 分页插件(二)
- onepage-scroll – jQuery单页/全屏滚动插件
- C++类和对象
- LeetCode:Remove Element
- html5中svg,canvas和图片之间的相互转化
- 使三个数从大到小按顺序排列
- 如何创建XML文件并获取其中某一节点值
- jquery插件(二):Infinite Scroll–无限分页
- Struts2 ----图片验证码
- Myeclise10.0:org.apache.jasper.JasperException
- undefined和null
- 关于指针,地址总线的一些思考。
- 将16进制颜色转换成RGB值
- jquery插件(三):Colorbox–内容播放插件
- 20131017下阶段工作计划
- leetcode Reverse Linked List II