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

Responsive Web Design用に表示サイズの複数のブレイクポイントを定義し、異なるイベントを設定できるjQueryのプラグインを紹介します。

Breakpoints.js
デモページ：幅1200pxで表示

[ad#ad-2]

• Breakpoints.jsのデモ
• Breakpoints.jsの実装

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>