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

Question

我不知道这是否已经讨论过，我试着搜索问题清单，但找不到任何与它有关的东西。

我有一个大型的HTML内容，需要使用turn.js绑定。我遇到的问题是，在转js时，我必须将HTML分割成单独的div标记作为页面。在turn.js中是否有一种方法来绑定div上的内容，并根据正在绑定的内容自动包装到不同的页面？

或者，是否有一种方法可以知道每个页面需要绑定多少数据才能使这个场景正常工作。

Answer 1

下面是一个将内容拆分到页面的解决方案，并使用turn.js创建一本书。

这个解决方案的逻辑是检查下一个内容是否可以在当前页面中，或者我们需要创建一个新页面并将内容放在那里。

这段代码从特定的div中“读取”html并执行魔术;)

Alse，您可以使用吉斯宾中的代码。

​

var width = 400,
    height = 400,
    padding = 20;

// create a tester div. in this `div` we will put the contents and check if we need a new page
var div = $('<div />').css({
  // divide it by 2 because each page is half from the book
  width: width / 2
}).appendTo(document.body);

var index = 0;
var pages = [];
// get all content from the input html
var contents = $('#text').contents();

while (index < contents.length) {
  var content = contents.eq(index).clone();
  
  div.append(content);
  // check whether the contents exceed the page, if so, remove this content from the page
  if (div.height() > height) {
    content.remove();
    // create a new page
    pages.push(div.clone());
    // reset the tester div's html to check the next content
    div.html('');
  }
  // if this is the last content, push it to a new page and break
  else if (index == contents.length - 1) {
    pages.push(div.clone());
    div.remove();
    break;
  }
  // go to the next content
  else {
    index++;
  }
}

var book = $('#book');
for (var i = 0; i < pages.length; i++) {
  //book.after(pages[i].clone());
  //book.after('<hr />');
  book.append(pages[i]);
}

// init the plugin
book.turn({
  width: width,
  height: height,
  gradients: true, 
  acceleration: true
});

.sample-flipbook .page {
  line-height:1 !important;
  font-size:inherit !important;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://www.turnjs.com/lib/turn.min.js"></script>
<link href="http://www.turnjs.com/samples/basic/css/basic.css" rel="stylesheet" />

<div id="book" class="sample-flipbook"></div>

<div id="text">
  <p>Lorem ipsum dolor sit amet, sed probatus dissentias cu. Ex liber error vim. Habeo mollis cu qui, eu cum graeco scripta nostrum, est et delenit suscipit. Eius meliore iudicabit per in, pro numquam fabellas id.
  </p>
  <p>blablabla</p>
    <p>blablabla1</p>
    <p>blablabla2</p>
    <p>blablabla4</p>
    <p>blablabla5</p>
    <p>blablabla6</p>
    <p>blablabla7</p>
  <p>
Ponderum gubergren adversarium pri ad. Mea ne veri scribentur. Nam populo conclusionemque te. Ad albucius voluptatum vix, cum id dicta facilis petentium. His no rebum vivendo. Per esse illum nihil eu, eos affert ceteros ne.
  </p>
  <p>
At mea nostro oportere reprimique. Vim veri facilisi deterruisset in, maiorum referrentur id mea. Vel eligendi euripidis ullamcorper eu. Vix eu veri primis sententiae, sumo eligendi conclusionemque ad his. Ea quando luptatum rationibus eam, et dico aliquid eloquentiam his. Mea primis intellegebat ne, ea regione equidem ullamcorper usu.
  </p><p>
Mel in natum recusabo aliquando, tollit probatus qui in. Ex labore pertinax oportere ius, nobis iudico cu quo. Malis dicunt moderatius eum ex, quaeque consetetur duo ne. Ea veri inimicus mei, vim eu constituam consequuntur.
  </p>
  <p>
Per id ancillae efficiantur. Eam platonem recteque euripidis et. Usu tota dolore tibique id, id libris molestiae mel. Cu odio illud appareat mei. Quis vitae ne usu. Ut eos magna prima.</p>
    <p>Lorem ipsum dolor sit amet, sed probatus dissentias cu. Ex liber error vim. Habeo mollis cu qui, eu cum graeco scripta nostrum, est et delenit suscipit. Eius meliore iudicabit per in, pro numquam fabellas id.
  </p>
  <p>
Ponderum gubergren adversarium pri ad. Mea ne veri scribentur. Nam populo conclusionemque te. Ad albucius voluptatum vix, cum id dicta facilis petentium. His no rebum vivendo. Per esse illum nihil eu, eos affert ceteros ne.
  </p>
  <p>
At mea nostro oportere reprimique. Vim veri facilisi deterruisset in, maiorum referrentur id mea. Vel eligendi euripidis ullamcorper eu. Vix eu veri primis sententiae, sumo eligendi conclusionemque ad his. Ea quando luptatum rationibus eam, et dico aliquid eloquentiam his. Mea primis intellegebat ne, ea regione equidem ullamcorper usu.
  </p><p>
Mel in natum recusabo aliquando, tollit probatus qui in. Ex labore pertinax oportere ius, nobis iudico cu quo. Malis dicunt moderatius eum ex, quaeque consetetur duo ne. Ea veri inimicus mei, vim eu constituam consequuntur.
  </p>
  <p>
Per id ancillae efficiantur. Eam platonem recteque euripidis et. Usu tota dolore tibique id, id libris molestiae mel. Cu odio illud appareat mei. Quis vitae ne usu. Ut eos magna prima.</p>
  </div>

​

--很重要的一点是，这个解决方案是你的方向。您最有可能需要添加更多代码来完全满足您的需要，但我为您做了大部分工作。。

Answer 2

根据文档(addPage)，您可以添加显式页面。因此，当页面被加载时，您可以自定义拆分页面并将它们添加到二进制文件中。就像这样。

想象一下这个

<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结构，看看如何解决问题。