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实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
vue如何进行动画的封装
Sep 26 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 错误处理经验分享
2011/10/11 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
计算机个人求职信范例
2014/01/24 职场文书
七年级生物教学反思
2014/01/30 职场文书
剪彩仪式主持词
2014/03/19 职场文书
国贸专业求职信
2014/06/28 职场文书
小学生优秀评语
2014/12/29 职场文书
小学新教师个人总结
2015/02/05 职场文书
库房管理员岗位职责
2015/02/12 职场文书
python垃圾回收机制原理分析
2022/04/13 Python