如何使用Enquire.Js？

Question

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

我不太清楚怎么用它。本教程说：

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

然而，当我这样做的时候，我的代码就停止工作了。

这是是一些没有Enquire.JS的Jquery的例子，它工作得很好。

以下是使用相同的选项卡，但添加了Enquire.JS。现在它停止工作了。

我试验过不同的代码变体，但它们都不起作用。我做错了什么？

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

PS。这不是对Enquire.Js的批评。我知道问题完全在于我对Javascript缺乏熟练程度！我确实花了几个小时寻找解决方案，但什么也找不到。

谢谢你的帮助！

Answer 1

编辑： enquire.js v2现在出来了，文档中包含工作实例

我知道您在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

});

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

第二个更微妙的问题是您的媒体查询被认为是无效的。任何媒体查询功能都必须用圆括号包围。另外，您通常希望指定一个媒体设备(在这里简要介绍：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/

希望有帮助:)