Динамический разрыв страницы - Jquery

Question

Динамический разрыв страницы - Jquery

0

Я создаю сценарий для страницы с печатью, которая генерируется динамически. Поскольку эта страница генерируется "на лету", а разделы могут иметь разную высоту, предопределенный класс разрыва страницы, вставленный в разметку, не сокращает ее. Чтобы обойти это, я проверяю высоту каждого с атрибутом data-print = "section".

То, с чем я борюсь, - это... каждый раздел data-print = "section" должен генерировать общее количество. Когда эта сумма больше, чем переменная "pageHeight", она вставляет, чтобы заставить контент на вторую страницу. После того, как вставлен разрыв страницы, ему нужно снова запустить текущее общее количество и вставить другое, когда сумма больше, чем "pageHeight".

Пример перед "скриптом" с разрывом на 960px...

<div class="item" data-print="section"></div> = 400px
<div class="item" data-print="section"></div> = 200px
<ul data-print="section"> = 300px
    <li>
    <li>
</ul>
<div class="item" data-print="section"></div>  = 50px
<div class="item" data-print="section"></div>  = 100px

Пример после "скрипта" с перерывом на 960px...

<div class="item" data-print="section"></div> = 400px
<div class="item" data-print="section"></div> = 200px
<ul data-print="section"> = 300px
    <li>
    <li>
</ul>
<div class="item" data-print="section"></div>  = 50px
<div class="page-break"></div>
<div class="item" data-print="section"></div>  = 100px

Текущий скрипт

$('[data-print=section]').each(function() {

    var staticHeight = $(this).filter(':visible').outerHeight(true);
    var pageHeight = 400

    console.log(staticHeight)

    if ($(this).height() > pageHeight) {
        $(this).after( '<div class="page-break"></div>');
    }

});

заранее спасибо

kojay 20 янв. 2014, в 19:45

Источник

Теги:

jquery

printing

2 ответа

0

Не совсем уверен, что я получаю вашу разметку, но что-то вроде этого добавит новый перерыв страницы, прежде чем общая высота разделов превысит лимит вашей страницы.

$(function(){

    var pageHeight = 100,
        staticHeight = 0,
        pageBreak = '<div class="page-break">Page Break</div>';

    $('[data-print=section]')
        .filter(':visible')
        .each(function() {

            elHeight = $(this).outerHeight(true);
            var total = elHeight + staticHeight;

            if (total > pageHeight){
                $(this).after(pageBreak);
                console.log(staticHeight);
                staticHeight = 0;
            } else {
                staticHeight += elHeight;
            }

        });

});

PHearst 20 янв. 2014, в 18:21

Ещё вопросы

DJ. · Accepted Answer · 2014-01-20T17-38-00.000Z

Установите переменную staticHeight вне каждой области и сбросьте ее при добавлении разрыва страницы. Глянь сюда

var staticHeight = 0;
var pageHeight = 100
$('[data-print=section]').each(function() {

    staticHeight += $(this).filter(':visible').outerHeight(true);


    console.log(staticHeight)

    if (staticHeight > pageHeight) {
        $(this).after( '<div class="page-break">Page Break</div>');
        staticHeight = 0;
    }

});

http://jsfiddle.net/3C4x7/

Я установил pageHeight на 100, чтобы заставить его работать на Fiddle

Возможно, вы захотите добавить разрыв страницы перед элементом, а не после, в противном случае вы можете получить два элемента с большей высотой, чем ваш pageHeight.