在TurnJs Flipbook上动态放置大型HTML内容

Question

我不确定这是否已经讨论过,我试着搜索问题列表但找不到与之相关的任何内容.

我有一个大的HTML内容,我需要使用turn.js绑定.我的问题是,使用转js,我将不得不将HTML拆分为单独的div标签作为页面.是否有一种方法在turn.js中绑定div上的内容,它会根据被绑定的内容自动包装到不同的页面？

或者有没有办法知道需要将多少数据绑定到每个页面才能使此方案正常工作.

Answer 1

根据文档（http://www.turnjs.com/docs/Method:_addPage），您可以动态添加页面。因此，当页面加载时，您可以自定义拆分页面并动态添加它们。像这样的东西。

想象一下这个HTML：

<div class="page">
    <h2>Title</h2>
    <p>Content</p>
</div>
<div class="page">
    <h2>Title</h2>
    <p>Content</p>
</div>
<div class="page">
    <h2>Title</h2>
    <p>Content</p>
</div>
<div class="page">
    <h2>Title</h2>
    <p>Content</p>
</div>
<div id="flipbook"></div>

我们这里有 4 个页面，但所有页面都在同一页面中，最后一个元素是构建翻页书的地方。因此，当我们加载页面时，让我们用Javascript将它们分开：

$(document).ready(function() {
    // initialize the flipbook
    $("#flipbook").turn({page: 1, acceleration: true, gradients: true});

    // first we declare an array to store pages contents
    var pagesArray = [];
    $('.page').each(function() {
        // iterate through all pages and store the HTML inside
        pagesArray.push($(this).html());
    });

    // iterate the array and add pages dinamically
    for(var i in pagesArray) {
        // add the element within a div with the content that store before
        var element = $("<div />").html(pagesArray[i]);
        // add the page with the counter + 1 (first page is 1 not 0)
        $("#flipbook").turn("addPage", element, (i+1));
    }
});

就这样。

告诉我们这是否符合您的要求。如果没有，请与我们分享您的 html 结构，以查看如何解决问题。