如何使用Enquire.Js？

Enquire.js是Javascipt，重新創建Javascript媒體查詢。這意味着你可以將你的Javascript包裝在媒體查詢中。（就像你會在媒體查詢中包裝CSS一樣）。如何使用Enquire.Js？

我不太清楚如何使用它。 This tutorial這樣說：

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

然而，當我跟隨的是，我的代碼停止工作。

Here is一些沒有Enquire.JS的Jquery Tabs的例子。它工作正常。

Here are相同的標籤，但添加了Enquire.JS。現在它停止工作。

我已經試驗了代碼的不同變體，但都沒有工作。我究竟做錯了什麼？

我想你可能已經將Jquery Tab代碼放在一個單獨的文件中，然後從Enquire.Js鏈接到該文件，但我不確定你會怎麼做。（儘管知道我會想象它會讓你的腳本更加可重用）。

PS。這不是對Enquire.Js的批評。我知道問題在於我缺乏對Javascript的熟練程度！我花了幾個小時尋找解決方案，但找不到任何東西。

感謝您的幫助！

來源

2012-10-08 big_smile

編輯： 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/

希望幫助:)

來源

2012-10-08 21:35:45 WickyNilliams

嗨感謝您的幫助。我有一些跟進問題，但他們在這個小小的評論框中發佈有點尷尬。可以將它們發佈到Github線程上，還是應該將它們作爲單獨的Stackoverflow問題發佈？ –

取決於你確實有什麼類型的問題。如果由於文檔不清楚而導致缺乏理解，請隨時在github上添加現有問題。如果這只是一般用法問題，請在此處創建一個新問題，回覆讓我知道你在做什麼 – WickyNilliams

嗨，謝謝你的好意。我在這裏發佈了新的問題：http://stackoverflow.com/questions/12808691/using-enquire-js-to-switch-between-scripts-according-to-screen-size –

如何使用Enquire.Js？

回答

相關問題