NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

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

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1377日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

以前ちょっと触れたBreakpoints.jsですが、実際に少し触ってみました。

このBreakpoints.jsは、その名の通り、JSでブレイクポイントを設定して、画面サイズに応じて異なるjQueryイベントを発火させられるというなかなか便利そうなスクリプトです。

とりあえず試してみました。

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

まずは、公式サイトからダウンロードします。
http://xoxco.com/projects/code/breakpoints/

ダウンロードリンクをクリックするとGitHubに飛びますので、「雲のマークにZIP」と書かれたアイコンをクリックすると一式ダウンロードできます。

ダウンロードしたら、スクリプトを入れてるフォルダに移動して、読み込みます。
jQueryプラグインなので、本体も読み込みます。

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

設定してみる

はじめにオプションと、ブレクポイントの設定をします。

distinctオプションを切り替えると、ブレイクポイントより小さいときのファンクションをすべて発火させるかどうかを切り替えることができるようです。

breakpointsのなかに、数字をカンマ区切りでセットすると、その数値でブレイクポイントが作られ、

$(window).bind(‘enterBreakpointブレイクポイント値‘,function() {});

$(window).bind(‘exitBreakpointブレイクポイント値‘,function() {});

という2つの関数が使えるようになります。(複数ブレイクポイントを設定した場合、その数分だけEnterとExitが使えるようになります。)

それぞれ、指定した範囲に入るとEnterが呼ばれ、範囲をはずれるとExitが呼ばれるようです。

範囲は、前に設定したブレイクポイントが複数の場合、0から最初の値、最初の値から次の値……その次の値から∞といった感じだとおもいます(スミマセン時間がなくて細かい検証ができてません)

とりあえず全部の関数に対してコンソールログで異なるメッセージを出すようにしてウィンドウをぐりぐりしてみればどう動くかはなんとなくわかると思います。

 うまく動かなかった

と、いうことで、ブレイクポイントを何個かつくり、PCの時はメニューをドロップダウン、スマホの時は何もしない

みたいな感じで書いてみたのですが、確かにはじめからスマホサイズの状態ならメニューは何も起こらず、ウィンドウを広げたらドロップダウンになったのですが、

ここからウィンドウを縮めたらドロップダウンのスクリプトがずっと生きているみたいで、スマホ用レイアウトなのにメニューがフェードで消える現象が出てきちゃいました。。。

通常スマホの人はずっとスマホだし、PCの時はスマホの幅まで行かないだろうし、スマホ横持ちでも多分PC用ブレイクポイントまでは届かない…と思ううし(多分)、そこまで神経質にならなくてもいいのかもしれませんが、なんか気持ち悪いのでコレは何とかしたい。

自分の書き方が悪いのかもしれませんが、とりあえず今の案件では検証してる時間がないので、今回は採用を見送りました。。

もう少し時間があるときに、また改めてリベンジしようと思います。

 

TAGS