4

各ページが画面の高さと事前定義された幅を持つように、一部の html コンテンツをページに分割する必要があります。ページ分割は段落 (またはおそらく他の HTML 要素) の途中で発生する可能性があるため、この状況は何らかの方法で処理する必要があります。

私が本当に達成したいのは、本をページごとに読むことの効果です。何らかのjavascriptが必要になると思いますので、jQueryの方がいいと思いますが、他のフレームワークが必要な場合でも大丈夫です。

私はHTMLとすべてにまったく慣れていないことを認めなければならないので、私の推測がばかげている場合は申し訳ありませんが、現在、次のアプローチを検討しています:私のhtmlドキュメントを取得し、タグの後にタグを段階的に取得し、これを非表示のdivに入れて、結果の高さを計算します。高さがページの高さを超えたら、完了です。ただし、このアプローチは、長い段落などの長いタグの場合には機能しません。

前もって感謝します。

編集：以前の回答に感謝します。要素のサイズを手動で計算するアプローチを使用しようとしましたが、うまく解決できない問題に遭遇しました。これはマージンの崩壊の問題です。私がやろうとしているのは、ドキュメント内のすべての段落をループして、.outerHeight(true) jQuery 呼び出しの結果を合計することです。これにより、パディング、マージン、ボーダーを含む要素の全高が得られます。そして、実際にはその通りに動作しますが、ここでの問題は、マージンの崩壊が考慮されていないことです。そのため、ブラウザが（私の場合は隣接する段落の）マージンの一部を破棄するため、全体のサイズが間違ってしまいます（実際のサイズよりも大きくなります）が、それらを考慮に入れます。

どのマージンが折りたたまれ、どのマージンが折りたたまれていないかを判断するアルゴリズムを導入する以外に、これを解決する方法はありますか? 醜いと思います…

4

5 に答える 5

2

CSS3 の複数列ルールを使用できます。例: http://www.quirksmode.org/css/multicolumn.html または、すべてのブラウザーでサポートするには、javascript プラグインを使用します: http://welcome.totheinter.net/columnizer-jquery -プラグイン/

このプラグインには複数ページの複数列の例もあります: http://welcome.totheinter.net/2009/06/18/dynamic-multi-page-multi-column-newsletter-layout-with-columnizer/

于 2012-08-30T12:17:09.187 に答える
1

私はあなたが必要とする（そしてもう少し）ことをするように見える1つのフレームワークを考えることができます：https://github.com/Treesaver/treesaver

于 2011-11-11T18:35:07.497 に答える
0

jQueryは、height（）関数を使用して要素の高さ（ピクセル単位）を提供します。

jQuery("BODY").height()ビューポートの最大の高さが表示されます（ただし、コンテンツの高さがBODYの高さ以上の場合のみ-それ以外の場合は、ボディがビューポートで占めるスペースの高さが表示されます）。

Pタグ（または他のタグ）の高さを数えるのは良い方法のようです。大きな段落のPタグの内容を分割したい場合は、ページの最後のPタグの最大「分割」高さを定義できると思います。次に、で新しいPタグを作成することにより、Pタグの残りのコンテンツを分割できます。jQuery("#the-next-page-id).append(jQuery("<P>"+restOfTheParagraphContent+"</P>"))

于 2011-11-11T22:01:03.543 に答える
0

このようなものをまだ探している人のために、私は最近 JQuery を使用してそれを行いました。また、最初のページを空のままにします (タイトルなどのために):

https://jsfiddle.net/xs31xzvt/

基本的に、移動可能なアイテムを繰り返し処理し、前の div がいっぱいの場合はそれらを新しい div に挿入します。

 (function($) {

    $(document).ready(formatPages)
    function formatPages() {
        var container = $('.container');
        var subPage = $('.subpage').get(0);
        var subPageHeight = subPage.offsetHeight;
        var subPageScrollHeight = subPage.scrollHeight;
        // See how many pages we'll need
        var pages = Math.floor(subPageScrollHeight / subPageHeight) + 1;
        //add a new page
        var pageCount = 2;
        var pageDiv = createPageDiv(pageCount);
        var subPageDiv = createSubPageDiv(pageCount);

        var addPage = function (){
            pageCount++;
            pageDiv = createPageDiv(pageCount);
            subPageDiv = createSubPageDiv(pageCount);
            pageDiv.append(subPageDiv);
            container.append(pageDiv);
            pageContentHeight = 0;
        }
        addPage()
        container.append(pageDiv);
        $('.movable').each(function() {
            var element = $(this);
            //remove the element
            element.detach();
            //try to add the element to the current page
            if (pageContentHeight + element.get(0).offsetHeight > subPageHeight) {
                subPageDiv.append(getFooterDiv().show());
                //add a new page
                addPage();
            }
            subPageDiv.append(element);
            pageContentHeight += element.get(0).offsetHeight;
        });
    }



    function createPageDiv(pageNum) {
        return $('<div/>', {
            class: 'page',
            id: 'page' + pageNum
        });
    }
    function createSubPageDiv(pageNum) {
        return $('<div/>', {
            class: 'subpage',
            id: 'subpage' + pageNum
        });
    }
    function getFooterDiv() {
        return $('.footer').first().clone();
    }
}(jQuery));
于 2016-10-17T17:06:40.580 に答える
0

独自のロジックを使用して、jQuery コードを使用して html 本文の各要素の高さを計算します

$('selector').height();

これを使用して、一部の html 要素の高さを計算し、デバイス画面に表示する要素の量を決定できます。

詳細については、 jQuery Height のドキュメントをご覧ください。

于 2014-01-30T17:14:33.447 に答える