FCKEditor+jQuery+PHP实现分页代码

一、插入新闻

FCKEditor是一款很流行的即插即用WEB编辑器，它支持ASP、PHP、Java等语言。这里要介绍的是利用编辑器的“插入分页符”功能，实现页面的无刷新分页。

编辑新闻时，在需要插入分页的段落处插入分页符，保存即可。

二、读取新闻

在读取新闻字段时，通过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;
}
}

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 #FF7300;
background-color: #fff;

color: #FF7300;
text-align: center;
cursor: pointer;
font-family: Arial;
font-size: 12px;
overflow: hidden;
}
#page_break .num li.on{
background-color: #FF7300;

color: #fff;
font-weight: bold;
}

使用jQuery代码实现分页，代码如下：


代码如下:

$(document).ready(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');
}
});
});

根据以上步骤，即可实现使用FCKEditor+jQuery+PHP实现无刷新页面分页。

赞 (0)

相关推荐

  • 使用PHP+JQuery+Ajax分页的实现

    使用PHP+JQuery+Ajax分页的实现

    为了锻炼下JQuery,决定自己动手写写分页 最终的效果如图: 点击某个字母后,下方显示以该字母为首字母的所有词语: 分页显示,每页显示15个词语,每组页码有20个,1-20/20-40--- 首先是在PHP文件中的分页Pager的相关代码 复制代码 代码如下: public function searchWordsByInitial() {               //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码            $initial = htmlenti

  • PHP实现简单数字分页效果

    学习要点: 1.LIMIT 用法 2.各种参数 3.超链接调用 第一:先在文件中设置数字分页模块:我的文件是(blog.php) 复制代码 代码如下: //分页模块 $_page = $_GET['page']; $_pagesize = 10; $_pagenum = ($_page - 1) * $_pagesize; //首页要得到所有的数据总和 $_num=mysql_num_rows(_query("SELECT tg_id FROM tg_user")); $_pageab

  • php简单分页类实现方法

    本文实例讲述了php简单分页类实现方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: class PageModel {      /**      * 获取分页数组      * @param unknown $page 当前页面数      * @param unknown $goodsCount 商品总数      * @param unknown $pageLength 每个页面展示页面数      */      public static function getPageA

  • php 使用array函数实现分页

    代码很简单,就不多废话了. 复制代码 代码如下: $array=array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15",&

  • ThinkPHP分页实例

    ThinkPHP分页实例

    本文实例讲述了ThinkPHP分页的实现方法,分享给大家供大家参考.具体方法如下: 在TP3.2框架手册中有一个数据分页,不过每次都要写太多的代码,还有中文设置等有些麻烦,做为程序开发者,有必要整理下: 实例运行效果如下图所示: 一.分页方法: 复制代码 代码如下: /**  * TODO 基础分页的相同代码封装,使前台的代码更少  * @param $m 模型,引用传递  * @param $where 查询条件  * @param int $pagesize 每页查询条数  * @retur

  • php jquery 实现新闻标签分类与无刷新分页

    php jquery 实现新闻标签分类与无刷新分页

    现在jquery的应用越来越广泛了,在很多网站的新闻板块都实现了 标签分类 + 无刷新分页 的效果. 也自己尝试写了一个,效果图如下(样式可以按用户需求自己去整): 接下来详细介绍实现过程: 我一向是见招拆招的解决思路,这里需要运用到3个东西--标签页效果插件和分页插件,jquery的getJson请求. 因此我使用了jquery-ui插件,jquery-page插件,现提供下载地址: jquery_all.rar 里面包含了3个JS脚本文件和2个样式表:jquery-1.3.2.min.jsj

  • 推荐一款PHP+jQuery制作的列表分页的功能模块

    推荐一款PHP+jQuery制作的列表分页的功能模块

    做了一个列表分页的功能模块,主要的文件包括分页类 page.class.php 和 控制 ajax 分页的ajax.js,主要功能有: 1.可以选择 3 种常见的 url 分页格式: 2.可以选择 url 分页 还是 ajax 分页: 3.两种分页方式都可以自定义分页 a 标签的文字: 4.url 分页方式可以自定义分页偏移量: 5.url 分页方式可以选择手动跳转方式:手动输入页码跳转 或 下拉菜单选择页码跳转. 列表分页功能含有但不一定全部包含的元素包括: 首页.下一页.上一页.末页.具体页

  • PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用

    PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用

    jPaginate是基于jQuery的动感滚动分页插件,它的表现形式是像分页的按钮一样,非常有意思的是这些按钮却可以滚动,可以通过单击或鼠标滑向点两侧的小箭头来控制按钮的前后滚动. 调用jPaginate插件的方法很简单: $(elementID).paginate() 属性设置 可喜的是,jPaginate提供了很多属性配置,您可以轻易的定制想要的分页效果. 设置方法如: $(elementID).paginate({ count:80, start:1, ... }) count: 数字,总

  • PHP实现仿Google分页效果的分页函数

    本文实例讲述了PHP实现仿Google分页效果的分页函数.分享给大家供大家参考.具体如下: /** * 分页函数 * @param int $total 总页数 * @param int $pagesize 每页几条 * @param string $pkey url中页面变量名称 * @param string $url 基础url,其中的{page}会被替换为页码 * 依赖函数 request_uri httpInt */ function page($total,$pagesize=10,

  • PHP分页类集锦

    分页类一 复制代码 代码如下: <?php /** 分页类 修改:Silence Creatdate:2006-5-30 LastModify:2009-5-31 使用方法 $page = new page ( $result, 20 ); //$result为返回记录集数组 ,20为返回每页条数 $index = $page->GetIndexBar () . $page->GetPageInfo (); print_r ( $result ); echo \"<br&

  • PHP读取txt文本文件并分页显示的方法

    本文实例讲述了PHP读取txt文本文件并分页显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <?php     session_start();     if (empty($page)) {$page=1;}     if (isset($_GET['page'])==TRUE) {$page=$_GET['page']; } ?> <html> <head> <meta http-equiv="Content-Type&q

  • ThinkPHP有变量的where条件分页实例

    本文实例讲述了ThinkPHP有变量的where条件分页的实现方法.分享给大家供大家参考. 主要功能代码如下: 复制代码 代码如下: $Form= D('Announcement'); import("ORG.Util.Page"); $count = $Form->count();    //计算总数 $p = new Page ( $count, 5 ); $map = array();// 使用索引数组或者对象来作为查询条件,使用对象方式和使用数组方式的条件效果是相同的,并

  • 分享PHP函数实现数字与文字分页代码

    这篇文章主要是用PHP函数实现数字与文字分页,具体实现步骤就不罗嗦了,直接上代码 /** * * @param $_sql * @param $_size */ function _page($_sql,$_size) { //将里面的所有变量取出来,外部可以访问 global $_page,$_pagesize,$_pagenum,$_pageabsolute,$_num; if (isset($_GET['page'])) { $_page = $_GET['page']; if (empt

  • 分享php分页的功能模块

    分享php分页的功能模块

    先贴张图看看效果 在贴一下代码吧 <?php $localhost = "localhost"; $username = "root"; $password = "root"; $db = "test"; //信息 $pagesize = 5; $conn = mysql_connect($localhost,$username,$password); //链接数据库 if(!$conn){ echo "数据库

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

  • 仿dedecms下拉分页样式修改的thinkphp分页类实例

    仿dedecms下拉分页样式修改的thinkphp分页类实例

    本文实例讲述了仿dede下拉分页样式修改的thinkphp分页类.分享给大家供大家参考.具体实现方法如下: 修改thinkphp分页类:如下拉列表式分页(类似dedecms分页): 纯html代码: 复制代码 代码如下: <select name="sldd" style="width:36px" onchange="location.href=this.options[this.selectedIndex].value;"> <

随机推荐