Tag: 编辑器

FCKEditor+jQuery+PHP实现分页

没有评论

2010 年 12 月 04 日 at 下午 3:38分类:CSS | JavaScript | jQuery | PHP

一、插入新闻
FCKEditor是一款很流行的即插即用WEB编辑器,它支持ASP、PHP、Java等语言。这里要介绍的是利用编辑器的“插入分页符”功能,实现页面的无刷新分页。
编辑新闻时,在需要插入分页的段落处插入分页符,保存即可。
二、读取新闻
在读取新闻字段时,通过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样式控制分页的样式,代码如下

#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代码实现分页,代码如下:

$(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实现无刷新页面分页。

[notepad++]优秀的文本编辑器之一

没有评论

2010 年 11 月 07 日 at 下午 12:09分类:WEB开发

http://blog.sina.com.cn/s/blog_46dac66f0100020s.html

[notepad++]优秀的文本编辑器之一