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的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
WebPack配置vue多页面的技巧
May 15 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python 实现二维列表转置
2019/12/02 Python
python numpy实现rolling滚动案例
2020/06/08 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
远程调用的原理
2014/07/05 面试题
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
初中语文教学反思
2014/02/02 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
毕业实习计划书
2015/01/16 职场文书
歌咏比赛主持词
2015/06/29 职场文书
部门主管竞聘书
2015/09/15 职场文书
诚信高考倡议书
2019/06/24 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android