动态分页-jQuery [英] Dynamic Page-Break - Jquery

问题描述

我正在为动态生成的可打印页面创建脚本.因为此页面是动态生成的，并且各节的高度可能不同，所以插入标记中的预定分页符类不会对其进行裁剪.为了解决这个问题，我正在使用data-print ="section"属性检查每个高度.

I'm creating a script for a printable page that's generated dynamically. Because this page is generated on the fly and the sections could have varying heights, a predetermined page-break class inserted in the markup doesn't cut it. To get around this, I'm checking the height of each with a data-print="section" attribute.

我正在努力的是...每个data-print ="section"需要生成一个运行总计.当该总数大于变量"pageHeight"时，它将插入以将内容强制到第二页.插入分页符后，它需要重新开始运行总计，并在总计大于"pageHeight"时插入另一个.

What I'm struggling with is... each data-print="section" needs to generate a running total. When that total is greater than the variable "pageHeight" it inserts to force the content to a second page. Once a page-break is inserted, it needs to start the running total over again and insert another when the total is greater than "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>');
    }

});

预先感谢

推荐答案

在每个作用域之外设置变量staticHeight，并在添加分页符时将其重置.看到这里

Set the variable staticHeight outside the each scope and reset it when adding the page break. See here

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上工作

I set pageHeight to 100 to get it to work on Fiddle

这篇关于动态分页-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！