layPage 1.2 发布,小而美多功能分页方案
阿里百川,开启移动应用开发的新篇章
layPage 是一枚小小前端组件,这篇新闻主要是为了混个脸熟,继续像往常一样愉快地装下A,顺便向伟大的OSCHINA敬礼。正如一小戳人之前所了解的,layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载。那么。。。各位可观不要嫌弃。
【1.2更新日志】
1、完善jump回调,新增第二个参数,用于在使用location跳转时,控制页面初始加载无限刷新的问题。
2、完善hash机制,页面初始加载时,当前页为1时,不改变location.hash。另外可对参数hash赋上特定值,以便初始化时获取当前页复制给curr。
3、完善cont、pages、groups,传入的数值支持string和number
4、样式微调
【粒子】
1.异步分页
//以下将以jquery.ajax为例,演示一个异步分页$.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义 laypage({ cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。 pages: res.pages, //通过后台拿到的总页数 curr: 6, //初始化当前页 jump: function(e){ //触发分页后的回调 $.getJSON('test/demo1.json', {curr: e.curr}, function(res){ e.pages = e.last = res.pages; //重新获取总页数,一般不用写 //渲染 var view = document.getElementById('view1'); //你也可以直接使用jquery var demoContent = (new Date().getTime()/Math.random()/1000)|0; //此处仅仅是为了演示 view.innerHTML = res.content + demoContent; }); } });});
2.整页刷新跳页
laypage({ cont: 'page11', pages: 18, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18 curr: function(){ //通过url获取当前页,也可以同上(pages)方式获取 var page = location.search.match(/page=(\d+)/); return page ? page[1] : 1; }(), jump: function(e, first){ //触发分页后的回调 if(!first){ //一定要加此判断,否则初始时会无限刷新 location.href = '?page='+e.curr; } }});
更多的例子请去官网围观。
新闻写完。。。掩脸闪人。。。