`
lyongde
  • 浏览: 91329 次
  • 性别: 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三者结合,实现新闻内容的无刷新分页功能。这种技术方案可以在用户界面上无缝切换内容页,而无需重新加载整个页面。 ### 知识点一:FCKEditor编辑器的使用 FCKEditor是一...

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

    以上就是文章《jQuery+PHP发布的内容进行无刷新分页(Fckeditor)》所包含的核心知识点和实现细节。通过这些技术的应用,可以有效地在Web页面中实现无刷新分页功能,同时保持前端的交互性和后端的数据处理能力。

    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...

    测试图形,fck编辑器,分页

    分页通常通过JavaScript、jQuery或服务器端脚本实现,例如PHP、ASP.NET等。合理的分页设计可以提高网站的性能,减少服务器负载,并让用户更容易浏览和找到所需信息。分页要考虑的关键因素有每页显示的项目数量、页码...

    11款基于Javascript的文件管理器

    **简介**: 这款基于Mootools PHP实现的文件管理器,提供了丰富的文件管理功能。 **特点**: - **多操作支持**: 支持浏览、删除、重命名、移动/复制文件等。 - **鼠标拖放**: 支持鼠标拖放操作,提高用户体验。 - **...

    java开源包3

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

    java开源包4

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

    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