0

我正在使用 jQuery columnizer 的时事通讯示例 10 http://welcome.totheinter.net/columnizer-jquery-plugin/

这可以很好地创建一个时事通讯样式的 HTML 页面，其中包含来自内容的 2 列段落#newsletterContent

我现在需要将另一个带有 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(); //alert(firstpage);

        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();
    }

}
4

1 回答 1

1

如果您希望#bios 在文档末尾的单独页面上，在 1 列内，我相信您可以使用以下代码来做到这一点：https ://gist.github.com/adamwulf/7454134

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

}else{
    $(".page:last .first.column").append($("#bios"));
}
于 2013-11-13T18:47:41.220 回答