单篇文章JS模拟分页

废话部分

前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式。于是稍加改动,做了一个单篇文章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} ”,至于如果文中真的要出现这个字符串的话,请转义。

1 <div class="con" id="con">
2 <p>段落1</p>{ruguo:pager}
3 <p>段落1</p>
4 <p>段落1</p>{ruguo:pager}
5 <p>段落1</p>
6 </div>
7 <div class="ruguoPager_red" id="pager"></div>

JS 初始化  实例化对象 pager,给对象需要自定义的属性赋值,不赋值的等于默认值,最后调用方法,对象作为实参传进去即可。

 1 <script>
 2 var pager = new ruguoPager();
 3 pager.objName="pager";
 4 pager.pagerID="pager";
 5 pager.txtID="con";
 6 pager.toPoint="con"
 7 pager.showPageCount=3;
 8 pager.currPage=1;
 9 ruguoPagerLoad(pager);
10 </script>

参数列表(参数名  默认值  含义  可选值  是否必须)

sig="{ruguo:pager}",   //分页符 string
objName="",   //对象名  string
pagerID="",  //分页容器ID  string  必须
txtID="",  //正文容器ID  string  必须
currPage=1,  //当前页  int
itemCount=0,  //总分段(页)数    无需定义,历史遗留问题
showPageCount="3";  //页面显示数量  int
toPoint="",  //点击返回锚点名称  string
contents="",  //正文内容,一般情况下无需定义

isShowFirstPage="always",  //是否显示首页  always,auto,none
isShowPreviousPage="always",   //是否显示上一页  always,auto,none
isShowNextPage="always",  //是否显示下一页  always,auto,none
isShowLastPage="always",  //是否显示尾页  always,auto,none
isShowPages="always",  //是否显示页码  always,auto_0,auto_1,none
isShowAll="always",   //是否显示全文  always,auto,none
isShowGo="always"  //是否显示跳转  always,auto,none

总结

通过编写这段代码学到了一些新东西,总结如下:

1,在JS中,replace一次只能替换第一个,若想替换所有需要用正则表达式或者用循环。

2,在JS中,split() 方法不仅适用于字符分割,同样适用于字符串。

3,在JS中,判断一个变量是否是数字类型,可以使用isNaN(),返回值为true代表不是数字。

4,本人才疏学浅,写代码纯属业余兴趣爱好,还望跟各位大神多多学习,存在的问题或者是更好的解决方案,还请不吝赐教,帮助我完善插件,网上成熟的插件有很多,本人献丑不敢说分享劳动成果工,只能说在学习中遇到的问题拿来给暂时还没有遇到的人,少走一些弯路,同时满足一下自己小小的成就感,仅此而已。

代码与文章都是博主辛苦一点一点码出来的,请尊重博主辛勤劳动,欢迎转载,转载请注明出处,更多交流请关注 D调码农的笔记簿 http://www.cnblogs.com/webconfig

相关文档下载

下载地址:http://files.cnblogs.com/webconfig/ruguoTextPager.rar

单篇文章JS模拟分页,布布扣,bubuko.com

时间: 2024-08-05 10:32:37

单篇文章JS模拟分页的相关文章

js对文章内容进行分页示例代码

这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下 Thinkphp中文章显示代码: 代码如下: <div id="showContent">{$article.content|htmlspecialchars_decode}</div> <div id="articlePages"></div> js实现代码: 代码如下: <script type="text/javascr

原生JS实现分页效果1.0

不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ margin:20px 0; } #

原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ m

由chrome剪贴板问题研究到了js模拟鼠标键盘事件

写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.clipboardData.getData("Text") 可是在chrome下面就行不通了,chrome下面没有类似ie的这种方法,那应该怎么办呢,百度了一下,发现还真有办法. 只要在HTML界面上放上一个text类型的控件,如下所示 <textarea id="textAre

微信公众号最新改版功能:可删除单篇文章

随着微信公众平台使用群体的增加,微信公众平台功能开发成了互联网行业人士最关注的事情.近日,微信公众平台不断采取新措施以及推出新功能,来保护消费者的权益.日前微信发布公告称将严打非法分销公众号,一经发现并将永久封号并发布<微信公众平台关于整顿发送低俗类文章行为的公告>,宣布将坚决打击涉嫌淫秽.色情及低俗等信息,并对发送低俗文章的行为进行整顿,包括封号.清空内容.注销账号等.随后,微信又推出新功能,支持单篇文章的删除. 在微信公众平台已推送的多图文中突然发现某篇文章有误怎么办?全部删除?现在不用纠

JS模拟时钟

<html> <head> <title>js模拟时钟</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body onLoad="setInterval(setTimeSpan,1000);"> <span style="fon

静态书架和js模拟翻书效果

书籍图片随便找了个,有点难看,须要的自己替换个好看点的png格式图片 源代码下载:http://download.csdn.net/detail/sweetsuzyhyf/7604091 静态书架和js模拟翻书效果,布布扣,bubuko.com

纯js模拟 radio和checkbox控件

代码待优化,功能实现了,不兼容ie8以上, 相同name的radio可以实现切换的操作, 分享代码,共同学习进步 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> .radiobox, .checkbox { width: 10px; height: 10px; padding: 2px; borde

js模拟抛出球运动

js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js模拟抛出球运动</titl