1

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

我不太确定如何使用它。本教程是这样说的：

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

但是，当我遵循这一点时，我的代码将停止工作。

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

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

我已经尝试了不同的代码变体，但它们都不起作用。我究竟做错了什么？

我认为您可能已将 Jquery Tab 代码放在单独的文件中，然后从 Enquire.Js 中链接到该文件，但我不确定您将如何做到这一点。（虽然知道它会很方便，因为我想它会让你的脚本更可重用）。

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

谢谢你的帮助！

4

1 回答 1

12

编辑： 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 函数中。虽然这实际上可能工作得很好，但将所有查询代码都放在 ready 回调中会被认为是更好的做法：

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

希望有帮助:)

于 2012-10-08T21:35:45.980 回答