<!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);
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
