首页
学习
活动
专区
工具
TVP
发布

带有省略号的分页

带有省略号的分页器 目标与需求分析 假设总页数为 totalPage ,当前点击选中的页数为 clickPage 该值从 1 开始计算,总页数从大于 7 开始构造省略号的按钮。...依据分类讨论可以得到以下四种情况: 图片 我们通过几个具体情况来进一步分析什么时候产生省略号,假设 totalPage 为 9: 图片 代码实现 // 点击页 clickPage = parseInt(...null,null,null,null,totalPage.toString()]; // 用来标记 clickPage 在数组中的索引位置 let index = 0; // 判断第二位是否是省略号按钮...'; } // 判断倒数第二位是否是省略号按钮 if (clickPage < totalPage - 3) { pageArray[5] = '......("click", async function (e) { e.stopPropagation(); // 具体操作 refreshPage(pageOnClicked); // 每次重新选择<em>分页</em>就需要刷新<em>分页</em>器

1.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

JS 实现分页打印

在调用 window.print() 时,可以实现打印效果,但内容太多时要进行分页打印。...其中Auto是默认值,只有在有需要时,才需设定分页符号 (Page breaks)。...page-break-before 若设定成left,则会插入分页符号,直到指定的组件出现在一个左边的空白页上。...page-break-before 若设定成right,则会插入分页符号,直到指定的组件出现在一个右边的空白页上。 page-break-after 属性会将分页符号加在指定组件后,而非之前。...如果必要则在元素前插入分页符 always 在元素前插入分页符 avoid 避免在元素前插入分页符 left 在元素之前足够的分页符,一直到一张空白的左页为止 right 在元素之前足够的分页符,一直到一张空白的右页为止

13.3K21

原生js分页插件

之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来。...自己实现的简单小插件,把分页部分的css样式写在了插件paging.js中,以动态创建style标签的方式,加入到页面中。...1、代码部分: 1.1、插件 - paging.js 分页的css样式写在插件中,动态创建style标签,加载到页面中。在该js中有一个Paging构造函数。...在构造函数中有两个参数,第一个是自定义分页参数的js对象,第二个是回调函数。 在构造函数中有一个initPage()方法。用来渲染分页DOM结构。...DOCTYPE html> js分页插件 <style

32.3K121

文本溢出截断省略

文本溢出截断省略 文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。...单行溢出省略 单行文本溢出截断省略直接使用CSS即可,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,省略号位置显示刚好,但是只能作为单行文本溢出截断省略的解决方案。...*/ } 多行溢出省略 按行计算 CSS方案 多行文本溢出截断省略按行计算使用CSS,其文本溢出范围才显示省略号,否则不显示省略号,省略号位置显示刚好,但是兼容性一般,line-clamp...*/ } 按行计算 Js方案 多行文本溢出截断省略按行计算使用Js,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,但是需要Js实现,背离展示和行为相分离原则,文本为中英文混合时...,省略号显示位置略有偏差。

1.6K10

原生CSS实现单行多余省略和多行多余省略

在日常开发中,经常会遇到一些省略文本的需求,比如“文本在一行显示,超出部分在结尾用省略号显示”、“最多显示三行,超出部分在第三行末尾用省略号显示”。 这些需求用纯CSS即可实现。... 单行省略 .one-line 定义了单行省略样式,样式含义: overflow: hidden 隐藏超出元素区域的内容 text-overflow: ellipsis 以省略号显示超出的文本...white-space: nowrap 设置文本不换行 word-break: break-all 即使结尾处是英文单词,也直接截断,不需要在空格或连字符处换行 多行省略 .mutiple-line-ellipsis...定义了多行省略样式,样式含义: overflow: hidden 隐藏超出元素区域的内容 text-overflow: ellipsis 以省略号显示超出的文本 display: -webkit-box

2.9K20

JS实现无限分页加载——原理图解

由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态。因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿。...传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击下一页,才能看到更多的内容。 有很多网站使用 无限分页 的模式,即网页视窗到达内容底部就自动加载下一部分的内容......本篇就无限分页的实现模型,讲述其中奥妙。 原理图 实现无限分页的过程大致如下: 1 视窗滚动到底部 2 触发加载,添加到现有内容的后面。...content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.<em>js</em>...clientHeight、scrollHeight、offsetHeight区别 【2】ScrollHeight、OffsetHeight、ClientHeight 【3】CSS position 属性 【4】《<em>JS</em>

5.7K100
领券