Question

我有Turn4JS的函数，可以在网站上生成图书用户界面。问题是Javascript / JQuery细节以绝对像素接受宽度和高度的书本大小，而不是百分比或任何其他格式。

示例：

$( document ).ready(function() {
    $("#guestbook").turn({
        width: 500, /* pixels */
        height: 360,
        autoCenter: true
    });
});

问题在于网站是移动兼容的（当然），所以小型智能手机设备的书的大小应该是300px宽度最大，但显然在更大的屏幕上看起来非常小。

因此，我在Javascript上运行媒体查询，根据浏览器大小设置宽度/高度值。我将此设置为在文档准备以及窗口调整大小和窗口方向更改

上触发的功能

Jquery的：

function guestbookSize() {
    if ($(window).width() > 1200) {
        $("#guestbookbook").turn({
            width: 700,
            height: 500
        });
    }
    else if ($(window).width() <= 1200 && $(window).width() > 801) {
        $("#guestbookbook").turn({
            width: 500,
            height: 360
        });
    }
    else if ($(window).width() <= 800 && $(window).width() > 360) {
       /* You get the idea */ 
    }
    else if ($(window).width() <= 360) {
        $("#guestbookbook").turn({
            width: 300,
            height: 360
        });
    }
}

$( document ).ready(function() {
    $(document).ready(guestbookSize);
});
$(window).on("orientationchange",guestbookSize);
$(window).resize(guestbookSize);

我非常确定我的编码非常糟糕，但文档加载调用每次都有效。

窗口调整大小调用不起作用。

所以我的问题是：

如何在不刷新整个页面的情况下重新初始化.turn函数中guestbookSize函数的选项？

备注：

我正在使用JQuery 1.11.3
我看过Refire ready event after AJAX reload看似相似但没有运气。
我已经探讨了Turn4JS official documentation，它充其量只是补丁。
我确实有两种方法可以编辑Turn4JS jquery文件来接受看起来像一个可怕的工作的百分比，或者只是根据给定的width / height来确定大小客户端屏幕大小/方向。

错误：

重新建立turn选项时，在firebug上遇到错误：

HierarchyRequestError：无法在指定点插入节点   在层次结构中

.. XP（＆＃34;＆≤（：＆＃34 + EA +＆＃34;）[\ S /＆GT;]＆＃34;＆＃34; I＆＃34），公顷= / ^ \ S + /，IA = /≤（？区域| BR |山口|嵌入|小时| IMG |输入|利...

引用jquery.1.11.3.min.js的第4行。

Answer 1

我在document.ready中添加了事件绑定并删除了重复项。

似乎工作 - 在Chrome 48，FF 43，IE9上测试 - 它们都有效（在Windows上）

＆＃13;

$(document).ready(function() {
  initBook(300, 400);
  $(window).on("orientationchange", guestbookSize);
  $(window).resize(guestbookSize);
});

function initBook(w, h) {
  $("#flipbook").turn({
    width: w,
    height: h
  });
}

function guestbookSize() {
  if ($(window).width() > 1200) {
    initBook(700, 500);
  } else if ($(window).width() <= 1200 && $(window).width() > 801) {
    initBook(500, 360);
  } else if ($(window).width() <= 800 && $(window).width() > 360) {
    initBook(400, 360);
  } else if ($(window).width() <= 360) {
    initBook(300, 360);
  }
}

＆＃13;

/* to see book resize */

#flipbook {
  border: 2px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.turnjs.com/lib/turn.min.js"></script>

<h2>
Book
</h2>
<div id="flipbook">
  <div class="hard">Turn.js</div>
  <div class="hard"></div>
  <div>Page 1</div>
  <div>Page 2</div>
  <div>Page 3</div>
  <div>Page 4</div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>
<hr/>

＆＃13;

jquery在页面加载后重新启动一个函数

1 个答案: