设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 软件追踪 查看内容

layPage 1.2发布,小而美多功能分页方案

2015-4-4 00:13| 发布者: joejoe0332| 查看: 1363| 评论: 0|原作者: oschina|来自: oschina

摘要: layPage 是一枚小小前端组件,这篇新闻主要是为了混个脸熟,继续像往常一样愉快地装下A,顺便向伟大的OSCHINA敬礼。正如一小戳人之前所了解的,layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的 ...

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.异步分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//以下将以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.整页刷新跳页

1
2
3
4
5
6
7
8
9
10
11
12
13
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;
        }
    }
});

更多的例子请去官网围观。

新闻写完。。。掩脸闪人。。。


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部