`
lyongde
  • 浏览: 90657 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jQuery+PHP实现FCKEditor内容分页

阅读更多

如题,用jQuery+PHP实现FCKEditor内容分页,如下:

PHP分页函数:

/***********FCKEditor分页处理*********/
function pageBreak($content)
{
	//把文章内容按照<div style="page-break-after: always"><span style="display: none">&nbsp;</span></div>分割成数组
	$content  = $content;
	$pattern  = "/<div style=\"page-break-after: always\"><span style=\"display: none\">&nbsp;<\/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;
	}
}

 

 

 

jQuery代码:

<script type="text/javascript">
<!--
	$(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');
			}
		});
	});
//-->
</script>

 

 

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;
}

 

2
0
分享到:
评论

相关推荐

    FCKEditor+jQuery+PHP实现分页代码

    根据一下步骤,即可实现使用FCKEditor+jQuery+PHP实现无刷新页面分页。

    jQuery+PHP发布的内容进行无刷新分页(Fckeditor)

    主要介绍了jQuery结合,将Fckeditor发布的内容进行无刷新分页,需要的朋友可以参考下

    PHP100视频教程全集112集BT种子【PHP经典】

    PHP100视频教程108:JQuery之各类动画效果的实现 PHP100视频教程109:JQuery 之 Ajax 开发详解 PHP100视频教程110:Jquery案例 之 双下拉框内容移动 PHP100视频教程111:Jquery案例 之 复选框与隔行换色 PHP100...

    php课程(共100多节)

    13:PHP+MYSQL分页原理 14:PHP上传原理及应用 15:PHP生成HTML文件原理 16:PHP小偷程序原理和实例 17:PHP面向对象开发的学习(一) 18:PHP面向对象开发的学习(二) 19:PHP面向对象开发的学习(三) 20:PHP...

    java开源包3

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包4

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    JAVA上百实例源码以及开源项目

    百度云盘分享 ... Java实现的FTP连接与数据浏览程序,实现实例化可操作的窗口。  部分源代码摘录:  ftpClient = new FtpClient(); //实例化FtpClient对象  String serverAddr=jtfServer.getText();...

    JAVA上百实例源码以及开源项目源代码

    消息驱动Bean必须实现两个接口MessageDrivenBean和MessageListener 在对象创建的过程中将被容器调用,onMessage函数方法接收消息参数,将其强制转型为合适的消息类型,同时打印出消息的内容。同时一个mail note将被...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -优化AJAX的内部实现,每个页面保存的ViewState现在减少1/3左右(重要更新)。 -优化Tree节点的NodeId自动生成,减少ViewState占用。 +2009-08-09 v2.0 beta5 +ExtAspNet和Asp.net的提交按钮兼容问题...

    ExtAspNet_v2.3.2_dll

    +修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语...

    java开源包1

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包11

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包2

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包6

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包5

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包10

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包8

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

    java开源包7

    GWT Advanced Table 是一个基于 GWT 框架的网页表格组件,可实现分页数据显示、数据排序和过滤等功能! Google Tag Library 该标记库和 Google 有关。使用该标记库,利用 Google 为你的网站提供网站查询,并且可以...

Global site tag (gtag.js) - Google Analytics