如何给内容分页

php中文网

发布时间：2016-06-07 11:42:50

2213人浏览过

来源于php中文网

原创

很多朋友可能会需要内容分页的功能,这里将给大家讲一个完整的例子
要实现这个功能大概分为以下三个步骤:
1. 要使你的web editor支持"分页标识"插入
2. 内容中通过"分页标识"来拆分内容
3. 给内容加上分页
ok 现在我们来实现第一步, 当然很多编辑器已经支持了分页标识，这里我使用的是 kindeditor ;其他编辑器的话自己研究研究了。
解决:步骤一
打开kindeditor.js修改如下
1. 找到 items:items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ],在这个参数中添加一个自定义按钮 'pagehr'; 这里我们给他加到 hr 后面,如下:items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'pagehr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ],2. 找到 hr : function() { return this.inserthtml('

');

    },

在下面加入:

pagehr : function() {

        return this.inserthtml('
');

    },

3. 找到

_each(('selectall,justifyleft,justifycenter,justifyright,justifyfull,insertorderedlist,' +

        'insertunorderedlist,indent,outdent,subscript,superscript,hr,print,' +

        'bold,italic,underline,strikethrough,removeformat,unlink').split(','), function(i, name) {

        if (shortcutKeys[name]) {

            self.afterCreate(function() {

                _ctrl(this.edit.doc, shortcutKeys[name], function() {

                    self.cmd.selection();

                    self.clickToolbar(name);

                });

            });

        }

        self.clickToolbar(name, function() {

            self.focus().exec(name, null);

        });

    });

一样在hr 后面添加一个参数 pagehr, 如下:

_each(('selectall,justifyleft,justifycenter,justifyright,justifyfull,insertorderedlist,' +

        'insertunorderedlist,indent,outdent,subscript,superscript,hr,pagehr,print,' +

        'bold,italic,underline,strikethrough,removeformat,unlink').split(','), function(i, name) {

        if (shortcutKeys[name]) {

            self.afterCreate(function() {

                _ctrl(this.edit.doc, shortcutKeys[name], function() {

                    self.cmd.selection();

                    self.clickToolbar(name);

                });

            });

        }

        self.clickToolbar(name, function() {

            self.focus().exec(name, null);

        });

    });

4. 好了。js 修改完毕, 接下来得修改下样式. 打开kindeditor/themes/default/default.css; 添加以下css

.ke-icon-pagehr {

    background-position: 0px -1241248px; /*这里的坐标看你有没修改过kindeditor的图片,自己修改下*/

    width: 16px;

    height: 16px;

}

.ke-toolbar .ke-pagehr {

    overflow: hidden;

    height: 1px;

    clear: both;

}

5. 搞定css 我们可以修改下图标. 我用的是默认的皮肤所以找到kindeditor/themes/default/default.png;
用ps或其他图片处理软件处理下这个图片,当然你也可以不处理,看你喜欢里面哪个现成的图标就直接用吧.

kindeditor 修改完成, 效果如
如何给内容分页

好了. 接下来tp要怎么处理呢?
如果你看到了这里,那么恭喜. tp 函数我已经写好了。直接点击复制右键黏贴吧.

/**

* 内容分页

* @param text content

* @param int  page

* @param string needle 分页标识

*/

function contentPage($content, $needle = '
'){

    //根据分页标识来拆分分页

     $pageContent = explode($needle, $content);

    //$_GET['p'] 内容分页的参数

       $page = isset($_GET['p']) ? intval($_GET['p']) : 0;

    $contentNowPage = $page > 0 ? $page-1 : 0;

    echo $pageContent[$contentNowPage];

    

    if(($pageCount = count($pageContent)) > 1){

        $pageStr = '
';

        for($i = 1; $i 
            $style = '';

            if($page == $i){

                $style = 'class="cur"';

            }

            $pageStr .= ''.$i.'';

        }

        $pageStr .= '
';

        echo $pageStr;

    }

}

嗯哼,代码我就不一行行解释了. 略微注释了下,自己看注释吧; 代码中有几个css.如下

.page_content{text-align:center; padding:5px 0;}

.page_content a{ border:1px solid #E3E3E3; margin:0 5px; color:#666; padding:0 5px; display:inline-block;}

.page_content a:hover,

.page_content a.cur{ border:1px solid #F09601; color:#F09601;}

.clear{clear:both;}

好好好,接近尾声; 前台调用简直就是弱爆了.我都不好意思贴出来了,可以我不贴你看到这里还不要摔鼠标 ^ _ ^.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~飘逸的分割线~~~~~~~~~~~~~~~~

剁手 .~_~ 哈哈哈, 代码如下; 拿起你手中的鼠标订购吧。啊~复制吧{:contentPage($info['content'])}大功告成,效果如下:
如何给内容分页