[JS]複数の表示サイズごとに異なるイベントが設定できるResponsive Web Design用のスクリプト -Breakpoints.js

サイト構築 -JavaScript

Post on:2011年12月14日

Breakpoints.jsのデモ

デモページでは、4つのブラウザサイズがブレイクポイントとして設定されています。

デモページ：幅640pxで表示

デモページで設定されているブレイクポイントは下記の4つです。

1024px
768px
480px
320px

[ad#ad-2]

Breakpoints.jsの実装

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://xoxco.com/projects/code/breakpoints/breakpoints.js"></script>

JavaScript

複数のブレイクポイントそれぞれに異なるイベントを設定することができます。

<script>
$(window).setBreakpoints({
// use only largest available vs use all available
    distinct: true, 
// array of widths in pixels where breakpoints
// should be triggered
    breakpoints: [
        320,
        480,
        768,
        1024
    ] 
});     

$(window).bind('enterBreakpoint320',function() {
    ...
});

$(window).bind('exitBreakpoint320',function() {
    ...
});

$(window).bind('enterBreakpoint768',function() {
    ...
});

$(window).bind('exitBreakpoint768',function() {
    ...
});


$(window).bind('enterBreakpoint1024',function() {
    ...
});

$(window).bind('exitBreakpoint1024',function() {
    ...
});
</script>