Breakpoints.jsでレスポンシブなjQuery操作をしようとして、挫折した

以前ちょっと触れたBreakpoints.jsですが、実際に少し触ってみました。
このBreakpoints.jsは、その名の通り、JSでブレイクポイントを設定して、画面サイズに応じて異なるjQueryイベントを発火させられるというなかなか便利そうなスクリプトです。
とりあえず試してみました。

ダウンロード、そしてインストール。

まずは、公式サイトからダウンロードします。
http://xoxco.com/projects/code/breakpoints/
ダウンロードリンクをクリックするとGitHubに飛びますので、「雲のマークにZIP」と書かれたアイコンをクリックすると一式ダウンロードできます。
ダウンロードしたら、スクリプトを入れてるフォルダに移動して、読み込みます。
jQueryプラグインなので、本体も読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="lib/breakpoints.js"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="lib/breakpoints.js"></script>

この例だとスクリプトは「lib」フォルダに入れてます。

設定してみる

はじめにオプションと、ブレクポイントの設定をします。
distinctオプションを切り替えると、ブレイクポイントより小さいときのファンクションをすべて発火させるかどうかを切り替えることができるようです。
breakpointsのなかに、数字をカンマ区切りでセットすると、その数値でブレイクポイントが作られ、
$(window).bind(‘enterBreakpointブレイクポイント値‘,function() {});
と
$(window).bind(‘exitBreakpointブレイクポイント値‘,function() {});
という２つの関数が使えるようになります。（複数ブレイクポイントを設定した場合、その数分だけEnterとExitが使えるようになります。）
それぞれ、指定した範囲に入るとEnterが呼ばれ、範囲をはずれるとExitが呼ばれるようです。
範囲は、前に設定したブレイクポイントが複数の場合、0から最初の値、最初の値から次の値……その次の値から∞といった感じだとおもいます（スミマセン時間がなくて細かい検証ができてません）
とりあえず全部の関数に対してコンソールログで異なるメッセージを出すようにしてウィンドウをぐりぐりしてみればどう動くかはなんとなくわかると思います。

$(window).setBreakpoints({
// use only largest available vs use all available
    distinct: true,
// array of widths in pixels where breakpoints
// should be triggered
    breakpoints: [
        320,
        768,
        1024
    ]
});
$(window).bind('enterBreakpoint320',function() {
    console.log('enter 320');
});
$(window).bind('exitBreakpoint320',function() {
    console.log('exit 320');
});
$(window).bind('enterBreakpoint768',function() {
    console.log('enter 768');
});
$(window).bind('exitBreakpoint768',function() {
    console.log('exit 768');
});
$(window).bind('enterBreakpoint1024',function() {
    console.log('enter 1024');
});
$(window).bind('exitBreakpoint1024',function() {
    console.log('exit 1024');
});

$(window).setBreakpoints({

// use only largest available vs use all available

distinct: true,

// array of widths in pixels where breakpoints

// should be triggered

breakpoints: [

320,

768,

1024

]

});

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

console.log('enter 320');

});

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

console.log('exit 320');

});

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

console.log('enter 768');

});

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

console.log('exit 768');

});

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

console.log('enter 1024');

});

$(window).bind('exitBreakpoint1024',function() {

console.log('exit 1024');

});

うまく動かなかった

と、いうことで、ブレイクポイントを何個かつくり、PCの時はメニューをドロップダウン、スマホの時は何もしない
みたいな感じで書いてみたのですが、確かにはじめからスマホサイズの状態ならメニューは何も起こらず、ウィンドウを広げたらドロップダウンになったのですが、
ここからウィンドウを縮めたらドロップダウンのスクリプトがずっと生きているみたいで、スマホ用レイアウトなのにメニューがフェードで消える現象が出てきちゃいました。。。
通常スマホの人はずっとスマホだし、PCの時はスマホの幅まで行かないだろうし、スマホ横持ちでも多分PC用ブレイクポイントまでは届かない…と思ううし（多分）、そこまで神経質にならなくてもいいのかもしれませんが、なんか気持ち悪いのでコレは何とかしたい。
自分の書き方が悪いのかもしれませんが、とりあえず今の案件では検証してる時間がないので、今回は採用を見送りました。。
もう少し時間があるときに、また改めてリベンジしようと思います。

NeGiMeMo.net

Breakpoints.jsでレスポンシブなjQuery操作をしようとして、挫折した

ダウンロード、そしてインストール。

設定してみる

うまく動かなかった

いいね:

コメントするコメントをキャンセル

関連投稿

Breakpoints.jsでレスポンシブなjQuery操作をしようとして、挫折した

ダウンロード、そしてインストール。

設定してみる

うまく動かなかった

Share this:

いいね:

コメントする コメントをキャンセル

関連投稿

コメントするコメントをキャンセル