我们一直面对的分页很多都是数据的分页。今天给大家介绍一个针对一个数据--一片文章的内容,进行截取分页的代码。
纯js实现。我们在很多网站看到一篇文章分了好几个页面展示,就是类似这样的效果。
为什么说是模拟分页呢?因为在服务器响应HTML请求的时候,就已经把全文回传给客户端了,只是我们通过js的方式,把全文隐藏,每次翻页至显示出我们需要的那一部分,而不是真正的按需要去发出HTML请求。所以,在做这个插件的时候去掉了ajax请求的功能及其附带参数,去掉了pageSize参数(恒等于1)。这里就不讨论具体的技术细节了和上一篇的分页计算原理大致相同,有兴趣的同学可以移步:http://www.cnblogs.com/webconfig/p/3864350.html,这里不再赘述。
效果图
再来看张完整的
基本思路
当页面中的正文文章部分的下面加载JS,通过指定好的ID,把正文内容保存在 分页对象(全局变量) 的一个属性中,首次加载当前页为1,Load() 方法中只有一个 分页对象的参数,以后每次翻页 Load() 方法中多加一个当前页参数,然后JS 取值 计算 填充容器。
调用方法
引入样式和Jquery和分页插件
1 <script src="jquery-1.11.1.min.js"></script> 2 <script src="ruguoTextPager_1.0.js"></script> 3 <link rel="stylesheet" type="text/css" href="ruguoPager.css">
HTML结构 con中为正文内容,在需要分页的地方插入我自定义的分页符“ {ruguo:pager} ”,至于如果文中真的要出现这个字符串的话,请转义。
<div class="con" id="con"> <p>段落1</p>{ruguo:pager} <p>段落1</p> <p>段落1</p>{ruguo:pager} <p>段落1</p> </div> <div class="ruguoPager_red" id="pager"></div>
JS 初始化 实例化对象 pager,给对象需要自定义的属性赋值,不赋值的等于默认值,最后调用方法,对象作为实参传进去即可。
<script> var pager = new ruguoPager(); pager.objName="pager"; pager.pagerID="pager"; pager.txtID="con"; pager.toPoint="con" pager.showPageCount=3; pager.currPage=1; ruguoPagerLoad(pager); </script>
参数列表(参数名 默认值 含义 可选值 是否必须)
总结
通过编写这段代码学到了一些新东西,总结如下:
1,在JS中,replace一次只能替换第一个,若想替换所有需要用正则表达式或者用循环。
2,在JS中,split() 方法不仅适用于字符分割,同样适用于字符串。
3,在JS中,判断一个变量是否是数字类型,可以使用isNaN(),返回值为true代表不是数字。
4,本人才疏学浅,写代码纯属业余兴趣爱好,还望跟各位大神多多学习,存在的问题或者是更好的解决方案,还请不吝赐教,帮助我完善插件,网上成熟的插件有很多,本人献丑不敢说分享劳动成果工,只能说在学习中遇到的问题拿来给暂时还没有遇到的人,少走一些弯路,同时满足一下自己小小的成就感,仅此而已。
代码与文章都是博主辛苦一点一点码出来的,请尊重博主辛勤劳动,欢迎转载,转载请注明出处,更多交流请关注 D调码农的笔记簿 http://www.cnblogs.com/webconfig
相关文档下载
下载地址:http://files.cnblogs.com/webconfig/ruguoTextPager.rar
原文地址:http://www.cnblogs.com/webconfig/p/3870143.html
未注明转发、原文均为本站原创。分享本文请注明 原文链接 !
[基于html5、js的超强报表控件Echarts系列教程(1)-与其他报表的区别和介绍]
[基于html5、js的超强报表控件Echarts系列教程(2)-使用及环境部署]
[基于html5、js的超强报表控件Echarts系列教程(3)--事件使用]
[Echarts asp.net+ashx项目部署及代码实例(附demo)]
[echarts教程-asp.net+ashx实现堆积柱状图说明及demo下载]
[ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发(1)]
[ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件]
微信扫一扫,徜徉悠嘻网,您的休闲乐园
技术交流群:346717337
投稿:suchso@vip.qq.com
专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询