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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
angular将html代码输出为内容的实例
Sep 30 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
编写更好的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 空格,换行,跳格使用说明
2009/12/18 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
JQuery扩展对象方法操作示例
2018/08/21 jQuery
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
python Django批量导入不重复数据
2016/03/25 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
创业计划实施的7大步骤
2014/02/05 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
住宅使用说明书
2014/05/09 职场文书
党支部特色活动方案
2014/08/20 职场文书
对照检查剖析材料
2014/09/30 职场文书
团队会宣传标语
2014/10/09 职场文书
史上最牛的辞职信
2015/02/28 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js