人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryのプラグイン「response.js」を使用してのコールバック方法について

お世話になります。今回jQueryのプラグインである「response.js」を使用してウィンドウ幅によって画像を変更するWEBサイトを作成しておりました。

この「response.js」と「response.js」の公式サイトhttp://responsejs.com/を活用しながて、ウィンドウをリサイズしたら alert("リサイズしました。") というプログラムを実行させたいと思っています。

コールバックのような感じで何かあるかなと http://responsejs.com/#events の部分にそれらしい説明が書いてあると思うのですが、当方、英語が未熟な部分がございまして拝見してもEvents項目のコールバックの仕方がわからない状況です。

ウィンドウサイズを変更して上記のプログラムを実行させるにはどのようなコードの書き方をすれば良いのでしょうか?

●質問者: nagato-yuki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pogpi
●30ポイント

多分ですが、
Response.resize(alert("リサイズしました。"));
でどうですか。


nagato-yukiさんのコメント
ご回答ありがとうございます。 参考になりました!また機会がございましたらよろしくお願い致します!

2 ● a-kuma3
●170ポイント ベストアンサー

こんな感じで書きます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://airve.github.io/js/response/response.js"></script>
<!-- jquery と response.js を読み込んだ後に書く -->
<script>
Response.resize(function(e) {
 alert("リサイズしました。");
});
</script>

ハンドラの中に書く処理によっては、以下のように書いた方が安心です。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://airve.github.io/js/response/response.js"></script>
<!-- jquery と response.js を読み込んだ後に書く -->
<script>
$(function() {
 Response.resize(function(e) {
 alert("リサイズしました。");
 });
});
</script>

コールバックを呼ぶのは jQuery の .on() メソッドを使って実装されているので、ハンドラの引数には jQuery の Event オブジェクトが指定されて、呼び出されます。
http://api.jquery.com/category/events/event-object/

# 使うことはあまりないかもしれませんが。




追記です。
jsFiddle にサンプルを書いてみました。
http://jsfiddle.net/a_kuma3/6TvEE/

alert() はうっとおしいので、console.log を使っています。
イベント発生の様子は、ブラウザの javascript のコンソールを開いて確認してみてください。
フレームやウィンドウのサイズを変える度に、resize に指定した関数の内容が実行されている様子が分かると思います。

本来の jsFiddle の使い方だと、外部スクリプトのライブラリは左側の領域から選んだり、javascript は左下の「JavaScript」ペインに書いたりするのですが、ソースの見通しが良いように「HTML」ペインにバサッと書いてます。


nagato-yukiさんのコメント
ご回答ありがとうございました。 また、サンプルまで感謝です! とても参考になりました。 機会がございましたら、またどうぞよろしくお願い致します。 本当にありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ