0

jQuery columnizer のニュースレターの例 10 を使用しています http://welcome.totheinter.net/columnizer-jquery-plugin/

これは、コンテンツからの2列の段落を持つニュースレタースタイルのHTMLページを作成するのにうまく機能しています#newsletterContent

私は今、id bios を持つ別の div のコンテンツを、コンテンツが終了する最後のページの列の最後に追加する必要がありますが、1 つの列のみにまたがり、分割されません。

JavaScript の末尾に追加しようとしましjQuery('#bios').columnize({columns:1,target: ".page:last .content"});たが、bios div タグが #newsletterContent 内にあるため、1 つの列として継続していますが、#newsletterContent の右側の列にあります。つまり、基本的にはコンテンツの最後の最後のページの最後の列に配置されています。

jQuery appendTo を使用することは私が考えたもので、ニュースレターのコンテンツ div タグの外に bios div タグを配置しましたが、ニュースレターのコンテンツが終了したときにそのコンテンツを継続させる方法と、バイオのフィールドが実行された場合にページを作成する方法がわかりません2ページに。

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の変更により、バイオが1列に作成されましたが、オーバーフローしたときに余分なページではなく同じ問題が発生しました。ページを作成するために何を変更できますか?

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 に答える