时间：2021-07-01 10:21:17 帮助过：3人阅读
/* ******* 环境: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
前台显示如图：
add_article.php
ins.php
把输入的文章内容使用htmlspecialchars()存入数据库。TinyMCE编辑器会自动把用户输入的内容前后加上
标签，不只是文字，也包括图片、视频等富媒体，如：图片：
视频：
分页( arc_page.class.php , templates/js/ajax_arc.js , ajaxarc.php )
arc_page.class.php
在这个文件中包含检测是否含有分页符的方法，如果包含分页符，则把传入的内容按照分页符拆分，返回数组，否则返回字符串。
templates/js/ajax_arc.js
![](\""+$Template_Dir+"/images/loading.gif\")
");
11
12 $("#content").html($loading);
13 }
14
15 //隐藏翻页信息
16 function infoAct(){
17
18 //当前页到达尾页时，"下一页"和"末页"
19 if(parseInt($("#pageNow").val()) == parseInt($("#totalPage").val())){
20
21 $("#flo_page").hide();
22 $("#last_page").hide();
23
24 $("#pre_page").show();
25 $("#first_page").show();
26
27 }else if(parseInt($("#pageNow").val()) == 1){ //当前页到达时隐藏"首页"和"上一页"
28
29 $("#pre_page").hide();
30 $("#first_page").hide();
31
32 $("#flo_page").show();
33 $("#last_page").show();
34
35 }else{
36
37 $("#pre_page").show();
38 $("#first_page").show();
39
40 $("#flo_page").show();
41 $("#last_page").show();
42 }
43 }
44
45 //点击"下一页"、"末页"时出现"首页"和"上一页"
46 function showPage(){
47
48 //首页
49 $firstPage = $("首页");
50
51 if($("#first_page").length == 0){
52 $firstPage.insertBefore($(".ajaxpage:first"));
53 }
54
55 //上一页
56 $pre_page = $(""+$preFonts+"");
57
58 if($("#pre_page").length == 0){
59 $pre_page.insertBefore($(".ajaxpage:first"));
60 }
61 }
62
63 //点击"上一页"、"首页"时出现"下一页"和"末页"
64 function showFloPage(){
65
66 //下一页
67 $flo_page = $(""+$preFonts+"");
68
69 if($("#flo_page").length == 0){
70 $flo_page.insertAfter($(".ajaxpage:last"));
71 }
72
73 //末页
74 $lastPage = $("末页");
75
76 if($("#last_page").length == 0){
77 $lastPage.insertAfter($("#flo_page"));
78 }
79 }
80
81 //ajax请求数据
82 function ajaxpost(){
83
84 $.post("ajaxarc.php",{
85
86 pageNow : parseInt($("#pageNow").val()),
87 id : parseInt($("#id").val()),
88 pagebreak : $("#pagebreak").val()
89 },function(data,textStatus){
90
91 //删除gif
92 $(".loading").remove();
93
94 $("#content").html(data);
95 });
96 }
97
98
99 //初始值=1
100 apagenow = parseInt($("#pageNow").val());
101
102 //ajax "首页" 因为"首页"和"上一页"一开始是不出现的，所以只有在"下一页"和"末页"的的点击函数中调用"首页"和"上一页"函数
103 function firstPageAct(){
104
105 if($("#first_page").is(":visible")){
106
107 $("#first_page").live('click',function(){
108
109 //删除更新前的
110 ajaxpre();
111
112 //pageNow设为1
113 $("#pageNow").val(1);
114 apagenow = parseInt($("#pageNow").val());
115
116 //修改页码信息
117 $("#pagenow_info").html(" 当前第1页");
118
119 //后偏移分页
120 flopage($("#pageNow").val());
121
122 //ajax请求数据
123 ajaxpost();
124
125 //到达"首页"之后隐藏"首页"和"上一页"
126 infoAct();
127
128 //给页码加样式
129 selpage();
130 });
131 }
132 }
133
134 function lastPageAct(){
135
136 if($("#last_page").is(":visible")){
137
138 $("#last_page").live('click',function(){
139
140 //删除更新前的
141 ajaxpre();
142
143 //pageNow设为1
144 $("#pageNow").val($("#totalPage").val());
145 apagenow = parseInt($("#pageNow").val());
146
147 //修改页码信息
148 $("#pagenow_info").html(" 当前第"+apagenow+"页");
149
150 //后偏移分页
151 flopage($("#pageNow").val());
152
153 if($("#first_page").is(":hidden") || $("#first_page").length == 0){
154
155 //出现"首页"和"下一页"
156 showPage();
157 showFloPage();
158 firstPageAct();
159 lastPageAct();
160 prePageAct();
161 }
162
163 //ajax请求数据
164 ajaxpost();
165
166 //到达"首页"之后隐藏"首页"和"上一页"
167 infoAct();
168
169 //给页码加样式
170 selpage();
171 });
172 }
173 }
174
175 //ajax "上一页"
176 function prePageAct(){
177
178 if($("#pre_page").is(":visible")){
179
180 $("#pre_page").click(function(){
181
182 //删除更新前的
183 ajaxpre();
184
185 //每点击"上一页",隐藏域值-1
186 if(parseInt(apagenow) != 1){
187
188 apagenow = parseInt(apagenow) - parseInt(1);
189 }
190
191 $("#pageNow").val(apagenow);
192
193 //前、后偏移分页
194 flopage($("#pageNow").val());
195
196 //隐藏域的页码值大于1时
197 if(parseInt($("#pageNow").val()) > parseInt(1)){
198
199 //修改页码信息
200 $("#pagenow_info").html(" 当前第"+$("#pageNow").val()+"页");
201 }
202
203 //ajax请求数据
204 ajaxpost();
205
206 if($("#first_page").is(":hidden") || $("#first_page").length == 0){
207
208 //出现"首页"和"下一页"
209 showPage();
210 showFloPage();
211 firstPageAct();
212 lastPageAct();
213 prePageAct();
214 }
215
216 //第一页时隐藏"首页"和"上一页"
217 infoAct();
218
219 //给页码加样式
220 selpage();
221 });
222
223 }
224 }
225
226 //ajax "下一页"
227 if($("#flo_page").length>0){
228
229 //去掉a的href属性
230 $("#flo_page").removeAttr("href");
231
232 $("#flo_page").live('click',function(){
233
234 ajaxpre();
235
236 //每点击"下一次",隐藏域值+1
237 apagenow = parseInt(apagenow) + parseInt(1);
238
239 $("#pageNow").val(apagenow);
240
241 //后偏移分页
242 flopage($("#pageNow").val());
243
244 //隐藏域的页码值小于总页码时
245 if(parseInt($("#pageNow").val()) <= parseInt($("#totalPage").val())){
246
247 //修改页码信息
248 $("#pagenow_info").html(" 当前第"+$("#pageNow").val()+"页");
249
250 //ajax请求数据
251 ajaxpost();
252 }
253
254 //点击"下一页"之后出现"首页"
255 if($("#first_page").is(":hidden") || $("#first_page").length == 0){
256
257 //出现"首页"和"下一页"
258 showPage();
259 showFloPage();
260 firstPageAct();
261 lastPageAct();
262 prePageAct();
263 }
264
265 //隐藏"下一页"和"末页"
266 infoAct();
267
268 //给页码加样式
269 selpage();
270
271 return false; //取消点击翻页
272 });
273 }
274
275 //ajax "末页"
276 if($("#last_page").length>0){
277
278 //去掉a的href属性
279 $("#last_page").removeAttr("href");
280
281 $("#last_page").live('click',function(){
282
283 ajaxpre();
284
285 //修改隐藏域当前页信息
286 apagenow = parseInt($("#totalPage").val());
287 $("#pageNow").val(apagenow);
288
289 //修改页码信息
290 $("#pagenow_info").html(" 当前第"+$("#totalPage").val()+"页");
291
292 //后偏移分页
293 flopage($("#pageNow").val());
294
295 //ajax请求数据
296 ajaxpost();
297
298 //点击"末页"之后出现"首页"
299
300 if($("#first_page").length == 0){
301
302 showPage();
303 showFloPage();
304 firstPageAct();
305 lastPageAct();
306 prePageAct();
307 }
308
309 infoAct();
310
311 //给页码加样式
312 selpage();
313
314 return false;
315 });
316 }
317
318 //取消a标签跳转
319 $("#first_page").live('click',function(){
320
321 return false;
322 });
323
324 $("#pre_page").live('click',function(){
325
326 return false;
327 });
328
329 //删除具体页码的href
330 $(".ajaxpage").removeAttr("href");
331
332
333 //live()可使jQuery动态添加的元素也能绑定事件处理函数
334 $(".ajaxpage").live('click', function(){
335
336 ajaxpre();
337
338 //每点击"下一次",隐藏域值变为当前a标签显示的页码
339 apagenow = $(this).text();
340
341 $("#pageNow").val(apagenow);
342
343 //后偏移分页
344 flopage($("#pageNow").val());
345
346 //修改页码信息
347 $("#pagenow_info").html(" 当前第"+$("#pageNow").val()+"页");
348
349 $(".ajaxpage").removeClass("selected");
350
351 $(this).each(function(){
352
353 if($(this).text() == $("#pageNow").val()){
354
355 $(this).addClass("selected");
356 }
357 })
358
359 if($("#first_page").is(":hidden") || $("#first_page").length == 0){
360
361 //出现"首页"和"下一页"
362 showPage();
363 showFloPage();
364 firstPageAct();
365 lastPageAct();
366 prePageAct();
367 }
368
369 infoAct();
370
371 //给页码加样式
372 selpage();
373
374 ajaxpost();
375 });
376
377 //"上一页","下一页"给页码加样式
378 function selpage(){
379
380 //给页码加样式
381 $(".ajaxpage").removeClass("selected");
382 $(".ajaxpage").each(function(){
383
384 if($(this).text() == $("#pageNow").val()){
385
386 $(this).addClass("selected");
387 }
388 })
389