如何给内容分页
- WBOY원래의
- 2016-06-07 11:42:501796검색
很多朋友可能会需要内容分页的功能,这里将给大家讲一个完整的例子
要实现这个功能大概分为以下三个步骤:
1. 要使你的web editor支持"分页标识"插入
2. 内容中通过"分页标识"来拆分内容
3. 给内容加上分页
ok 现在我们来实现第一步, 当然很多编辑器已经支持了分页标识，这里我使用的是 kindeditor ;其他编辑器的话自己研究研究了。
解决:步骤一
打开kindeditor.js修改如下
1. 找到 items:items : [<br>
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',<br>
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',<br>
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',<br>
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',<br>
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',<br>
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',<br>
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',<br>
'anchor', 'link', 'unlink', '|', 'about'<br>
],在这个参数中添加一个自定义按钮 'pagehr'; 这里我们给他加到 hr 后面,如下:items : [<br>
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',<br>
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',<br>
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',<br>
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',<br>
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',<br>
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',<br>
'flash', 'media', 'insertfile', 'table', 'hr', 'pagehr', 'emoticons', 'baidumap', 'pagebreak',<br>
'anchor', 'link', 'unlink', '|', 'about'<br>
],2. 找到 hr : function() {<br>
return this.inserthtml('<hr>');<br>
},在下面加入:pagehr : function() {<br>
return this.inserthtml('<hr>');<br>
},3. 找到 _each(('selectall,justifyleft,justifycenter,justifyright,justifyfull,insertorderedlist,' +<br>
'insertunorderedlist,indent,outdent,subscript,superscript,hr,print,' +<br>
'bold,italic,underline,strikethrough,removeformat,unlink').split(','), function(i, name) {<br>
if (shortcutKeys[name]) {<br>
self.afterCreate(function() {<br>
_ctrl(this.edit.doc, shortcutKeys[name], function() {<br>
self.cmd.selection();<br>
self.clickToolbar(name);<br>
});<br>
});<br>
}<br>
self.clickToolbar(name, function() {<br>
self.focus().exec(name, null);<br>
});<br>
});一样在hr 后面添加一个参数 pagehr, 如下:_each(('selectall,justifyleft,justifycenter,justifyright,justifyfull,insertorderedlist,' +<br>
'insertunorderedlist,indent,outdent,subscript,superscript,hr,pagehr,print,' +<br>
'bold,italic,underline,strikethrough,removeformat,unlink').split(','), function(i, name) {<br>
if (shortcutKeys[name]) {<br>
self.afterCreate(function() {<br>
_ctrl(this.edit.doc, shortcutKeys[name], function() {<br>
self.cmd.selection();<br>
self.clickToolbar(name);<br>
});<br>
});<br>
}<br>
self.clickToolbar(name, function() {<br>
self.focus().exec(name, null);<br>
});<br>
});4. 好了。js 修改完毕, 接下来得修改下样式. 打开kindeditor/themes/default/default.css; 添加以下css.ke-icon-pagehr {<br>
background-position: 0px -1248px; /*这里的坐标看你有没修改过kindeditor的图片,自己修改下*/<br>
width: 16px;<br>
height: 16px;<br>
}<br>
.ke-toolbar .ke-pagehr {<br>
overflow: hidden;<br>
height: 1px;<br>
clear: both;<br>
}5. 搞定css 我们可以修改下图标. 我用的是默认的皮肤所以找到kindeditor/themes/default/default.png;
用ps或其他图片处理软件处理下这个图片,当然你也可以不处理,看你喜欢里面哪个现成的图标就直接用吧.
kindeditor 修改完成, 效果如
好了. 接下来tp要怎么处理呢?
如果你看到了这里,那么恭喜. tp 函数我已经写好了。直接点击复制右键黏贴吧. /**<br>
* 内容分页<br>
* @param text content<br>
* @param int page<br>
* @param string needle 分页标识<br>
*/<br>
function contentPage($content, $needle = '<hr>'){<br>
//根据分页标识来拆分分页<br>
$pageContent = explode($needle, $content);<br>
//$_GET['p'] 内容分页的参数<br>
$page = isset($_GET['p']) ? intval($_GET['p']) : 0;<br>
$contentNowPage = $page > 0 ? $page-1 : 0;<br>
echo $pageContent[$contentNowPage];<br>
<br>
if(($pageCount = count($pageContent)) > 1){<br>
$pageStr = '<div></div>
<div>';<br>
for($i = 1; $i
$style = '';<br>
if($page == $i){<br>
$style = 'class="cur"';<br>
}<br>
$pageStr .= '<a>'.$i.'</a>';<br>
}<br>
$pageStr .= '</div>';<br>
echo $pageStr;<br>
}<br>
}嗯哼,代码我就不一行行解释了. 略微注释了下,自己看注释吧; 代码中有几个css.如下.page_content{text-align:center; padding:5px 0;}<br>
.page_content a{ border:1px solid #E3E3E3; margin:0 5px; color:#666; padding:0 5px; display:inline-block;}<br>
.page_content a:hover,<br>
.page_content a.cur{ border:1px solid #F09601; color:#F09601;}<br>
.clear{clear:both;}好好好,接近尾声; 前台调用简直就是弱爆了.我都不好意思贴出来了,可以我不贴你看到这里还不要摔鼠标 ^ _ ^.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~飘逸的分割线~~~~~~~~~~~~~~~~
剁手 .~_~ 哈哈哈, 代码如下; 拿起你手中的鼠标订购吧。 啊~复制吧{:contentPage($info['content'])}大功告成,效果如下:
测试地址: http://www.chajiandaquan.com/tech/73.html
AD：真正免费，域名+虚机+企业邮箱=0元