仓酷云

标题: PHP教程之利用jQuery和PHP将Fckeditor公布的内容... [打印本页]

作者: 小妖女 时间: 2015-1-16 22:15
标题: PHP教程之利用jQuery和PHP将Fckeditor公布的内容...
我先解释一下我的学习思路。
Fckeditor是一款所见即所得的WEB编纂器，它常被用作背景编纂公布信息。当要公布的内容良多很长时，就要思索前台显现的分页效果了，本文将利用jQuery，并分离PHP，将Fckeditor公布的内容举行分页，而且完成无革新切换页面。
关于Fckeditor利用，笔者不想多言。本文假定你是WEB开辟职员，把握了jQuery和PHP相干常识，而且熟知Fckeditor的设置和利用。
Fckeditor编纂器有一个拔出分页符的功效按钮，点击该按钮，将会在内容区拔出一条分页符，以下图白色框标注：

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

<divstyle="page-break-after:always"><spanstyle="display:none"></span></div>

复制代码

我们实践使用情形是如许的：背景经由过程Fckeditor编纂器公布的内容，提交到数据库，前台经由过程PHP链接数据库猎取公布的内容，然后将长内容举行支解，并举行分页。
PHP

PHP将内容支解的办法以下：

functionpageBreak($content){$content=$content;$pattern="/<divstyle="page-break-after:always"><spanstyle="display:none"></span></div>/";$strSplit=preg_split($pattern,$content,-1,PREG_SPLIT_NO_EMPTY);$count=count($strSplit);$outStr="";$i=1;if($count>1){$outStr="<divid=page_break>";foreach($strSplitas$value){if($i<=1){$outStr.="<divid=page_$i>$value</div>";}else{$outStr.="<divid=page_$iclass=collapse>$value</div>";}$i++;}$outStr.="<divclass=num>";for($i=1;$i<=$count;$i++){$outStr.="<li>$i</li>";}$outStr.="</div></div>";return$outStr;}else{return$content;}}

复制代码

能够看出啦，上述代码中的$pattern就是Fckeditor编纂器天生的分页符代码，然后PHP经由过程preg_split()函数比对内容，以分开符为分界点，将内容支解为多个page_，而且天生分页导航按钮。利用时只需挪用pageBreak($content)便可。
CSS

我们经由过程CSS来出现分页按钮的作风，固然你能够修正这些CSS，定制你想要的表面。

#page_break{}#page_break.collapse{display:none;}#page_break.num{padding:10px0;text-align:center;}#page_break.numli{display:inline;margin:02px;padding:3px5px;border:1pxsolid#abcee4;background-color:#fff;color:#369;text-align:center;cursor:pointer;overflow:hidden;}#page_break.numli.on{background-color:#369;color:#fff;font-weight:bold;}

复制代码

jQuery

$(function(){$(#page_break.numli:first).addClass(on);$(#page_break.numli).click(function(){//埋没一切页内容$("#page_breakdiv[id^=page_]").hide();//显现以后页内容。if($(this).hasClass(on)){$(#page_break#page_+$(this).text()).show();}else{$(#page_break.numli).removeClass(on);$(this).addClass(on);$(#page_break#page_+$(this).text()).fadeIn(normal);}});});

复制代码

我们利用jQuery将分页导航按钮的第一页设置为以后形态，然后经由过程单击分页按钮，切换按钮的形态，而且显现对应页的内容。
特地说一下，文章题目说的是无革新，实在这不是Ajax的无革新效果，而是经由过程jQuery把持页面内容的显现与埋没，页面内容是一次性读取载进的。
说说这一个月左右的学习情况和心得吧！我个人认为，既然决定了去做一件事，那就要以认真的态度去对待！既然决定来学习了，那不管当初是抱着怎样的心态来到这个培训班的，都要让自己认真的投入到学习中。

作者: 若天明 时间: 2015-1-19 06:25
我还是推荐用firefox ，配上firebug 插件调试js能省下不受时间。谷歌的浏览器最好也不少用，因为谷歌的大侠们实在是太天才啦，把一些原来的js代码加了一些特效。

作者: 金色的骷髅 时间: 2015-1-24 14:27
这些都是最基本最常用功能，我们这些菜鸟在系统学习后，可以先对这些功能深入研究。

作者: 乐观 时间: 2015-2-1 17:03
Apache不是非得用80或者8080端口的，我刚开始安得时候就是80端口老占用，就用了个 81端口，结果照常，就是输localhost的时候，应该输入为 localhost:81

作者: 活着的死人 时间: 2015-2-7 11:49
开发工具也会慢慢的更专业，每个公司的可能不一样，但是zend studio是个大伙都会用的。

作者: 小魔女 时间: 2015-2-21 20:36
我还是强烈建议自己搭建php环境。因为在搭建的过程中你会遇到一些问题，通过搜索或是看php手册解决问题后，你会更加深刻的理解它们的工作原理，了解到php配置文件中的一些选项设置。

作者: 兰色精灵 时间: 2015-3-6 21:31
对于初学者来说不推荐去拿钱买的。当然如果一个网站你经常去用，而且里面的资料也比较有用，最好还是买个会员比较好，毕竟那些也是别人的工作成果。

作者: 老尸 时间: 2015-3-13 21:38
Apache不是非得用80或者8080端口的，我刚开始安得时候就是80端口老占用，就用了个 81端口，结果照常，就是输localhost的时候，应该输入为 localhost:81

作者: 柔情似水 时间: 2015-3-20 19:51
使用 jquery 等js框架的时候，要随时注意浏览器的更新情况，不然很容易发生框架不能使用。

欢迎光临仓酷云 (http://ckuyun.com/)