11

プロジェクトで css メディア クエリを使用して、任意のサイズの画面で動作するサイトを作成しています。CSSの場合と同じように、異なるjquery関数をトリガーしようとしています。

たとえば、ブラウザのサイズが 1000px ～ 1300px の場合、次の関数を呼び出したいと思います。

$('#mycarousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 2,
    wrap: 'circular'
});

しかし、ブラウザのサイズが 1000px を下回ると、js は処理を停止します。などなど。

これが可能かどうかはわかりませんが、ブラウザー ウィンドウのサイズに基づいて異なる js 環境を作成する既存のソリューションまたはプラグインがある可能性があります。なんらかの形式で条件文を作成できると思います。何かご意見は？

4

3 に答える 3

17

Modernizrライブラリは、メディア クエリを評価する JavaScriptの直接呼び出しをサポートしています。

それをしたくない場合は、別の CSS ルールで隠し要素のプロパティを駆動し、「.css()」を使用して jQuery から値を確認できます。つまり、「幅が 1000px より大きい」というルールは、非表示<div>を「幅: 1000px」に設定することができ、それからチェックすることができます。

if ( $("#widthIndicator").css("width") === "1000px") {
  // whatever

これは、ダムのjsfiddleのデモです。中央の区切りバーを左右にドラッグして、JavaScript コード (インターバル タイマー内) が非表示要素の有効な「幅」の変更を検出することを確認します。

レスポンシブ デザインを参照する場合、たとえば、html にマークアップを追加せずに、既存の要素のプロパティをトリガーすることもできます。

if ( $("#navigation li").css("float") === "none") {
于 2011-06-23T22:54:19.270 に答える
14

Pointy が指摘したように、Modernizr の使用は非常に簡単です。

次の JavaScript を追加します。

$(document).ready(function() {
    function doneResizing() {
        if(Modernizr.mq('screen and (min-width:768px)')) {
            // action for screen widths including and above 768 pixels 
        }
        else if(Modernizr.mq('screen and (max-width:767px)')) {
            // action for screen widths below 768 pixels 
        }
    }

    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();
});

こうすることで、ドキュメントが最初に読み込まれたときだけでなく、ブラウザ ウィンドウのサイズを変更したときにも、Modernizr Mediaquery 検出が実行されます。

于 2013-03-22T12:13:22.630 に答える
0

モバイルで作成する必要があるいくつかのカルーセルで同様の問題がありましたが、デスクトップでは破棄されました...そして、ウィンドウの幅をピクセル単位でチェックするという解決策が気に入らなかったので、メディアクエリのときに「リッスン」する小さな関数を作成しましたModernizr を必要とせずに状態が変化します。

すべての状態で独自のコードを定義できます (「モバイル解像度の開始時」、「デスクトップからの離脱時」)...そしてそこにコードを配置します。

希望は他の誰かに役立つかもしれません;)
https://github.com/carloscabo/MQBE
(改善とアイデアは大歓迎です;)

于 2015-02-26T08:06:36.817 に答える