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 相关文章推荐
用ADODB来让PHP操作ACCESS数据库的方法
Dec 31 PHP
为PHP初学者的8点有效建议
Nov 20 PHP
FirePHP 推荐一款PHP调试工具
Apr 23 PHP
pdo中使用参数化查询sql
Aug 11 PHP
php截取中文字符串不乱码的方法
Dec 25 PHP
PHP开启opcache提升代码性能
Apr 26 PHP
js代码实现微博导航栏
Jul 30 PHP
深入浅析php json 格式控制
Dec 24 PHP
PHP二维数组去重实例分析
Nov 18 PHP
PHP调用接口API封装的例子
Oct 11 PHP
PHP与SQL语句写一句话木马总结
Oct 11 PHP
基于laravel belongsTo使用详解
Oct 18 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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
numpy中索引和切片详解
2017/12/15 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
大学生自荐信
2013/12/11 职场文书
校园达人秀策划书
2014/01/12 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
公司的力量观后感
2015/06/05 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书