Fckeditor是一款所見即所得(de)的WEB編輯器(qì)，它常被用作(zuò)後台編輯發布信息。當要發布的內(nèi)容很(hěn)多(duō)很(hěn)長時(shí)，就要考慮前台顯示的分頁效果了，本文将使用jQuery，并結合PHP，将Fckeditor發布的內(nèi)容進行(xíng)分頁，并且實現無刷新切換頁面。

關于Fckeditor使用，筆者不想多(duō)言。本文假設你(nǐ)是WEB開(kāi)發人(rén)員，掌握了jQuery和(hé)PHP相關知識，并且熟知Fckeditor的配置和(hé)使用。

Fckeditor編輯器(qì)有(yǒu)一個(gè)插入分頁符的功能按鈕，點擊該按鈕，将會(huì)在內(nèi)容區(qū)插入一條分頁符，如下圖紅色框标注：

分頁符對應生(shēng)成的html代碼是：

我們實際應用情況是這樣的：後台通(tōng)過Fckeditor編輯器(qì)發布的內(nèi)容，提交到數(shù)據庫，前台通(tōng)過PHP鏈接數(shù)據庫獲取發布的內(nèi)容，然後将長內(nèi)容進行(xíng)分割，并進行(xíng)分頁。

PHP

PHP将內(nèi)容分割的方法如下：

function pageBreak($content){
    $content  = $content;
    $pattern  = "/
 
<\/span><\/div>/";
    $strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY);
    $count    = count($strSplit);
    $outStr   = "";
    $i        = 1;

    if ($count > 1 ) {
        $outStr   = "

	";
        foreach($strSplit as $value) {
            if ($i <= 1) {
                $outStr .= "
	

		$value
	
";
            } else {
                $outStr .= "
	

		$value
	
";
            }
            $i++;
        }

        $outStr .= "
	

		";
        for ($i = 1; $i <= $count; $i++) {
            $outStr .= "
		

			$i
		
";
        }
        $outStr .= "
	


";
        return $outStr;
    } else {
        return $content;
    }
}
	

可(kě)以看出啦，上(shàng)述代碼中的$pattern就是Fckeditor編輯器(qì)生(shēng)成的分頁符代碼，然後PHP通(tōng)過preg_split()函數(shù)比對內(nèi)容，以分隔符為(wèi)分界點，将內(nèi)容分割為(wèi)多(duō)個(gè)page_，并且生(shēng)成分頁導航按鈕。使用時(shí)隻需調用pageBreak($content)即可(kě)。

CSS

我們通(tōng)過CSS來(lái)呈現分頁按鈕的風格，當然你(nǐ)可(kě)以修改這些(xiē)CSS，定制(zhì)你(nǐ)想要的外觀。

#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 #abcee4;
background-color: #fff;color: #369;text-align: center;cursor: pointer;overflow: hidden;}
#page_break .num li.on{background-color: #369;color: #fff;font-weight: bold;}

jQuery

$(function(){
    $('#page_break .num li:first').addClass('on');

    $('#page_break .num li').click(function(){
        //隐藏所有(yǒu)頁內(nèi)容
        $("#page_break div[id^='page_']").hide();

        //顯示當前頁內(nèi)容。
        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');
        }
    });
});

我們使用jQuery将分頁導航按鈕的第一頁設置為(wèi)當前狀态，然後通(tōng)過單擊分頁按鈕，切換按鈕的狀态，并且顯示對應頁的內(nèi)容。請(qǐng)看DEMO演示。

順便說一下，文章标題說的是無刷新，其實這不是Ajax的無刷新效果，而是通(tōng)過jQuery控制(zhì)頁面內(nèi)容的顯示與隐藏，頁面內(nèi)容是一次性讀取載入的。