前端分頁外掛 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); } } });