帶跳轉的jQuery滑動分頁外掛
阿新 • • 發佈：2019-02-07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>帶跳轉的jquery滑動分頁外掛</title> <style> * { margin: 0; padding: 0; list-style: none; font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; } .fl { float: left; } .box { height: 40px; line-height: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } .box button { padding: 0 10px; margin: 0 10px; height: 40px; float: left; cursor: pointer; border: 1px solid #ebebeb; border-radius: 3px; background-color: #ffffff; } .box .first-page, .box .last-page { margin: 0; } .box .pageWrap { height: 40px; float: left; overflow: hidden; } .box .pageWrap ul { width: 100000px; height: 40px; float: left; } .box .pageWrap ul li { color: #666; width: 60px; height: 40px; border: 1px solid #ebebeb; border-radius: 3px; line-height: 40px; box-sizing: border-box; cursor: pointer; float: left; } .box .pageWrap ul .sel-page { background-color: #22b4f6; color: #fff; font-weight: 600; } .box .jump-text { width: 60px; height: 40px; box-sizing: border-box; text-align: center; margin: 0 5px; float: left; border: 1px solid #ebebeb; border-radius: 3px; } .box .jump-button { margin: 0; float: left; } .box .total-pages, .box .total-count { margin-left: 10px; float: left; font-size: 14px; } </style> </head> <body> <div class="box" id="box"></div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/paging.js"></script> <script> var setTotalCount = 301; $('#box').paging({ initPageNo:3, //初始頁碼 totalPages:30, //總頁數 totalCount:setTotalCount + '條資料', slideSpeed:600, // 緩動速度，單位毫秒 jump:true, //是否支援跳轉 callback: function(page){ //回撥函式 console.log(page); } }); </script> </body> </html>
paging.js
(function($, window, document) { // 定義建構函式 function Paging(el, options) { this.el = el; this.options = { pageNo: options.initPageNo || 1, // 初始頁碼 totalPages: options.totalPages || 1, //總頁數 totalCount: options.totalCount || '', // 條目總數 slideSpeed: options.slideSpeed || 0, // 緩動速度 jump: options.jump || false, // 支援跳轉 callback: options.callback || function() {} // 回撥函式 }; this.init(); } // 給例項物件新增公共屬性和方法 Paging.prototype = { constructor: Paging, init: function() { this.createDom(); this.bindEvents(); }, createDom: function() { var that = this, ulDom = '', jumpDom = '', content = '', liWidth = 60, // li的寬度 totalPages = that.options.totalPages, // 總頁數 wrapLength = 0; totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth; for (var i = 1; i <= that.options.totalPages; i++) { i != 1 ? ulDom += '<li>' + i + '</li>' : ulDom += '<li class="sel-page">' + i + '</li>'; } that.options.jump ? jumpDom = '<input type="text" placeholder="1" class="jump-text" id="jumpText"><button type="button" class="jump-button" id="jumpBtn">跳轉</button>' : jumpDom = ''; content = '<button type="button" id="firstPage" class="turnPage first-page">首頁</button>' + '<button class="turnPage" id="prePage">上一頁</button>' + '<div class="pageWrap" style="width:' + wrapLength + 'px">' + '<ul id="pageSelect" style="transition:all ' + that.options.slideSpeed + 'ms">' + ulDom + '</ul></div>' + '<button class="turnPage" id="nextPage">下一頁</button>' + '<button type="button" id="lastPage" class="last-page">尾頁</button>' + jumpDom + '<p class="total-pages">共 ' + that.options.totalPages + ' 頁</p>' + '<p class="total-count">' + that.options.totalCount + '</p>'; that.el.html(content); }, bindEvents: function() { var that = this, pageSelect = $('#pageSelect'), // ul lis = pageSelect.children(), // li的集合 liWidth = lis[0].offsetWidth, // li的寬度 totalPages = that.options.totalPages, // 總頁數 pageIndex = that.options.pageNo, // 當前選擇的頁碼 distance = 0, // ul移動距離 prePage = $('#prePage'), nextPage = $('#nextPage'), firstPage = $('#firstPage'), lastPage = $('#lastPage'), jumpBtn = $('#jumpBtn'), jumpText = $('#jumpText'); prePage.on('click', function() { pageIndex--; if (pageIndex < 1) pageIndex = 1; handles(pageIndex); }) nextPage.on('click', function() { pageIndex++; if (pageIndex > lis.length) pageIndex = lis.length; handles(pageIndex); }) firstPage.on('click', function() { pageIndex = 1; handles(pageIndex); }) lastPage.on('click', function() { pageIndex = totalPages; handles(pageIndex); }) jumpBtn.on('click', function() { var jumpNum = parseInt(jumpText.val().replace(/\D/g, '')); if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) { pageIndex = jumpNum; handles(pageIndex); jumpText.val(jumpNum); } }) lis.on('click', function() { pageIndex = $(this).index() + 1; handles(pageIndex); }) function handles(pageIndex) { lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page'); if (totalPages <= 5) { that.options.callback(pageIndex); return false; } if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth; if (pageIndex == 2 || pageIndex == 1) distance = 0; if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth; pageSelect.css('transform', 'translateX(' + (-distance) + 'px)'); pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false); pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false); pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false); pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false); that.options.callback(pageIndex); } handles(that.options.pageNo); // 初始化頁碼位置 } } $.fn.paging = function(options) { return new Paging($(this), options); } })(jQuery, window, document);