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 IE 浏览器判定代码
Mar 21 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
node内置调试方法总结
Feb 22 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 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函数(简单整理)
2010/04/30 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
python中的函数用法入门教程
2014/09/02 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
大专自我鉴定范文
2013/10/23 职场文书
八年级语文教学反思
2014/02/11 职场文书
白酒市场营销方案
2014/02/25 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
如何Python使用re模块实现okenizer
2022/04/30 Python