JQuery BPage是一個jQuery分頁插件,可以幫助我們快速實現分頁效果。它是一個輕量級的插件,使用方便,功能齊全。下面介紹一下該插件的使用方法。
//引入jQuery和BPage插件 <script src=\"jquery.js\"></script> <script src=\"jquery.bpage.js\"></script> //HTML結構 <div id=\"page\"></div> //JS代碼 $(function(){ $('#page').bPage({ pageCount: 5, //總頁數 pageSize: 10, //每頁顯示的條數 visiblePages: 5, //顯示的頁碼個數 first: '首頁', //首頁按鈕名稱 last: '尾頁', //尾頁按鈕名稱 prev: '上一頁', //上一頁按鈕名稱 next: '下一頁', //下一頁按鈕名稱 disableClass: '', //禁用樣式名稱 activeClass: 'active', //當前頁樣式名稱 onPageChange: function(num){ //此處為分頁回調函數 console.log(num); } }); });
如上所示,首先需要引入jQuery和BPage插件。然后在HTML結構中定義一個id為“page”的div,用來顯示分頁效果。最后在JS代碼中調用bPage方法,傳入相關參數,即可實現分頁效果。其中可配置的參數項包括總頁數、每頁顯示的條數、顯示的頁碼個數、首頁/尾頁/上一頁/下一頁按鈕名稱、禁用樣式名稱、當前頁樣式名稱和分頁回調函數等。