1. XenForo 1.5.14 中文版——支持中文搜索!现已发布!查看详情
  2. Xenforo 爱好者讨论群:215909318 XenForo专区

新闻 LayPage 1.0 发布,适用多场景 JavaScript 分页 下载

本帖由 漂亮的石头2014-12-11 发布。版面名称:软件资讯

  1. 漂亮的石头

    漂亮的石头 版主 管理成员

    注册:
    2012-02-10
    帖子:
    486,020
    赞:
    46
    laypage主要应用于前端页面Ajax普通分页以及信息流加载,并且可无缝迁移至Node.js平台。她不依赖于任何第三方库,直接拿来用即可,其接口继承了layui系列组件的一贯简洁,极易上手。那么,从现在开始,将分页的任务交给laypage吧!

    加载laypage


    获得laypage包后,把整个文件存放到你的目录。直接通过script标签引入laypage.js即可,无需引入css。你还可以通过seajs或者requirejs加载laypage。如:

    var laypage = require('laypage');
    laypage({
    cont: 'id',
    pages: 11,

    })
    使用


    laypage并没有额外去封装Ajax,她只负责分页的核心功能,并且提供了关键性回调函数jump,每触发一次跳页,jump都会被执行,并且返回一些配置信息,其中包括当前页(curr),通过它,你可以去向服务端请求指定数据,如

    laypage({
    cont: 'page1', //容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>
    pages: 66, //总页数
    curr: 6, //当前页
    jump: function(e){ //触发分页后的回调
    //触发分页后的回调
    var curr = e.curr; //获得当前页后,去向服务端发送请求,获得相关数据。
    }
    });

    laypage还可以自定义皮肤

    laypage({
    cont: document.getElementById('page2'), //容器。值支持id名、原生dom对象,jquery对象,
    pages: 100, //总页数
    skin: 'yahei', //加载内置皮肤,也可以直接赋值16进制颜色值,如:#c00
    groups: 7 //连续显示分页数
    });

    开启跳页

    laypage({
    cont: $('#page3'), //容器。值支持id名、原生dom对象,jquery对象,
    pages: 100, //总页数
    skip: true, //是否开启跳页
    skin: '#AF0000',
    groups: 3 //连续显示分页数
    });

    自定义文本

    laypage({
    cont: 'page4', //容器。值支持id名、原生dom对象,jquery对象,
    pages: 11, //总页数
    skin: 'molv', //皮肤
    first: '首页', //若不显示,设置false即可
    last: '尾页', //若不显示,设置false即可
    prev: '<', //若不显示,设置false即可
    next: '>' //若不显示,设置false即可
    });

    开启hash。laypage会自动对url追加#!laypage_{id}={curr}。利用这个,可以在页面载入时就定位到指定页

    laypage({
    cont: 'page6', //容器。值支持id名、原生dom对象,jquery对象,
    pages: 68, //总页数
    hash: true, //会对url追加#!laypage_
    jump: function(obj){

    }
    });

    只出现上一页/下一页

    laypage({
    cont: 'page7', //容器。值支持id名、原生dom对象,jquery对象,
    pages: 11, //总页数
    groups: 0,
    first: false,
    last: false,
    jump: function(obj){
    $('#view7').html('目前正在第'+ obj.curr +'页,一共有:'+ obj.pages +'页');
    }
    });

    信息流

    laypage({
    cont: 'page8', //容器。值支持id名、原生dom对象,jquery对象,
    pages: 7, //总页数
    groups: 0, //连续分数数0
    prev: false, //不显示上一页
    next: '查看更多',
    skin: 'flow', //设置信息流模式的样式
    jump: function(obj){
    var curr = obj.curr;
    if(curr === 6){
    this.next = '没有更多了';
    }
    //以下加上append操作
    }
    });

    更详细的文档以及DEMO,参见:http://sentsin.com/layui/laypage
    LayPage 1.0 发布,适用多场景 JavaScript 分页下载地址
     
正在加载...