如何使用 Enquire.Js？

Question

Enquire.js 是一个 Javascipt，它为 Javascript 重新创建 CSS 媒体查询。 这意味着您可以将 Javascript 包装在媒体查询中。 （就像您在媒体查询中包装 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

这里有一些小问题，我现在将解释。最明显的是您已将文档就绪回调放在 match 函数中。虽然这实际上可能工作得很好，但将所有查询代码都放在就绪回调中会被认为是更好的做法：

$(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。然后，您正在测试的媒体设备和媒体查询功能由 and 分隔：

$(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/

希望有帮助:)