如何使用Enquire.Js？

Question

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

我不太清楚如何使用它.本教程说明了这一点:

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

但是,当我遵循它时,我的代码停止工作.

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

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

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

我想你可能已将Jquery Tab代码放在一个单独的文件中,然后从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

我现在将解释一些小问题.最明显的是您已将文档就绪回调放在匹配函数中.虽然这实际上可以完美地工作,但是更好的做法是将所有查询代码放在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/

希望有帮助:)