JS实现文章内容根据字数或标签翻页

 根据文章内容字数或特定的翻页标签(默认为[NEWPAGE]),自动生成翻页链接;

// JavaScript Document
function 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);" οnclick="GESPager.previous()">上一页</a>  ';     
		//else  
		//strDisplayPagenation+="上一页  ";
		for(var i=1;i<=pageSizeCount;i++) 
		{
			if(i!=currentPage)
				strDisplayPagenation+='<a href="javascript:void(0);" οnclick="GESPager.goto('+i+');">'+i+'</a>  ';
			else
				strDisplayPagenation+='<a href="javascript:void(0);" class="currpage">'+i+'</a>  ';
		}
		//if(currentPage&¤tPage!=pageSizeCount)
		//strDisplayPagenation+='<a href="javascript:void(0)" οnclick="GESPager.next()">下一页</a>  ';
		//else
		//strDisplayPagenation+="下一页  ";
		if(currentPage < pageSizeCount)
			strDisplayPagenation += '<a href="javascript:void(0);" οnclick="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);" οnclick="GESPager.goto(' + currentPage + ');">分页显示</a>';
};
GESPager.showall = function() {
	strDisplayContent = content.replace(/\[NEWPAGE\]/ig, "");
	GESPager.displayContent();
	divPager.innerHTML = '<a href="javascript:void(0);" οnclick="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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值