如何使用Enquire.Js？

Question

Enquire.js是一個Javascipt，可為Javascript重新創建CSS媒體查詢。 這意味着您可以將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語言方面！ 我確實花了幾個小時來尋找解決方案，但找不到任何東西。

謝謝你的幫助！

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函數中。 盡管這實際上可以很好地工作，但最好將所有查詢代碼都包含在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/

希望有幫助:)