jQuery+PHP发布的内容进行无刷新分页(Fckeditor)


Posted in PHP onOctober 22, 2015

这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。
 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。
Fckeditor编辑器有一个插入分页符的功能按钮,点击该按钮,将会在内容区插入一条分页符,如下图红色框标注:

jQuery+PHP发布的内容进行无刷新分页(Fckeditor)

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

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

我们实际应用情况是这样的:后台通过Fckeditor编辑器发布的内容,提交到数据库,前台通过PHP链接数据库获取发布的内容,然后将长内容进行分割,并进行分页。
PHP
PHP将内容分割的方法如下:

function pageBreak($content){ 
 $content = $content; 
 $pattern = "/<div style=\"page-break-after: always\"><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 ) { 
  $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; 
 } 
}

可以看出啦,上述代码中的$pattern就是Fckeditor编辑器生成的分页符代码,然后PHP通过preg_split()函数比对内容,以分隔符为分界点,将内容分割为多个page_,并且生成分页导航按钮。使用时只需调用pageBreak($content)即可。
CSS
我们通过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 #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(){ 
  //隐藏所有页内容 
  $("#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'); 
  } 
 }); 
});

我们使用jQuery将分页导航按钮的第一页设置为当前状态,然后通过单击分页按钮,切换按钮的状态,并且显示对应页的内容。
顺便说一下,文章标题说的是无刷新,其实这不是Ajax的无刷新效果,而是通过jQuery控制页面内容的显示与隐藏,页面内容是一次性读取载入的。

关于jquery无刷新分页有许多文章,大家可以搜搜之前的文章,或许会有更大的启发。

PHP 相关文章推荐
精通php的十大要点(上)
Feb 04 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
Apr 09 PHP
PHP数据类型之布尔型的介绍
Apr 28 PHP
解析coreseek for sphinx的使用
Jun 21 PHP
php修改NetBeans默认字体的大小
Jul 02 PHP
基于PHP技术开发客服工单系统
Jan 06 PHP
一个简单安全的PHP验证码类、PHP验证码
Sep 24 PHP
Laravel中间件实现原理详解
Oct 09 PHP
Yii框架弹出框功能示例
Jan 07 PHP
PHP验证终端类型是否为手机的简单实例
Feb 07 PHP
php设计模式之策略模式应用案例详解
Jun 17 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
Feb 15 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
Oct 22 #PHP
PHP实现无限级分类(不使用递归)
Oct 22 #PHP
PHP实现递归无限级分类
Oct 22 #PHP
php防止网站被攻击的应急代码
Oct 21 #PHP
PHP统计当前在线用户数实例讲解
Oct 21 #PHP
php精确的统计在线人数的方法
Oct 21 #PHP
为你总结一些php信息函数
Oct 21 #PHP
You might like
php 分库分表hash算法
2009/11/12 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Vue的轮播图组件实现方法
2018/03/03 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Python如何发送与接收大型数组
2020/08/07 Python
python打包多类型文件的操作方法
2020/09/21 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
保险内勤岗位职责
2014/04/05 职场文书
领导参观欢迎词
2015/01/26 职场文书
皇城相府导游词
2015/02/06 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
pandas中关于apply+lambda的应用
2022/02/28 Python