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

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

デモのキャプチャ

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

Breakpoints.jsのデモ

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

デモのキャプチャ

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

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

  • 1024px
  • 768px
  • 480px
  • 320px

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>

top of page

©2017 coliss