首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用jQuery和PHP将Fckeditor发布的内容进行无刷新分页

作者：倒颠0 | 来源：互联网 | 2013-03-22 17:12
Fckeditor是一款所见即所得的WEB编辑器，它常被用作后台编辑发布信息。当要发布的内容很多很长时，就要考虑前台显示的分页效果了，本文将使用jQuery，并结合PHP，将Fckeditor发布的内容进行分页，并且实现无刷细说PHPhttp://www.xishuophp.com/

Fckeditor是一款所见即所得的WEB编辑器，它常被用作后台编辑发布信息。当要发布的内容很多很长时，就要考虑前台显示的分页效果了，本文将使用jQuery，并结合PHP，将Fckeditor发布的内容进行分页，并且实现无刷新切换页面。

关于Fckeditor使用，笔者不想多言。本文假设你是WEB开发人员，掌握了jQuery和PHP相关知识，并且熟知Fckeditor的配置和使用。

Fckeditor编辑器有一个插入分页符的功能按钮，点击该按钮，将会在内容区插入一条分页符，如下图红色框标注：

\

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

 
 
 

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

 

PHP

PHP将内容分割的方法如下： 

 
function pageBreak($content){ 
    $content  = $content; 
    $pattern  = "/  
<\/span><\/div>/"; 
    $strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY); 
    $count    = count($strSplit); 
    $outStr   = ""; 
    $i        = 1; 
 
    if ($count > 1 ) { 
        $outStr   = ""; 
        foreach($strSplit as $value) { 
            if ($i <= 1) { 
                $outStr .= "$value
";              } else {                  $outStr .= "$value
";              }              $i++;          }            $outStr .= "";          for ($i = 1; $i <= $count; $i++) {              $outStr .= "
  • $i
    • ";          }          $outStr .= "";          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控制页面内容的显示与隐藏，页面内容是一次性读取载入的。


    推荐阅读
    • ajax

      前端人员必须知道的三个问题及其发展阶段

      本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]
    • python

      Java实战之电影在线观看系统的实现

      Java实战之电影在线观看系统的实现
      本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
    • python

      Voicewo在线语音识别转换jQuery插件的特点和示例

      Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    • python

      javaweb多图片打包下载，弹出提示框问题_html/css_WEBITnose

      在springmvc框架中，前台ajax调用方法，对图片批量下载，如何弹出提示保存位置选框？Controller方法 ... [详细]
    • python

      使用jQuery / AJAX实现两个div的动态更新

      本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串，可以将不同的文本分别插入到两个div中，从而实现页面的动态更新。 ... [详细]
    • python

      lua语言闭包、模式匹配、日期、编译、模块的特性及应用

      本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]
    • python

      后台获取视图对应的字符串

      后台获取视图对应的字符串
      1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]
    • python

      动态规划算法的基本步骤及最长递增子序列问题详解

      动态规划算法的基本步骤及最长递增子序列问题详解
      本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]
    • jar

      Java验证码——kaptcha的使用配置及样式

      Java验证码——kaptcha的使用配置及样式
      本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
    • datetime

      高质量SQL书写的30条建议

      高质量SQL书写的30条建议
      本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]
    • datetime

      指针的引用以及在什么情况下使用指针的引用

      本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ... [详细]
    • utf-8

      解决IE678伪类不兼容问题的方法

      本文介绍了解决IE678伪类不兼容问题的方法，包括少用CSS3和HTML5独有的属性，使用CSS hacker，使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外，本文还提到可以使用jQuery代替批量添加标签的功能，以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ... [详细]
    • utf-8

      Html5-Canvas实现简易的抽奖转盘效果

      Html5-Canvas实现简易的抽奖转盘效果
      本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]
    • utf-8

      单击时动态创建
    • 元素 - Dynamically create
    • element on click

      • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
    • utf-8

      HTML5网页模板怎么加百度统计？

      HTML5网页模板怎么加百度统计？
      本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
    author-avatar
    倒颠0
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有