长文章分页类

有些新闻内容比较长，我想分不同的几页来显示，简短的就可以一页，长点的可以随意分2页或者3页，求一个比较好的分页方式，或者一种思路。

通过编辑时手动插入特定字符串作为分页符，然后页面显示时判断分页。

本人始终认为我这个长文章分页类是最完美滴。
http://blog.csdn.net/xuStanly/archive/2006/09/10/1204808.aspx

分页有这么几个技术难点：

1、分段，就是上面说的希望段落1在第一页，段落2在第二页；这样的设计需要人为添加分页符号，然后程序判断分页；
2、文章中间存在html代码，比如文章是带Table的，你分页会造成html错误；没有Table，你分页在<span>中间也会带来相应的问题；这个还没有很好的解决办法；
3、还没有想到。。。

还是手动插入分页符比较好琢磨。
主要是怕编辑粘贴的不全。
要是怕半截表格打乱整个页面可以把内容放到<object></object>之间试试，如果该页内容里有半个<object>你就抱着编辑哭吧。
要是怕最后有半截html标签（型如<td style="结束的），就用正则去掉试试str=str.replace(/<[^>]*?$/gi,"")。

一个Htm长文章分页的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

* {

font-size:10.2pt;

font-family:tahoma;

line-height:150%;

}

.divContent

{

border:1px solid red;

background-color:#FFD2D3;

width:500px;

word-break:break-all;

margin:10px 0px 10px;

padding:10px;

}

</style>

</HEAD>

<BODY>

header

footer

<!--

s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";

function DHTMLpagenation(content){

with(this)

{

// client static html file pagenation

this.content=content;

this.contentLength=content.length;

this.pageSizeCount;

this.perpageLength=100;

//default perpage byte length.

this.currentPage=1;

//this.regularExp=/.+[\?\&]{1}page=(\d+)/;

this.regularExp=/\d+/;

this.divDisplayContent;

this.contentStyle=null;

this.strDisplayContent="";

this.divDisplayPagenation;

this.strDisplayPagenation="";

arguments.length==2?perpageLength=arguments[1]:'';

try{

divExecuteTime=document.createElement("DIV");

document.body.appendChild(divExecuteTime);

}

catch(e)

{

}

if(document.getElementById("divContent"))

{

divDisplayContent=document.getElementById("divContent");

}

else

{

try

{

divDisplayContent=document.createElement("DIV");

divDisplayContent.id="divContent";

document.body.appendChild(divDisplayContent);

}

catch(e)

{

return false;

}

if(document.getElementById("divPagenation"))

{

divDisplayPagenation=document.getElementById("divPagenation");

}

else

{

try

{

divDisplayPagenation=document.createElement("DIV");

divDisplayPagenation.id="divPagenation";

document.body.appendChild(divDisplayPagenation);

}

catch(e)

{

return false;

}

DHTMLpagenation.initialize();

return this;

}

};

DHTMLpagenation.initialize=function (){

with(this)

{

divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";

if(contentLength<=perpageLength)

{

strDisplayContent=content;

divDisplayContent.innerHTML=strDisplayContent;

return null;

}

pageSizeCount=Math.ceil((contentLength/perpageLength));

DHTMLpagenation.goto(currentPage);

DHTMLpagenation.displayContent();

}

};

DHTMLpagenation.displayPage=function (){

with(this)

{

strDisplayPagenation="分页：";

if(currentPage&&currentPage!=1)

strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>  ';

else

strDisplayPagenation+="上一页  ";

for(var i=1;i<=pageSizeCount;i++)

{

if(i!=currentPage)

strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>  ';

else

strDisplayPagenation+=i+"  ";

}

if(currentPage&&currentPage!=pageSizeCount)

strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>  ';

else

strDisplayPagenation+="下一页  ";

strDisplayPagenation+="共 "+pageSizeCount+" 页，每页"+perpageLength+" 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";

divDisplayPagenation.innerHTML=strDisplayPagenation;

}

};

DHTMLpagenation.previous=function (){

with(this)

{

DHTMLpagenation.goto(currentPage-1);

}

};

DHTMLpagenation.next=function (){

with(this)

{

DHTMLpagenation.goto(currentPage+1);

}

};

DHTMLpagenation.goto=function (iCurrentPage){

with(this)

{

startime=new Date();

if(regularExp.test(iCurrentPage))

{

currentPage=iCurrentPage;

strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);

}

else

{

alert("page parameter error!");

}

DHTMLpagenation.displayPage();

DHTMLpagenation.displayContent();

}

};

DHTMLpagenation.displayContent=function (){

with(this)

{

divDisplayContent.innerHTML=strDisplayContent;

}

};

DHTMLpagenation.change=function (iPerpageLength){

with(this)

{

if(regularExp.test(iPerpageLength))

{

DHTMLpagenation.perpageLength=iPerpageLength;

DHTMLpagenation.currentPage=1;

DHTMLpagenation.initialize();

}

else

{

alert("请输入数字");

}

};

// method

// DHTMLpagenation(strContent,perpageLength)

DHTMLpagenation(s,100);

//-->

</script>

</BODY>

posted on 2007-11-30 22:45 Olay2008 阅读(5952) 评论(1) 编辑收藏举报