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 到 JQuery (1)学习小结
Feb 12 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
JS实现transform实现扇子效果
Jan 17 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
Apache设置虚拟WEB
2006/10/09 PHP
用php来检测proxy
2006/10/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
python 模拟登录B站的示例代码
2020/12/15 Python
python中使用np.delete()的实例方法
2021/02/01 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
本科毕业生求职信
2014/06/15 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS