首页    技术博客    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控制页面内容的显示与隐藏，页面内容是一次性读取载入的。


    推荐阅读
    • java

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

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

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

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

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

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

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

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

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

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

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

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

      CSS3选择器的使用方法详解，提高Web开发效率和精准度

      CSS3选择器的使用方法详解，提高Web开发效率和精准度
      本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
    • jsp

      ABAP开发发送邮件程序的配置和代码整理

      本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]
    • jsp

      高质量SQL书写的30条建议

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

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

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

      工程中添加Android Dependencies

      在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
    • java

      猜字母游戏

      猜字母游戏
      猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
    • text

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

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

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

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

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

      • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
    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社区 版权所有