FCKEditor+jQuery+PHP实现分页

一、插入新闻 

FCKEditor是一款很流行的即插即用WEB编辑器，它支持ASP、PHP、Java等语言。这里要介绍的是利用编辑器的“插入分页符”功能，实现页面的无刷新分页。

 

编辑新闻时，在需要插入分页的段落处插入分页符，保存即可。

 

二、读取新闻 

在读取新闻字段时，通过PHP分页函数对新闻字段数据进行处理，代码如下：

PHP代码

function  pageBreak( $content )
{
     $content    =   $content ;
     $pattern    =   " /<div style=\ " page - break - after :  always\ " ><span style=\ " display :  none\ " >&nbsp;<\/span><\/div>/ " ;
     $strSplit   =   preg_split ( $pattern ,   $content ,   - 1 ,  PREG_SPLIT_NO_EMPTY); 
     $count      =   count ( $strSplit );
     $outStr     =   "" ; 
     $i          =   1 ;
    
     if  ( $count   >   1  ) {
         $outStr     =   " <div id='page_break'> " ;
         foreach ( $strSplit   as   $value ) {
             if  ( $i   <=   1 ) {
                 $outStr   .=   " <div id='page_ $i '> $value </div> " ;
            }  else  {
                 $outStr   .=   " <div id='page_ $i ' class='collapse'> $value </div> " ;
            }
             $i ++ ;
        }
        
         $outStr   .=   " <div class='num'> " ;
         for  ( $i   =   1 ;  $i   <=   $count ;  $i ++ ) {
             $outStr   .=   " <li> $i </li> " ;
        }
         $outStr   .=   " </div></div> " ;
         return   $outStr ;
    }  else  {
         return   $content ;
    }
}

 

  

CSS样式控制分页的样式，代码如下：

CSS代码

#page_break  {
    
}
#page_break .collapse  {
    display :  none ;
}
#page_break .num  {
    padding :  10px 0 ;
    text-align :  center ;
}
#page_break .num li {
    display :  inline ;
    margin :  0 2px ;
    padding :  3px 5px ;
    border :  1px solid #FF7300 ;
    background-color :  #fff ;
    
    color :  #FF7300 ;
    text-align :  center ;
    cursor :  pointer ;
    font-family :  Arial ;
    font-size :  12px ;
    overflow :  hidden ;
}
#page_break .num li.on {
    background-color :  #FF7300 ;
    
    color :  #fff ;
    font-weight :  bold ;
}

 

 使用jQuery代码实现分页，代码如下：

Javascript代码

$(document).ready( function (){
    $( ' #page_break .num li:first ' ).addClass( ' on ' );
        
    $( ' #page_break .num li ' ).click( function (){
         // 隐藏所有页内容
        $( " #page_break div[id^='page_'] " ).hide();
                
         // 显示当前页内容。
         if  ($( this ).hasClass( ' on ' )) {
            $( ' #page_break #page_ '   +  $( this ).text()).show();            
        }  else  {
            $( ' #page_break .num li ' ).removeClass( ' on ' );
            $( this ).addClass( ' on ' );
            $( ' #page_break #page_ '   +  $( this ).text()).fadeIn( ' normal ' );
        }
    });
});

 

 

根据以上步骤，即可实现使用FCKEditor+jQuery+PHP实现无刷新页面分页。