- 索引
-
- └ サンプル目次
- 1章：短編集
- 2章：診断系コンテンツ
- 3章：製品抽出系コンテンツ
-
- ├ 構成の確認
- ├ 回答の確認
- ├ 点数表の作成
- ├ 得点の集計(1)
- ├ 得点の集計(2)
- ├ 結果画面の作成(1)
- └ 結果画面の作成(2)
- 番外：Simulation Game
-
- ├ 地形データの読込
- ├ ユニットの移動
- ├ 敵ユニットの扱い
- ├ 敵AI:目的地に移動出
- └ 一応の終わり
質問の切替(1)
概要
回答したら自動的に次の質問に移動する
ラジオボタンのグループは横一列に配置し、設問がクリックされたら属するグループのIDを利用して次の質問に移動するようにします。ポイントは次の質問が表示される座標の求め方です。
質問の切替はラジオボタンと比べると簡単に実現できますが、より分かりやすくするためシンプルな画像の切替サンプルで考え方を確認します。診断系への適用は次回行います。
解説
シンプルサンプルで確認（css設定）
まずはシンプルなhtmlで構造を確認します。サンプル（move/01.html）のソースを確認してください。以下の様にid属性「bannerMaster」内に5つのclass属性「banner」があり、それぞれ画像データが配置されています。
<div id="bannerMaster"> <div class="banner"><img src="images/1.jpg" width="600" height="220" alt="1" <div class="banner"><img src="images/2.jpg" width="600" height="220" alt="2" <div class="banner"><img src="images/3.jpg" width="600" height="220" alt="3" <div class="banner"><img src="images/4.jpg" width="600" height="220" alt="4" <div class="banner"><img src="images/5.jpg" width="600" height="220" alt="5" </div>
これらの画像は横一列に並べるので、以下の様なcssが設定されています。bunnerMasterは移動させるのでpositionの設定をrelativeにしています。
#bannerMaster{
position:relative;
width:3000px;
}
.banner{
float:left;
}
どのように切り替えるか
サンプルmove/01.htmlの様に横一列に配置した画像を、どのように切り替えるかを説明します。以下の様に表示エリア（move/01.htmlでは、まだ作成していません）内でbannerMasterの位置をマイナス方向に移動することで切り替えます。移動する量は1ページ分（サンプルでは600px）です。
ここで着目するのはページ番号が0から始まっている点です。この様にしておけば、ページを表示する際の座標計算がラクになります。例えば0ページを表示したい時は0pxの位置、1ページを表示したい時は-600px、2ページを表示したい時は-1200pxと以下の様な簡単な計算式で求まるからです（マイナスを忘れないで下さい）。
サンプルmove/01.htmlでは、まだ表示エリアを作成していないので、作成したサンプル（move/02.html）のソースを確認して下さい。以下の様にbannerMasterの要素をid属性showAreaの要素で囲んでいます。
<div id="showArea"> <div id="bannerMaster"> <div class="banner"><img src="images/1.jpg" width="600" height="220"
そしてshowAreaのcss設定は以下の様になっており、widthの設定「画像1枚分の幅:600px」と、はみ出した部分を表示しない「overflow:hidden」の設定がしてあります。
#showArea{
width:600px;
overflow:hidden;
}
あとはjQueryで、計算式の通りにbannerMasterを移動させれば画像が切替わります。
移動座標の算出
それではjQueryを利用して画像を切り替えましょう。サンプル（move/03.html）のソースを開き、まずはhtmlを確認して下さい。以下の様にbannerのクラス属性の要素にid属性が追加され、0〜4の番号が設定されています。前項で説明したようにページIDは0から始めるのがポイントです。
<div class="banner" id="0"><img src="images/1.jpg" width="600" height="220" <div class="banner" id="1"><img src="images/2.jpg" width="600" height="220" <div class="banner" id="2"><img src="images/3.jpg" width="600" height="220" <div class="banner" id="3"><img src="images/4.jpg" width="600" height="220" <div class="banner" id="4"><img src="images/5.jpg" width="600" height="220"
続いてjQueryを確認します。以下の様に記述され、1行目でクラス属性がbannerの要素がクリックされた時に処理を設定します。2行目ではクリックされた要素のidを取得し、それをNumberで数値化し（idの値は文字列なので数値化しないと計算に利用できません）、変数pageIDに代入しておきます。
そして3行目では前項で説明した計算式を利用して、座標を算出しています。ポイントはpageIDに1足している点です。pageIDはクリックされたページ番号なので「次のページ」に移動するためには1足す必要があるのです。
$(".banner").click(function (){
var pageID = Number(this.id);
var myPos = (pageID+1) * -600;
$("#bannerMaster").animate({left: myPos});
});
こうして算出された座標は変数myPosに代入され、4行目で
animateメソッドに利用して移動するようにしています。結果として、画像をクリックすると次の画像に切り替わるようになります。次回、この仕組みを診断系に利用していきます。