jQuery PHP (Fckeditor)发布的内容刷新分页

本文将使用jQuery和PHP对Fckeditor发布的内容进行分页，并在不刷新的情况下切换页面。本文假设您是一名WEB开发人员，已经掌握了jQuery和PHP，并且熟悉Fckeditor的配置和使用。Fckeditor编辑器有一个插入分页符的功能按钮。单击此按钮，将在内容区域插入分页符，如下图红色框中所示：

生成的对应于分页符的html代码是：

div style=' page-break-after : always ' span style=' display : none '/span/div我们的实际应用如下：将后台的Fckeditor编辑器发布的内容提交到数据库中，通过前台的数据库与PHP链接得到发布的内容，然后对长内容进行分割分页。PHP将内容划分如下：

函数page break($ content){ $ content=$ content；$ pattern='/div style=\ ' page-break-after :始终' span style=\ ' display : none \ ' \/span \/div/'；$strSplit=preg_split($pattern，$content，-1，PREG _ SPLIT _ NO _ EMPTY)；$ count=count($ strSplit)；$ outStr=$ I=1；if($ count 1){ $ OutTr=' div id=' page _ break '；foreach($ strSplit as $ value){ if($ I=1){ $ OutTr。=' div id=' page _ $ I ' $ value/div '；} else { $ outStr。=' div id=' page _ $ I ' class=' collapse ' $ value/div '；} $ I；} $ outStr。=' div class=' numfor($ I=1；$ i=$ count$ I){ $ OutTr。=' Li $ I/Li '；} $ outStr。='/div/div '；返回$ outStr} else { return $ content}}可以看到上面代码中的$模式是由Fckeditor编辑器生成的分页符代码，然后PHP将内容与preg_split()函数进行比较，将内容划分为多个pages _并生成分页导航按钮。使用时，只需调用pageBreak($content)。我们使用CSS来呈现分页按钮的样式。当然，您可以修改这些CSS来自定义您想要的外观。

#page_break {} #page_break。折叠{display:无；} #page_break。num { padd : 10px 0；文本对齐：中心；} #page_break。num li { display: inlinemargin: 0 2pxpadding: 3px 5pxborder:1px实心# abcee4背景-color : # fff；color: # 369文本对齐：中心；cursor:指针；飞越：隐藏；} #page_break。num Li . on { background-color : # 369；color: # ffffont-weight:粗体；} jQuery

$(function(){ $('#page_break。num li:first ')。add CLaSS(' on ')；$ ('# page _ break.numli ')。单击(function(){//隐藏所有页面内容$ ('# page _ break div [id=' page _']')。hide()；//显示当前页面内容。if ($(this)。has class(' on '){ $(' # page _ break # page _ ' $(this)。text())。show()；} else { $('#page_break。num Li’)。remove CLaSS(' on ')；$(这个)。add CLaSS(' on ')；$('#page_break #page_' $(这)。text())。fadeIn('正常')；} });});我们使用jQuery将分页导航按钮的第一页设置为当前状态，然后点击分页按钮切换按钮的状态，显示相应页面的内容。对了，文章标题说不刷新，但其实并不是Ajax的不刷新效果，而是页面内容的显示和隐藏是由jQuery控制的，页面内容一次读取和加载。

关于jquery不刷新分页的文章很多，可以搜索之前的文章，可能会更有启发。