これがすでに議論されているかどうかはわかりません。問題のリストを検索してみましたが、それに関連するものは見つかりませんでした。
turn.js を使用してバインドする必要がある大きな HTML コンテンツがあります。私が抱えている問題は、turn js を使用すると、HTML をページとして個別の div タグに分割する必要があることです。turn.js でコンテンツを div にバインドする方法はありますか?バインドされているコンテンツに基づいて、異なるページに自動的にラップされますか?
または、このシナリオを機能させるために各ページにバインドする必要があるデータの量を知る方法はありますか?
コンテンツをページに分割し、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>この解決策があなたにとっての方向性であると言うことが重要です。これをニーズに正確に合わせるためにコードを追加する必要がある可能性が最も高いですが、私はあなたのためにほとんどの方法で行いました.
ドキュメント ( 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 構造を私たちと共有して、問題の解決方法を確認してください。