javascript - 如何使用Enquire.Js？

Question

Enquire.js 是一个 Javascipt，它为 Javascripts 重新创建 CSS 媒体查询。这意味着您可以将 Javascripts 包装在媒体查询中。 (就像您将 CSS 包装在媒体查询中一样)。

我不太确定如何使用它。 This tutorial是这样说的:

enquire.register("max-width: 960px", function() {
  // put your code here
});

但是，当我执行此操作时，我的代码停止工作。

Here is一些没有 Enquire.JS 的 Jquery 选项卡的示例。它工作正常。

Here are相同的选项卡，但添加了 Enquire.JS。现在它停止工作了。

我尝试了不同的代码变体，但没有一个起作用。我做错了什么？

我认为您可能已将 Jquery Tab 代码放在一个单独的文件中，然后从 Enquire.Js 中链接到该文件，但我不确定您将如何做到这一点。 (尽管如我想象的那样知道它会很方便，但它会让您的脚本更易于重用)。

附言。这不是对 Enquire.Js 的批评。我知道问题出在我对 Javascript 不够熟练!我确实花了几个小时寻找解决方案，但找不到任何东西。

感谢您的帮助!

Answer 1

编辑: enquire.js v2 现已发布，文档包括 working examples

我知道您在 GitHub 上问过我关于一般更好的文档的问题，但我在这里遇到了这个问题，所以我想我也会尝试帮助解决您在这里遇到的具体问题。

你原来的代码是这样的:

enquire.register("max-width: 500px", function() {

    $(document).ready(function() {
        $("#tabs").tabs();
    });

}).listen(); //note: as of enquire.js v2 listen() has been deprecated

这里有一些小问题，我现在将对其进行解释。最明显的是您已将文档就绪回调放在匹配函数中。虽然这实际上可能工作得很好，但最好的做法是将所有查询代码放在就绪回调中:

$(document).ready(function() {

    enquire.register("max-width: 500px", function() {
        $("#tabs").tabs();
    }).listen(); //note: as of enquire.js v2 listen() has been deprecated

});

这是一种更好的方法，因为您不必在每个匹配函数中添加注册回调(如果您有多个处理程序或多个查询。

第二个更微妙的问题是您的媒体查询被认为无效。任何media query feature必须用括号括起来。此外，您通常还想指定媒体设备(此处简要介绍:http://www.w3.org/TR/css3-mediaqueries/#background)，通常您会为网站选择 screen。然后，您要测试的媒体设备和媒体查询功能由 和 分隔:

$(document).ready(function() {

    enquire.register("screen and (max-width: 500px)", function() {
        $("#tabs").tabs();
    }).listen();

}); //note: as of enquire.js v2 listen() has been deprecated

这应该就是修复代码所需的全部内容。您可以在此处查看完整示例:http://jsfiddle.net/WickyNilliams/3nXce/

希望对您有所帮助:)