前回のコードと合わせて仕上げに
それでは、前回のコードと組み合わせてうまく動作するように、残りの処理の部分を作って仕上げとしましょう。
まず、先ほど作った表示件数を調整するスクリプトを、ウィンドウがリサイズされた時に実行するようにします。具体的には、windowオブジェクトの resizeイベントが発生したら、表示件数を調整する関数setBookRankを呼び出します。jQueryでは、以下のように書きます。
$j(window).resize(setBookRank);
ただ、これだとリサイズされたときにだけ呼び出されるので、最初にページが読み込まれた段階では何も表示されなくなってしまいます。そこで、単純に関数setBookRankを呼び出し、ページが読み込まれた後に表示するようにしましょう。以下の2行を追加すればOKです。
$j(window).resize(setBookRank);
setBookRank();
完成したスクリプトは、前回の記事で、タブパネルの機能追加部分を実装するために作成した「book.js」に追加します。これで今回の作業はすべて完了です。以下に作例ページを公開していますので、実際の動作を確認してみてください。
450
完成した作例。ウィンドウ幅に応じて表示される画像がフェードイン／フェードアウトで切り替わります
今週はここまでです。次回はまた新しい課題に挑戦します。どうぞお楽しみに。
（作例デザイン：wataru）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
