JS实现文章内容根据字数或标签翻页
来源:互联网 发布:机器人赛道编程 编辑:程序博客网 时间:2024/05/29 16:13
根据文章内容字数或特定的翻页标签(默认为[NEWPAGE]),自动生成翻页链接;
// JavaScript Documentfunction GESPager(){ // client static html file pagenation this.contDiv=document.getElementById('memcontent'); this.content=this.contDiv.innerHTML; this.contentLength=content.length;this.divPager = document.getElementById('contpager'); this.pageSizeCount=1; this.perpageLength=300;//default perpage by length. this.currentPage=1; this.regularExp=/\d+/;//this.regularExp=/.+[\?\&]{1}page=(\d+)/; this.divContentArray=new Array(); this.strDisplayContent=""; this.strDisplayPagenation=""; arguments.length==2?perpageLength=arguments[1]:''; GESPager.initialize(); return this;};GESPager.initialize=function (){ if(contentLength<=perpageLength) { strDisplayContent=content; contDiv.innerHTML=strDisplayContent; return null; } var contentArr=new Array(); var contentArrTemp=new Array(); if(content.toUpperCase().indexOf("[NEWPAGE]")>0) { contentArrTemp=content.split("[NEWPAGE]"); pageSizeCount=contentArrTemp.length;var pct = 0; for(i=0;i<pageSizeCount;i++){pct++;if(contentArrTemp[i].length == 0){ i++; }contentArr[pct]=contentArrTemp[i]; }pageSizeCount = pct; } else { re=/<table[^>]*>[\s\S]*?<\/table>|<div[^>]*>[\s\S]*?<\/div>|<p[^>]*>[\s\S]*?<\/p>|.*/ig; contentArray=content.match(re); var str="",contemp=""; for(i=0;i<contentArray.length;i++){contemp = contentArray[i];if(contemp.length == 0){continue;} if(str.length<=perpageLength) { str+=contemp; } else { contentArr[pageSizeCount]=str; str=contemp; pageSizeCount++; } } contentArr[pageSizeCount]=str; } divContentArray=contentArr; GESPager.goto(currentPage); GESPager.displayContent(); }; GESPager.displayPage=function (){if(pageSizeCount > 1){strDisplayPagenation=""; //if(currentPage&¤tPage!=1) //strDisplayPagenation+='<a href="javascript:void(0);" onclick="GESPager.previous()">上一页</a> '; //else //strDisplayPagenation+="上一页 ";for(var i=1;i<=pageSizeCount;i++) {if(i!=currentPage)strDisplayPagenation+='<a href="javascript:void(0);" onclick="GESPager.goto('+i+');">'+i+'</a> ';elsestrDisplayPagenation+='<a href="javascript:void(0);" class="currpage">'+i+'</a> ';}//if(currentPage&¤tPage!=pageSizeCount)//strDisplayPagenation+='<a href="javascript:void(0)" onclick="GESPager.next()">下一页</a> ';//else//strDisplayPagenation+="下一页 ";if(currentPage < pageSizeCount)strDisplayPagenation += '<a href="javascript:void(0);" onclick="GESPager.showrest();">余下全文</a>';divPager.innerHTML=strDisplayPagenation;divPager.style.display = "block";}};GESPager.showrest = function() {strDisplayContent = "";for(var i = currentPage + 1;i<=pageSizeCount;i++){strDisplayContent += divContentArray[i];}GESPager.displayContent();divPager.innerHTML = '<a href="javascript:void(0);" onclick="GESPager.goto(' + currentPage + ');">分页显示</a>';};GESPager.showall = function() {strDisplayContent = content.replace(/\[NEWPAGE\]/ig, "");GESPager.displayContent();divPager.innerHTML = '<a href="javascript:void(0);" onclick="GESPager.goto(' + currentPage + ');">分页显示</a>';};GESPager.previous=function (){ GESPager.goto(currentPage-1);};GESPager.next=function (){ GESPager.goto(currentPage+1);};GESPager.goto=function (iCurrentPage){ startime=new Date(); if(regularExp.test(iCurrentPage)) { currentPage=iCurrentPage; strDisplayContent=divContentArray[currentPage]; } else { alert("page parameter error!"); } GESPager.displayPage(); GESPager.displayContent();};GESPager.displayContent=function (){ contDiv.innerHTML=strDisplayContent;};GESPager.change=function (iPerpageLength){ if(regularExp.test(iPerpageLength)) { GESPager.perpageLength=iPerpageLength; GESPager.currentPage=1; GESPager.initialize(); } else { alert("请输入数字"); }};// GESPager(strContent,perpageLength)
链接CSS:
#contpager{font-size:12px;text-align:center;word-wrap:break-word;clear:both;padding:0 12px 10px; display:none;}#contpager a{display:inline-block;text-decoration:none;line-height:18px;padding:2px 8px;margin:5px 4px 5px 0;background-color:#fff;border:1px solid #009ad9;text-align:center;}#contpager a:visited{color:#1f3a87}#contpager a:hover{color:#fff;background-color:#009ad9;}#contpager a.currpage{font-weight:bold;border:1px solid #009ad9;background-color:#009ad9;color:#fff;padding:2px 7px;}#contpager a.currpage:visited{color:#fff;}
效果图:
使用方法:
1、文章内容必须包含在ID为memcontent的容器中;
2、翻页链接容器ID为contpager;
3、在Body结束标签前调用<script language="javascript">GESPager();</script>即可;
DEMO
- JS实现文章内容根据字数或标签翻页
- 文章,记录按内容分页显示,根据文章内容按字数进行分页
- 文章,记录按内容分页显示,根据文章内容按字数进行分页
- 文章,记录按内容分页显示,根据文章内容按字数进行分页
- js实现翻页效果
- js翻页效果实现
- cocos2d - JS 实现翻页效果
- 使用JS或JQUERY,根据name属性获取标签的值
- JS加jquery实现标签元素的显示或隐藏
- js 实现textarea限制输入字数
- js解决文章内容分页
- UILabel根据字数多少自动实现适应高度
- JS实现左右键翻页功能
- js实现百度搜索结果翻页效果
- javaScript+turn.js实现图书翻页效果
- 用js实现定时自动翻页
- 织梦dedecms|文章内容页标签
- 文章内容分页功能实现
- setTimeout和setInterval的使用
- PeopleTools Security
- 海量数据处理专题(三)——Hash
- Java中的内部类和反射
- AS3中 is,as,typeof的区别
- JS实现文章内容根据字数或标签翻页
- .Net Web项目安装包制作一(转)
- win7_Local_kernel_debug
- Android Layout:FrameLayout
- 海量数据处理专题(四)——Bit-map
- 黑马程序员_java里面字符流和字节流的区别
- 安全完整性等级
- 磁盘配额
- MSSQL注入经典语句