如何使用Enquire.Js? [英] How to use Enquire.Js?

问题描述

Enquire.js 是重新创建的Javascipt CSS媒体查询Java语言. 这意味着您可以将Javascript包装在Media Queries中. (就像您将CSS封装在Media Queries中一样).

我不太确定如何使用它. 本教程这样说:

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

但是，当我遵循该步骤时，我的代码将停止工作.

此处是一些没有Enquire.JS的Jquery选项卡的示例.效果很好.

此处是相同的标签，但添加了Enquire.JS.现在它停止工作了.

我已经尝试了不同的代码变体，但是没有一个起作用.我在做什么错了?

我认为您可能已经将Jquery Tab代码放在一个单独的文件中，然后从Enquire.Js中链接到该文件，但是我不确定您将如何执行. (尽管如我所料，这将很方便，因为它会让您保持脚本的可重用性).

PS.这不是对Enquire.Js的批评.我知道问题出在我缺乏Java语言方面！我确实花了几个小时来寻找解决方案，但找不到任何东西.

感谢您的帮助！

解决方案

enquire.js v2现已发布，文档中包含

现在有一些小问题，我将在后面解释.最明显的是，您已经将文档准备好的回调 放在了match函数中.尽管这实际上可以很好地工作，但最好将所有查询代码都包含在ready回调中:

$(document).ready(function() {

    enquire.register("max-width: 500px", function() {
        $("#tabs").tabs();
    }).listen(); //note: as of enquire.js v2 listen() has been deprecated

});

这是一种更好的方法，因为您不必在每个match函数中都添加一个注册回调(如果您有多个处理程序或多个查询.

第二个更微妙的问题是您的媒体查询被认为无效.任何媒体查询功能都必须用括号括起来.另外，您通常还需要指定一种媒体设备(在此处简要介绍: 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 is a Javascipt that re-creates CSS media queries for Javascripts. This means you can wrap your Javascripts in Media Queries. (Just like you would wrap CSS in Media Queries).

I'm not quite sure how to use it. This tutorial says this:

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

However, when I follow that, my code stops working.

Here is an example of some Jquery Tabs without Enquire.JS. It works fine.

Here are the same tabs, but with Enquire.JS added. Now it stops working.

I've experimented with different variations of the code, but none of them work. What am I doing wrong?

I think you might have place the Jquery Tab code in a separate file and then link to that file from within Enquire.Js, but I'm not sure how you would do that. (Although it would be handy to know as I'd imagine it would let you keep your scripts be more reusable).

PS. This is not a criticism of Enquire.Js. I know that the problem lies squarely with my lack of proficiency in Javascript! I did spend a couple of hours searching for a solution, but couldn't find anything.

Thanks for any help!

解决方案

EDIT: enquire.js v2 is now out and the documentation includes working examples

I know you asked me on GitHub about better documentation in general, but I came across this question here so thought I'd try to help with the specific problem you're having here as well.

Your original code was as so:

enquire.register("max-width: 500px", function() {

    $(document).ready(function() {
        $("#tabs").tabs();
    });

}).listen(); //note: as of enquire.js v2 listen() has been deprecated

There's a few small issues with this which I'll explain now. The most obvious is that you have placed the document ready callback inside the match function. Whilst this may actually work perfectly fine, it would be considered better practice to instead have all the enquire code inside the ready callback:

$(document).ready(function() {

    enquire.register("max-width: 500px", function() {
        $("#tabs").tabs();
    }).listen(); //note: as of enquire.js v2 listen() has been deprecated

});

This is a better approach because you don't have to add a register callback in every match function (if you have more than one handler or more than one query.

The second, more subtle, problem is that your media query is not considered valid. Any media query feature must be surrounded by parentheses. Also you typically want to specify a media device (briefly covered here: http://www.w3.org/TR/css3-mediaqueries/#background), usually you would pick screen for websites. The media device and media query feature you're testing for are then separated by an 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

That should then be all that is required to fix your code. You can see a completed example here: http://jsfiddle.net/WickyNilliams/3nXce/

Hope that helps :)

这篇关于如何使用Enquire.Js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！