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


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

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

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/05/07 09:49:30
  • 終了:2014/05/08 22:33:20

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4594ベストアンサー獲得回数19332014/05/07 10:19:58

ポイント170pt

こんな感じで書きます。

<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」ペインにバサッと書いてます。

id:nagato-yuki

ご回答ありがとうございました。
また、サンプルまで感謝です!
とても参考になりました。

機会がございましたら、またどうぞよろしくお願い致します。
本当にありがとうございました。

2014/05/08 22:35:32

その他の回答(1件)

id:pogpi No.1

POGPI回答回数378ベストアンサー獲得回数502014/05/07 10:07:31

ポイント30pt

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

id:nagato-yuki

ご回答ありがとうございます。
参考になりました!また機会がございましたらよろしくお願い致します!

2014/05/08 22:27:48
id:a-kuma3 No.2

a-kuma3回答回数4594ベストアンサー獲得回数19332014/05/07 10:19:58ここでベストアンサー

ポイント170pt

こんな感じで書きます。

<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」ペインにバサッと書いてます。

id:nagato-yuki

ご回答ありがとうございました。
また、サンプルまで感謝です!
とても参考になりました。

機会がございましたら、またどうぞよろしくお願い致します。
本当にありがとうございました。

2014/05/08 22:35:32

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません