这篇文章给大家分享的是有关javascript实现导航栏分页效果的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
1、结构搭建HTML代码
<div class="page"></div>
2、页面修饰的css样式代码
.page{
width:500px;margin:100px auto;color: #ccc;
}.page a{
display: inline-block;color: #428bca;height: 25px;
line-height: 25px;padding: 0 10px;border: 1px solid #ddd;
margin: 0 2px;border-radius: 4px;vertical-align: middle;
}.page a:hover{
border: 1px solid #428bca;
}.page .current{
display: inline-block;height: 25px;line-height: 25px;
padding: 0 10px;margin: 0 2px;color: #fff;
background-color: #428bca;border: 1px solid #428bca;
border-radius: 4px;vertical-align: middle;
}.page .disabled{
display: inline-block;height: 25px;line-height: 25px;
padding: 0 10px;margin: 0 2px;color: #bfbfbf;
background: #f2f2f2;border: 1px solid #bfbfbf;
border-radius: 4px;vertical-align: middle;
}
3、js代码
// 入口函数 接收参数为扩展插件父级及参数
function init(dom, args) {
// 如果当前显示页数小于总页数
if (args.current <= args.pageCount) {
// 填充html页面内容
fillHtml(dom, args);
// 绑定事件
bindEvent(dom, args);
} else {
alert('请输入正确页数')
}
}
function fillHtml(dom, args) {
// 清空dom元素
dom.empty();
//上一页
if (args.current > 1) {
dom.append('<a href = "#" class="prevPage">上一页</a>');
} else {
dom.remove('.prevPage');
dom.append('<span class="disabled">上一页</span>');
}
//中间页数
if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {
dom.append('<a href = "#" class="tcdNumber">' + 1 + '</a>');
}
if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {
dom.append('<span>...</span>');
}
// 中间页数利用循环生成
var start = args.current - 2;
var end = args.current + 2;
for (; start <= end; start++) {
if (start <= args.pageCount && start >= 1) {
if (start != args.current) {
dom.append('<a href = "#" class="tcdNumber">' + start + '</a>');
} else {
dom.append('<span class="current">' + start + '</span>');
}
}
}
// 判断临界值插入省略号
if (args.current + 2 < args.pageCount - 1 && args.pageCount > 5) {
dom.append('<span>...</span>')
}
// 将中间数值插入html内容中
if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {
dom.append('<a href="#" rel="external nofollow" class="tcdNumber">' + args.pageCount + '</a>');
}
//下一页 根据当前页数确定按钮显示状态
if (args.current < args.pageCount) {
dom.append('<a href = "#" class="nextPage">下一页</a>');
} else {
dom.remove('.nextPage');
dom.append('<span class="disabled">下一页</span>');
}
}
// 点击事件 点击每一页相当于重新调用fillHtml填入参数 修改当前的显示值
function bindEvent(obj, args) {
//点击页码
obj.on('click', '.tcdNumber', function () {
var current = parseInt($(this).text());
changePage(obj, args, current);
})
//上一页
// a.prevPage 规定只能添加到指定的子元素上的事件处理程序
obj.on('click', '.prevPage', function () {
var current = parseInt(obj.children('.current').text());
changePage(obj, args, current - 1);
})
//下一页
obj.on('click', '.nextPage', function () {
var current = parseInt(obj.children('.current').text());
changePage(obj, args, current + 1);
})
}
// 改变html内容
function changePage(dom, args, page) {
fillHtml(dom, { 'current': page, 'pageCount': args.pageCount });
if (typeof (args.backFn == "function")) {
args.backFn(page);
}
}
// 利用jquery中的extend方法扩展插件 将插件扩展到jquery的原型上 扩展实例插件
$.fn.createPage = function (options) {
// 拼接参数 即如果调用插件未传入参数选用默认参数
// 如果传入参数 利用传入参数覆盖默认参数
var args = $.extend({
pageCount: 5,
current: 2,
backFn: function () { }
}, options);
init(this, args)// 调用入口函数
}
// 调用插件 传入参数
$('.page').createPage({
pageCount: 13,// 总页数
current: 3,// 默认选中页数
// 点击选中页数后 回调
backFn: function (p) {
}
})
4、效果图
感谢各位的阅读!关于“javascript实现导航栏分页效果的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。