javascript组件库实现(JavaScript分页组件使用方法详解)
类别:编程学习 浏览量:2096
时间:2021-10-03 01:35:34 javascript组件库实现
JavaScript分页组件使用方法详解分页组件是web开发中常见的组件,请完成pagination函数,在id为jsPagination的DOM元素中完成分页的显示部分,需求如下
1、最多连续显示5页,居中高亮显示current页(如demo1所示)
2、total为0时,隐藏整个元素(如demo2所示)
3、如果total<=5,则显示全部页数,隐藏“首页”和“末页”元素(如demo3所示)
4、当current居中不足5页,向后(前)补足5页,隐藏“首页”(“末页”)元素(如demo4和demo5所示)
5、total、current均为正整数,1 <= current <= total
用原生JS实现分页组件,实现上述需求。需要注意下面几点
1:在获取<li>标签的时候,由于上一个<li>标签与下一个<li>标签之前存在文本节点,需要两次使用nextSibling,
page = page.nextSibling.nextSibling;
2:提供的<li>标签的innerHTML为‘',需要在其中添加页码,根据需求中的五种情况写
3:特别注意首页、末页的隐藏情况。当current-2<=1 时隐藏首页,当current+2.>=total隐藏末页,需要隐藏首页、末页存在于上述demo1、demo3、demo4、demo5。(其中demo1 首页、末页的隐藏很容易被忽略掉!)
HTML
<ul class="pagination" id="jsPagination"> <li>首页</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li>末页</li> </ul>
css
.hide{ display: none!important; } .pagination{ margin: 0 auto; padding: 0; list-style: none; text-align: center; } .pagination li{ display: inline-block; width: 30px; height: 30px; overflow: hidden; line-height: 30px; margin: 0 5px 0 0; font-size: 14px; text-align: center; border: 1px solid #00bc9b; color: #00bc9b; cursor: pointer; } .pagination li.current, .pagination li:hover{ background: #00bc9b; color: #ffffff; } .demo { margin: 10px 0; padding: 10px; background: #eeeeee; text-align: center; }
JavaScript
function pagination(total, current) { var ele=document.getElementById('jsPagination'); //for demo1 if(current-2>=1&¤t+2<=total) { var page=ele.firstChild.nextSibling; if(current-2==1) page.className='hide'; for(var i=current-2,p=current-2;i<=current+2;p++,i++) { page=page.nextSibling; console.log(page); page=page.nextSibling; console.log(page); page.innerHTML=i; if(i==current) page.className='current'; } if(current+2==total) { var last=page.nextSibling.nextSibling; last.className='hide'; } } //for demo2 else if(total==0) { ele.className='pagination hide'; } //for demo3 else if(total<=5) { var fir=ele.firstChild.nextSibling; fir.className='hide'; var page=fir; for(var i=1;i<=5;i++) { page = page.nextSibling.nextSibling; if (i <= total) { page.innerHTML=i; if(i==current) page.className='current'; } else { page.className='hide'; } } var last=page.nextSibling.nextSibling; last.className='hide'; } //for demo4 else if(current-2<=0) { var page=ele.firstChild.nextSibling; page.className='hide'; for(var i=1;i<=5;i++) { page = page.nextSibling.nextSibling; page.innerHTML=i; if(i==current) page.className='current'; } } //for demo5 else if(current+2>total) { var page=ele.firstChild.nextSibling; for(var i=total-4;i<=total;i++) { page = page.nextSibling.nextSibling; page.innerHTML=i; if(i==current) page.className='current'; } var last=page.nextSibling.nextSibling; last.className='hide'; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- java上传图片压缩包(js实现多张图片打包成zip)
- nodejs的广播机制(node.js如何自定义实现一个EventEmitter)
- php加密平台(PHP7实现和CryptoJS的AES加密方式互通示例AES-128-ECB加密)
- node.js怎么使用import(Node.js断点续传的实现)
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- js三级联动说明(基于JavaScript实现省市联动效果)
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- js中Attribute和Property区别
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- js统计文本框剩余可输入字数
- JS中sort()和reverse()
- 火狐查看json数据
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- nodejs部署上传文件(node.js使用express-fileupload中间件实现文件上传)
- js如何生成随机数
- js如何实现定时器功能(js实现0ms延时定时器的几种方式)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
热门推荐
- php面向对象怎么调用属性(PHP面向对象程序设计__tostring和__invoke用法分析)
- web服务器iis安全访问机制(IIS与APACHE实现HTTP重定向到HTTPS)
- 云服务器可以搭建几个网站(使用云服务器搭建网站的注意事项)
- react基础知识入门(浅谈React 的引入)
- 图解python轻松快速掌握(10招!看骨灰级Pythoner玩转Python的方法)
- sql中去除重复记录的关键字(sqlserver查询去掉重复数据的实现)
- 织梦dedecms标签手册(织梦DEDECMS网站安全攻略之修改data目录名称方法步骤)
- python加密与解密(python实现简单加密解密机制)
- nginx安全配置提示(wdcp Linux面板nginx启用gzip后js未压缩解决方案)
- pythonpil安装包(基于Python的PIL库学习详解)