1. 程式人生 > >前端分頁外掛 laypage.js laypage.css

前端分頁外掛 laypage.js laypage.css

  • 分頁外掛使用步驟:

  • 匯入css/js外掛資源放入到js目錄下--------------------------------------- <link rel="stylesheet" href="js/skin/laypage.css"> <script type="text/javascript" src="js/laypage.js"></script>

    html程式碼,顯示分頁元件位置------------------------------- <ul id="laypage"></ul>

    外掛程式碼-------------------------------------------------

            //呼叫分頁外掛(簡潔方式)         laypage({             cont: "laypage", //容器。值支援id名、原生dom物件,jquery物件。【如該容器為】:<div id="page1"></div>             pages: totalPage, //通過後臺拿到的總頁數             curr: curPage, //當前頁             skin: '#ffc900',//設定當前頁樣式,可以使用內建面板(yahei),也可以直接賦值16進位制顏色值,如:#c00             groups: 10,//連續顯示分頁數             jump: function(obj, first){ //觸發分頁後的回撥                 //first判斷是否第1次切換頁碼,這裡只要不是第1次切換就呼叫分頁獲取資料函式獲取指定頁資料                 if(!first){ //點選不同頁碼觸發的函式,並傳遞當前頁:obj.curr                     demo(obj.curr);                 }             }         });

            //呼叫分頁外掛(複雜方式)         laypage({             cont: "laypage",  //分頁需要顯示的地方             pages:totalPage,    //總頁數             curr: curPage,     //當前頁             groups: 10,//連續顯示分頁數             skip: true,     //是否開啟跳頁             first: ‘首頁‘,             last: ‘尾頁‘,             skin: ‘molv‘,//設定當前頁樣式,載入內建面板,也可以直接賦值16進位制顏色值,如:#c00             prev: ‘<‘, //若不顯示,設定false即可             next: ‘>‘, //若不顯示,設定false即可             jump: function (e, first) { //觸發分頁後的回撥                     //first判斷是否第1次切換頁碼,這裡只要不是第1次切換就呼叫分頁獲取資料函式獲取指定頁資料                     if (!first) { //點選不同頁碼觸發的函式,並傳遞當前頁:obj.curr                         demo(obj.curr);                     }                 }         });