Question

Enquire.js 是一个Javascipt，它为Javascripts重新创建CSS媒体查询。这意味着您可以将Javascripts包装在Media Queries中。（就像你在媒体查询中包装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中链接到该文件，但我不确定您将如何操作。（虽然我知道它会让你的脚本更加可重用，但它会很方便。）

PS。这不是对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来访问网站。然后，您正在测试的媒体设备和媒体查询功能将由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/

希望有所帮助：）

如何使用Enquire.Js？

1 个答案: