Question

我正在使用jQuery columnizer的简报示例10 http://welcome.totheinter.net/columnizer-jquery-plugin/

这可以很好地创建一个简报式HTML页面，其中包含来自#newsletterContent

内容的2列段落

我现在需要将另一个带有id bios的div的内容添加到最后一页上列的末尾，其中内容结束但只跨越一列而不是拆分。

我已经尝试将jQuery('#bios').columnize({columns:1,target: ".page:last .content"});添加到我的javascript的末尾，但因为bios div标记在#newsletterContent中，所以它继续作为一列但在#newsletterContent的右栏中。因此，它基本上被放置在内容结尾的最后一页的最后一列中。

使用jQuery appendTo是我想到的并将bios div标签放在newsletterContent div标签之外但是我不知道如何在新闻通讯内容结束时将其内容继续正确，并且还应该创建页面应该是bio的字段分为两页。

HTML

的jQuery jQuery（document）.ready（function（$）{ // var firstpage = $（“div.first_page”）。html（）; //警报（第一页）;

        var content_height = 800;   // the height of the content, discluding the header/footer
        var page = 1;               // the beginning page number to show in the footer
        function buildNewsletter(){
            if($('#newsletterContent').contents().length > 0){
                // when we need to add a new page, use a jq object for a template
                // or use a long HTML string, whatever your preference
                $page = $("#page_template").clone().addClass("page").css("display", "block");

                // fun stuff, like adding page numbers to the footer
                $page.find(".footer span").append(page);
                $("body").append($page);
                page++;

                // here is the columnizer magic
                $('#newsletterContent').columnize({
                    columns: 2,
                    target: ".page:last .content",
                    overflow: {
                        height: content_height,
                        id: "#newsletterContent",
                        doneFunc: function(){
                            console.log("done with page");
                            buildNewsletter();
                        }
                    }
                });
            }

        }
        setTimeout(buildNewsletter, 0);
    });

**编辑** 我尝试使用它将bios溢出附加到最后一页的页脚，并且不生成新页面。我注释掉的css更改在一列中创建了bio，但同样的问题在溢出时没有生成额外的页面。我可以更改什么来创建页面？

else {
    $(".page:last .last.column").append($("#bios"));
    //$('#bios').columnize({columns:1});
    //$("#bios").parents(".last.column").css( "width", "100%" );
    if ($(".page:last .last.column").height() > 800) {
        buildNewsletter();
    }

}

Answer 1

如果您希望#bios位于文档末尾的自己的页面上，在1列内，我相信您可以使用以下代码执行此操作：https://gist.github.com/adamwulf/7454134

如果您希望将#bios附加到最后一页的第一列（假设最后一页的内容足够短以处理#bios的额外高度而不会溢出），那么您可以简单地在else if语句中添加buildNewsletter()子句：

}else{
    $(".page:last .first.column").append($("#bios"));
}

jQuery columnizer newsletter示例，最后几段没有拆分？

1 个答案: