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 去字符串空格终极版(支持utf8)
Nov 14 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
JS script脚本中async和defer区别详解
Jun 24 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语法(1)
2006/10/09 PHP
杏林同学录(五)
2006/10/09 PHP
php相当简单的分页类
2008/10/02 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
超清晰的document对象详解
2007/02/27 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Python实现注册登录系统
2017/08/08 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python Pillow Image Invert
2019/01/22 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
加热夹克:RAVEAN
2018/10/19 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
入党思想汇报
2014/01/05 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
爱国主义电影观后感
2015/06/18 职场文书
创业计划书之养殖业
2019/10/11 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android