10

プロジェクトをレスポンシブ デザインに変換しようとしています。

各ブレークポイントに異なる jQuery ブロックを実装するために提案する最も便利で普遍的なソリューションは何ですか?

http 要求の数が原因で、すべてのスクリプトを 1 つのファイルに保持したいと考えています。

それが私が見つけたものです：

  • breakpoint.js -> CSS と JS で倍増するすべてのブレークポイントを定義します
  • http://responsejs.com/ -> body data-attr でブレークポイントを定義
  • OnMediaQuery -> ブレークポイントに人間が読める名前を定義します (私見の方が良いです。ピクセルに縛られていないからです)。

私の問題は、それらはすべてコールバックを定義することですが、これらの場合に jQuery イベントリスナーをバインドまたはキャンセルする方法がわかりません。

たとえば、私は持っています：

$('#selector').click( function() {
    alert('selector clicked');
});

ただし、これは最大幅が 320px の場合にのみ発生します。それを超える画面サイズでは、クリックは false を返すか、他のアクションを実行する必要があります

現時点では、これを達成する方法がわかりません。

4

6 に答える 6

17

JS で独自のブレークポイントを作成するだけです。このようなもの。ニーズに合わせて調整してください。

var isBreakPoint = function (bp) {
    var bps = [320, 480, 768, 1024],
        w = $(window).width(),
        min, max
    for (var i = 0, l = bps.length; i < l; i++) {
      if (bps[i] === bp) {
        min = bps[i-1] || 0
        max = bps[i]
        break
      }
    }
    return w > min && w <= max
}

// Usage
if (isBreakPoint(480)) { ... } // Breakpoint between 320 and 480
于 2012-07-08T23:19:26.927 に答える
12 
$('#selector').click(function() {
    if (parseInt($(window).width()) < 320) {
        ...
    }
});
于 2012-07-08T23:20:05.367 に答える
1

私はいくつかのライブラリなどをいじって、この種のレスポンシブ リスナーを使用することになりました。ブレークポイントには CSS メディア クエリを使用し、スロットラーには UnderscoreJS を使用します。私が見た利点は、ブレークポイントがさまざまなスクリプトに断片化されているのではなく、すべて CSS で定義されていることです。

で使用するCSS@mediaブレークポイントの例::afterbody

body:after {
    content: 'widescreen';
    display: none;
}
@media screen and (max-width: 1024px){
    body:after {
        content: "extra-large";
    }
}
@media screen and (max-width: 768px){
    body:after {
        content: "large";
    }
}
@media screen and (max-width: 640px){
    body:after {
        content: "medium";
    }
}
@media screen and (max-width: 480px){
    body:after {
        content: "small";
    }
}
@media screen and (max-width: 320px){
    body:after {
        content: "tiny";
    }
}

のコンテンツに基づいて起動を待機しているリスナー スクリプトの例body:after。ご覧のとおり、この例では、デバイスの一般性に基づいてウィジェットを表示/非表示/移動/作成するための 2 つの範囲として定義されています。

<script type ="text/javascript">
$(window).resize(_.debounce(function(e){
    var size = window.getComputedStyle(document.body,':after').content.replace(/"|'/g, ''),
        mobile = ["tiny", "small", "medium", "large"].indexOf(size),
        desktop = ["extra-large", "widescreen"].indexOf(size);

    $('.placehold').html('computed breakpoint: ' + size + '<br />mobile index = ' + mobile + '<br />desktop index = ' + desktop);

    if (mobile != -1) {
        $('.placehold2').html('mobile range');
    } else if (desktop != -1) {
        $('.placehold2').html('desktop range');
    }
}, 100)).trigger('resize');
</script>

http://jsfiddle.net/Dhaupin/nw7qbdzx/ - jsfiddle で出力ペインのサイズを変更してテストします。

編集:どうやらブラウザは :after コンテンツをwindow.getComputedStyle(document.body,':after').content別の方法でレンダリングし、一重引用符または二重引用符を挿入します。それらをスクラブするために置換を追加しました。

于 2015-06-26T19:17:27.343 に答える