LayPage 1.0 發布，適用多場景 JavaScript 分頁

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