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执行速度全攻略(下)
Oct 09 PHP
mysql 搜索之简单应用
Apr 27 PHP
php相当简单的分页类
Oct 02 PHP
php生成xml简单实例代码
Dec 16 PHP
ThinkPHP3.1新特性之字段合法性检测详解
Jun 19 PHP
smarty模板引擎从php中获取数据的方法
Jan 22 PHP
PHP中实现Bloom Filter算法
Mar 30 PHP
PHP中两个float(浮点数)比较实例分析
Sep 27 PHP
学习php设计模式 php实现桥梁模式(bridge)
Dec 07 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
Feb 03 PHP
php使用curl通过代理获取数据的实现方法
May 16 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
Sep 01 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基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
php intval函数用法总结
2019/04/14 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
js 操作符汇总
2014/11/08 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
pandas参数设置的实用小技巧
2020/08/23 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
出国英文推荐信
2014/05/10 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
房产协议书范本
2014/10/18 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
入党转正申请书范文
2019/05/20 职场文书
年终工作总结范文
2019/06/20 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
详解NodeJS模块化
2021/06/15 NodeJs
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
Django路由层如何获取正确的url
2021/07/15 Python