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'; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js event对象
- js分号的使用
- js实现图片旋转
- js如何访问xml
- js编写一个数组去重的方法(JS实现数组过滤从简单到多条件筛选)
- js中arguments的用法
- nodejs启动web服务器(使用NODE.JS创建一个WEBSERVER服务器的步骤)
- 动态加载js脚本
- JavaScriptSerializer对Json对象的序列化和反序列化
- js手写数组去重(JS对象数组去重的3种方法示例及对比)
- packagejson怎么使用(最全的package.json解析)
- laravel-admin代码执行流程(解决laravel-admin 自己新建页面里 js 需要刷新一次的问题)
- docker node 分阶段构建(Docker安装、创建镜像、加载并运行NodeJS程序的详细过程)
- Js如何判断浏览器类型和版本
- ExtJs中getCmp、getDom、Get的区别
- python提取json数据(Python爬取数据保存为Json格式的代码示例)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
热门推荐
- tomcat服务页面打开超慢(Web服务器Tomcat高级优化)
- php查找文件存在(php判断目录存在的简单方法)
- laravel框架配置(Laravel框架实现多数据库连接操作详解)
- sql版本号处理并发(SQL server高并发生成唯一订单号的方法实现)
- thinkphp5表单系统(thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例)
- tp5框架源码分析(tp5框架无刷新分页实现方法分析)
- dedecms 标签通用(DEDECMS标签循环调用 去掉最后一个循环符号的代码)
- dedecms自适应代码(dedecms下广告延时加载显示,大大提高网页访问的速度)
- linux下date用法(Linux date命令的使用)
- 小米机器狗用什么二次开发(小米正式开源 SQL 智能优化与改写工具 SOAR)