1

Enquire.js は、JavaScript の CSS メディア クエリを再作成する Javascript です。これは、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 関数内に配置したことです。これは実際には問題なく動作する可能性がありますが、代わりにすべての inquire コードを ready コールバック内に配置することをお勧めします。

$(document).ready(function() {

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

});

すべての一致関数に登録コールバックを追加する必要がないため、これはより良いアプローチです (複数のハンドラーまたは複数のクエリがある場合)。

2 つ目の、より微妙な問題は、メディア クエリが有効と見なされないことです。メディア クエリ機能はすべて、括弧で囲む必要があります。また、通常はメディア デバイスを指定する必要があり (ここで簡単に説明します: http://www.w3.org/TR/css3-mediaqueries/#background )、通常は Web サイトを選択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 に答える