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

Question

我不确定这是否已经讨论过，我尝试在问题列表中搜索，但找不到任何相关内容。

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

或者有没有办法知道每个页面需要绑定多少数据才能让这个场景正常工作。

Answer 1

这是将内容拆分为页面的解决方案，然后使用 turn.js 创建一本书。

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

此代码从特定 div 中“读取”html 并发挥作用；）

此外，您可以使用jsbin中的代码。

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

根据文档（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 结构以查看如何解决问题。