/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8
******* 其它组件：jQuery-1.8.3.min.js + Smarty 3.1.18 + TinyMCE 4.1.6 ******* Date：2014-10-20 ******* Author：小dee ******* Blog：http://www.cnblogs.com/dee0912/ */
写在前面的：
1.不论是列表分页还是文章分页，关键的地方在于如何处理当前页之前和之后的偏移量，也就是要考虑 ( 不同情况下哪些页码元素该显示，哪些不该显示 ) 和计算 ( 显示多少页码 ) ，这些关键的方法在 url 分页时写入分页类文件中，在 ajax 分页中写入 js 文件中；
2.在 ajax 分页时，使用 live() 方法可以使 jQuery动态添加的元素也能绑定事件处理函数 ( ajax_arc.js 文件 )
这个功能模块的主要文件包括长文章分页类 arc_page.class.php 和 用于 ajax 文章分页的 ajax_arc.js 两个文件，包含的功能有：
1.文章内容可以使用 url 分页，分页后的 url 参数为 p；
2.文章内容可以使用 ajax 分页，显示页码；
3.和列表分页类一样，可以更改"上一页"、"下一页"文字
其他：这个模块的分页功能为 编辑器手动插入分页符 进行分页。
这个模块配合使用了 TinyMCE ( 4.1.6 ) 编辑器
TinyMCE编辑器下载地址：http://www.tinymce.com/download/download.php，解压后文件夹 tinymce 放至根目录；
语言包下载地址：http://www.tinymce.com/i18n/index.php，选择 Chinese (China) ，解压后把 langs 文件夹里的 zh_CN.js 放至 tinymce/langs 目录下；
在模板里引入 tinymce/tinymce.min.js 文件；
其他使用方法可以参照博客：http://www.cnblogs.com/nkxyf/p/3883586.html
效果图：
url 分页
图1.
图2.
图3.
ajax 分页
图1.
图2.
模块文件结构图：
ROOT:
├─conn
│ └─conn.php
│
├─libs -- smarty库
│
├─templates
│ │
│ ├─add_article.html -- 添加文章模板
│ ├─view_article.html -- 前台文章页模板
│ ├─list.html -- 前台列表页模板
│ ├─success.html -- 操作成功时显示模板
│ ├─error.html -- 操作失败时显示模板
│ │
│ ├─css
│ │
│ ├─images
│ │ └─loading.gif -- ajax分页时请求数据接收到之前的加载图
│ │
│ └─js
│ │
│ ├─jquery-1.8.3.min.js
│ │
│ ├─showTime.js -- 操作成功或失败时的倒计时跳转文件
│ │
│ ├─ajax_arc.js -- 当分页方式为ajax时文章页模板view_article.html加载的js
│ │
│ └─ajax.js -- 当分页方式为ajax时列表页模板list.html加载的js
│
├─templates_c
│
├─tinymce -- 编辑器
│
├─init.inc.php -- smarty配置文件
│
├─list_page.class.php -- 列表分页类
│
├─arc_page.class.php -- 文章分页类
│
├─list.php -- 列表页
│
├─view_article.php -- 文章页
│
├─ajaxarc.php -- 文章页ajax分页时接受请求的php文件
│
├─ajaxpage.php -- 列表页ajax分页时接受请求的php文件
│
└─ins.php -- 添加文章php文件
主要代码：
添加文章( templates/add_article.html , add_article.php , ins.php )
templates/add_article.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>PHP文章分页类</title> 6 <link href="<{$Template_Dir}>/css/style_control.css" rel="stylesheet" type="text/css"> 7 <script src="<{$Template_Dir}>/js/jquery-1.8.3.min.js"></script> 8 9 <!-- tinymce 4.1.6 --> 10 <script src="<{$ROOT_URL}>tinymce/tinymce.min.js"></script> 11 <script> 12 13 tinymce.init({ 14 15 selector:'#content', //编辑区域 16 theme: "modern", //主题 17 language: "zh_cn", //语言(中文需要到官网下载) 18 19 width:800, //编辑框宽 20 height: 300, //编辑框高 21 22 plugins: [ 23 24 "advlist autolink lists link image charmap print preview hr anchor pagebreak", 25 "searchreplace wordcount visualblocks visualchars code fullscreen", 26 "insertdatetime media nonbreaking save table contextmenu directionality", 27 "emoticons template paste textcolor colorpicker textpattern" 28 ], 29 30 //第一行工具栏 31 toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 32 33 //第二行工具栏 34 toolbar2: "print preview media | forecolor backcolor emoticons", 35 36 image_advtab: true, 37 38 //初始时提供的默认格式 39 style_formats: [ 40 {title: 'Bold text', inline: 'b'}, 41 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, 42 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, 43 {title: 'Example 1', inline: 'span', classes: 'example1'}, 44 {title: 'Example 2', inline: 'span', classes: 'example2'}, 45 {title: 'Table styles'}, 46 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} 47 ] 48 }); 49 50 </script> 51 </head> 52 <body> 53 54 <form id="arc_form" action="ins.php" method="post"> 55 56 标题:<br /> 57 <input type="text" id="title" name="title" autocomplete="off" /><br /><br /> 58 内容:<br /> 59 <textarea id="content" name="content"></textarea><br /> 60 <input type="button" id="sub" value="提交" /> 61 62 </form> 63 64 </body> 65 <script> 66 67 $(function(){ 68 69 $("#sub").click(function(){ 70 71 if($("#title").val() != ""){ 72 73 $("#arc_form").submit(); 74 }else{ 75 76 alert("标题不能为空"); 77 } 78 }); 79 }); 80 </script> 81 </html>