文章编辑实现分页功能

来源：互联网发布：网络计划编制软件编辑：程序博客网时间：2024/06/03 18:37

原文地址：侯哥小博http://37blog.com/?p=198

1、单靠纯粹的编辑器无法实现分页功能，还需要自己编写一些代码。

2、需要配合js方可实现，这里附上js代码，需要下载源码可以去原文地址中查看。

var Pages = 1;//总页数var regExp = /_ueditor_page_break_tag_/;//根据某处字符来分页,这里用的是ueditor编辑器的分页标志var saveContent;//用于保存分割出来的详情数组var content, pageList;//保存全局ID//调用开始，这里#content就是需要分页的详情部分,#page分页该放的选择点，分页样式getPages("#content","#page");function getPages(id,page) {    content = $(id);    pageList = $(page);    if (content != null && regExp.test(content.html())) {        saveContent = content.html().split(regExp);//根据分页的标示将html分割成数组        Pages = saveContent.length;//计算出需要分几页    }    window.createPages(1);};//显示分页的内容并自动生成页数function createPages(currentPage) {    if (currentPage >= 1 && currentPage <= Pages && saveContent != null && saveContent.length >= 0) {        var pageHtml = pageList;//分页的样式        if ((parseInt(currentPage) - 1) <= saveContent.length) {            content.html(saveContent[parseInt(currentPage) - 1]);//用获取详情数组指定下标部门代替原新闻内容，实现分页显示效果        }        pageHtml.html();//分页样式初始              //模式一 ：以 1、2、3、4.。。这种模式分页        var innHtml = "<ul class='pagination'>";        for(var i=1;i<=saveContent.length;i++){            if(i==currentPage){                innHtml +="<li class='active'><span>"+i+"</span></li>";            }else{                innHtml +="<li><a target='_self' href='javascript:createPages(" + i + ")'>"+i+"</a></li>";            }        }        innHtml +="</ul>";                //模式二：以首页、上一页、下一页、尾页        //  var innHtml = "页数：" + currentPage + "/" + Pages;        //innHtml += "<a target='_self' href='javascript:createPages(1)'>首页</a>";        //if (currentPage > 1) {        //    innHtml += "<a target='_self' href='javascript:createPages(" + (parseInt(currentPage) - 1) + ")'>上一页</a>";        //}        //if (currentPage < Pages) {        //    innHtml += "<a target='_self' href='javascript:createPages(" + (parseInt(currentPage) + 1) + ")'>下一页</a>";        //}        //innHtml += "<a target='_self' href='javascript:createPages(" + Pages + ")'>末页</a>";              pageHtml.html(innHtml);    }}

阅读全文

0 0