如何增加turn.js的DOM页面的数量
How to increase the amount of pages in DOM of turn.js
Turn.js可以处理非常长的flipbook。也就是说,没有限制关于它可以包含的页面数量。这是因为turn.js只保留DOM的最后6页,无论多长时间书。仍然会有对内容的引用以前加载,但可以减少缓存,以便释放内存。
我想在DOM中保留前7页。怎么能做到呢?在turn.js中定义的pagesInDOM
限制是6 .
<div id=”flipbook”>
<div class=”hard”>Page 1</div>
<div class=”hard”>Page 2</div>
<div class=”hard”>Page 3</div>
<div class=”hard”>Page 4</div>
<div class=”hard”>Page 5</div>
<div class=”hard”>Page 6</div>
<div class=”hard”>Page 7</div>
<div class=”hard”>Page 8</div>
<div class=”hard”>Page 9</div>
<div class=”hard”>Page 10</div>
</div>
js
var oTurn = $('#flipbook').turn({
width: 1700,
height: 850,
elevation: 50,
gradients: false,
autoCenter: true,
acceleration: true,
start: function (event, pageObject, corner) {
if (pageObject.next === 1)
event.preventDefault();
},
turning: function (event, page, view) {
if (page === 1)
event.preventDefault();
}
});
pagesInDOM变量在turn.js中是硬编码的,我还没有找到一种方法来传递一个不同的值作为turn.js扩展jQuery。我想看到它可作为实例化时的一个选项,但项目现在似乎死了。我找到的唯一解决方案是进入文件并手动为其分配一个不同的值,在您的示例中为pagesInDOM = 7;
。
也就是说,在非简化版本的声明上方有一个注释:
// Number of pages in the DOM, minimum value: 6
pagesInDOM = 6,
我做了一些测试,当这本书有超过4页,这个值低于6时,页面接近范围的末端不会加载,当你翻阅这本书时你会发现空白页。我相信这是由于范围函数,它确定是否应该在翻转时加载另一个页面。
从turn.js:// Returns a range of pages that should be in the DOM
// Example:
// - page in the current view, return true
// * page is in the range, return true
// Otherwise, return false
// 1 2-3 4-5 6-7 8-9 10-11 12-13
// ** ** -- ** **
range: function(page) {
var remainingPages, left, right, view,
data = this.data();
page = page || data.tpage || data.page || 1;
view = turnMethods._view.call(this, page);
if (page<1 || page>data.totalPages)
throw turnError('"'+page+'" is not a valid page');
view[1] = view[1] || view[0];
if (view[0]>=1 && view[1]<=data.totalPages) {
remainingPages = Math.floor((pagesInDOM-2)/2);
if (data.totalPages-view[1] > view[0]) {
left = Math.min(view[0]-1, remainingPages);
right = 2*remainingPages-left;
} else {
right = Math.min(data.totalPages-view[1], remainingPages);
left = 2*remainingPages-right;
}
} else {
left = pagesInDOM-1;
right = pagesInDOM-1;
}
return [Math.max(1, view[0]-left),
Math.min(data.totalPages, view[1]+right)];
},
简而言之,将turn.js中的pagesInDOM的值更改为7,您应该能够实现所需的结果。
如果你想动态设置pagesInDOM
,你可以传入构造函数。(我不知道为什么这是硬编码在库)
const pagesInDOMDynamic = 8;
$('#flipbook').turn({
width: '300px',
height: '300px',
pagesInDOM: (pagesInDOMDynamic < 6) ? 6 : pagesInDOMDynamic // pass the value to the constructor, If value is less than 6 pass 6 here
});
然后在turn。js中,在init function
中添加这一行turnMethods = {
init: function(options) {
pagesInDOM = options.pagesInDOM; // retrieve and set the value,
相关文章:
- 如何将Knockout.JS与服务器已经在DOM中呈现的数据同步
- 从popup.js|Chrome扩展访问DOM
- 如何让React JS点击处理程序在执行时更新DOM
- JS应用程序中基于DOM的XSS保护
- React.js如何使用虚拟DOM加速渲染
- spin.js/angular spinner:如何将spin定位到DOM元素中(包括plunker演示)
- 正在寻找从JSON/对象构建DOM客户端的JS库
- Ember.js-获取DOM元素的模型数据
- Ember.js:通过绑定/模型查找DOM元素
- 你能在JS中获得一个样式而不将其附加到DOM元素吗
- 来自jQuery,如何在React.js中制作DOM动画?例如设置进度条的动画
- 在执行JS脚本后监视对DOM的更改
- Angular JS根据搜索结果和点击事件更新DOM元素
- 在 Greasemonkey 中修改 Angular JS 中的 DOM 元素
- 如何在 Knockout.js 中更新可观察数组后立即使用 DOM 容器
- Raphael JS:如何从 Dom 对象(Element.node)获取 Raphael 元素
- JS DOM - document.getElementById 和按名称选择之间的区别
- 如何访问IE XHTML DOM+JS引擎,而无需启动浏览器本身
- 通过DOM - JS创建事件时传递元素作为参数
- 使用HTML DOM JS分配事件