javascript实现导航栏分页效果


Posted in Javascript onJune 27, 2019

本文实例为大家分享了js实现导航栏分页效果的具体代码,供大家参考,具体内容如下

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实现导航栏分页效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 #Javascript
原生js实现抽奖小游戏
Jun 27 #Javascript
JavaScript实现图片放大镜效果
Jun 27 #Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 #Javascript
微信小程序自定义组件实现环形进度条
Nov 17 #Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 #Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 #Javascript
You might like
逆序二维数组插入一元素的php代码
2012/06/08 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
javascript window对象属性整理
2009/10/24 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
JavaScript中的函数式编程详解
2020/08/22 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
什么是python的函数体
2020/06/19 Python
Python socket服务常用操作代码实例
2020/06/22 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
中专自我鉴定范文
2013/10/16 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
新闻发布会主持词
2014/03/28 职场文书
寒假生活随笔
2015/08/15 职场文书
表扬信范文
2019/04/22 职场文书
php修改word的实例方法
2021/11/17 PHP