注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

古城风~~~

竹密无妨溪水过,天高不碍白云飞。这天下总有一份是属于我古城的天地!

 
 
 

日志

 
 

长文章分页显示  

2009-07-19 17:37:43|  分类: java/jsp |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://ccp330.blog.51cto.com/254121/180437

今天上级要求实现对长文章的分段显示,在网上找了些代码下来不是运行不了就是不会自己的要求。所以最后还是自己写。对长文章的分页时,如果都是字符而没有html标记的话,可以通过统计字符的个数来分页,但实际上我们后台中一般都用一些编辑器,几乎都带有html标记,所以只好用JavaScript中的split函数利用一些特殊的字符来分页,例如在后台添加文字时,在想要分段的位置添加“@@@”作为分段标记,用这种方法不会打断到html标记,除非你是故意的,废话少说,具体代码和解释如下所示。

 

 

<%

       ‘rs("content")从数据库拿出来的内容,把影响的符号替换掉。

       ‘双引号影响字符串,把字符串切断而不能正常输入整段,所以要替换

       ‘回车键也会影响代码的正常运行。不信你自己试试

       news=Replace(Replace(rs("content"),"""","'"),vbCrLf,"&nbsp;")

%>                                                         

                                                              

<!--内容开始(客户端方式)-->                                                            

                                          <script language="javascript">

                                          <!--

                                          //内容分段保存在数组中

                                          var content = new Array();

                                          var pageTotal = 1;

                                          var noMsg = "";

                                                 function initContent(){

                                                 if(document.getElementById){

                                                        //内容分段保存在数组中。content[0]为开始,以@@@

                                                        //为分组条件

                                                        content = "<%=news%>".split("@@@");

                                                        //数组的大小就是页数的大小

                                                        pageTotal = content.length;

                                                        //默认把第一页输出

       document.getElementById("newsContent").innerHTML=content[0];

                                                        for(i=1;i<=pageTotal;i++){

                                                               if(i==1){

                                                                      noMsg="<span id=\"a"+i+"\" style=\"color:#FF0000\">"+i+"</span>";

                                                               }else{

                                                                      noMsg=noMsg+" " + "<span id=\"a"+i+"\" onClick=\"getContent("+i+")\" onMouseOver=\"comein('a"+i+"')\" onmouseout=\"getout('a"+i+"')\">"+i+"</span>";

                                                               }

                                                        }

                                                        document.getElementById("no").innerHTML=noMsg;

                                                        }

                                                 }

                                                 //打开页面时自动加载运行函数

                                                 window.onload=initContent;

                                                

                                                 //点击数字时显示对应的页

                                                 function getContent(noID){

                                                        noMsg="";

                                                        n = noID - 1;

                                                        document.getElementById("newsContent").innerHTML=content[n];

                                                        for(i=1;i<=pageTotal;i++){

                                                               if(i==noID){

                                                                      noMsg=noMsg+" "+"<span id=\"a"+i+"\" style=\"color:#FF0000\">"+i+"</span>";

                                                               }else{

                                                                      noMsg=noMsg+" "+"<span id=\"a"+i+"\" onClick=\"getContent("+i+")\" onMouseOver=\"comein('a"+i+"')\" onmouseout=\"getout('a"+i+"')\">"+i+"</span>";

                                                               }

                                                        }

                                                        document.getElementById("no").innerHTML=noMsg;

                                                 }

                                                

                                                 function comein(noid) {

                                                        //鼠标在数字上变成手型

                                                        document.getElementById(noid).style.cursor="hand";

                                                        //alert(noid+"in");

                                                 }

                                                 function getout(noid) {

                                                        //鼠标离开数字变回默认

                                                        //alert(noid+"out");

                                                        document.getElementById(noid).style.cursor="default";

                                                 }

                                          -->

                                          </script>

<!--内容结束-->   

                                         

<div id="newsContent"><!--内容的显示--></div>

<div id="no" align="right"><!--页面编号--></div>

 

 

 

显示结果:图片一

 

长文章分页显示 - 古城 -     ~~~古城风~~~

 

图片二:

长文章分页显示 - 古城 -     ~~~古城风~~~

本文出自 “IT新人类<-->软硬空间” 博客,请务必保留此出处http://ccp330.blog.51cto.com/254121/180437本文出自 51CTO.COM技术博客

  评论这张
 
阅读(413)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017