jQuery入門講座製品抽出-構成の確認

構成の確認

サンプル紹介

最終目標の確認

まずは最終目標のサンプルを確認しましょう（左の画像をクリックするとサンプルが開きます）。ここで紹介する「製品抽出系コンテンツ」とは、質問に回答した結果に応じた製品を紹介するコンテンツのことです。

左図のサンプルには5つの質問が表示されており、全ての質問に回答すると最下段の「製品を探す」ボタンが有効になります。これをクリックすることで回答に応じた製品がランキング形式で表示されます。

日本のメーカの製品は機能が豊富な反面、種類が多く自分に適した製品を探すのが難しい感じがします。そこで質問に回答するだけで、適した製品をランキング形式で紹介してくれるコンテンツは有用なのではないでしょうか。

診断系コンテンツをマスターした方向けのサンプルです

このコンテンツは2章の「診断系コンテンツ」を発展させて作成しているので、2章を習得していない方は先に2章を習得して下さい（選択肢などは診断系コンテンツと同じ仕組みのため、説明を大幅にカットしているのです）。

概要

まずはhtml/cssの確認だけ

製品抽出系コンテンツは診断系コンテンツ以上にhtmlの構成が複雑です。ですので、まずはhtmlの構造を把握するようにしましょう（ついでにcssも確認します）。

解説

質問画面のhtmlを確認

製品抽出サンプルは質問画面と、結果画面の2つがあります。まずは質問画面のhtmlとcssを確認しましょう。サンプル（intro/01.html）を開きbody内の構成を確認して下さい。

まず5つの質問はid属性checkerのdiv要素（1行目）によって囲まれています。2行目,3行目部分はヘッダ画像とコンテンツの説明で、4行目以降に質問が設定されています。質問は1問目以外省略しました。

<div id="checker">
	<img src="../images/checkerTitle.jpg" width="750" height="130">
	<div class="wideText">各質問に回答することで・・・</div>
	<div class="ques">
		<img src="../images/q_1.gif" width="740" height="25">
		<div class="quesText">リビングで・・・</div>
		<ul><li id="0_0">リビング</li><li id="0_1">書斎/仕事部屋</li>
		<li id="0_2">寝室</li></ul>
	</div>
	・（質問2〜質問5は省略）・
	<div id="searchButton"></div>
</div>

各質問はclass属性quesのdiv要素で囲まれ（4行目〜8行目）特に重要なのが、選択肢（ラジオボタン）となる7〜8行目の部分です。診断系コンテンツ同様にul要素とli要素で作成され、id属性の値として「質問番号_選択肢番号」が設定されています。忘れてしまった方は診断系コンテンツ：選択肢の作成（3）を復習してください。

そして質問の後に「製品を探すボタン」が追加されています。これは上記11行目のid属性がsearchButtonのdiv要素です。これで質問部分のhtmlの確認は終わりです。診断系コンテンツと似た構成なのを確認して下さい。

質問画面のcssを確認

続いてcssを確認します。特筆するようなテクニックは利用していないので、ラジオボタンの部分だけを確認しておきます（とはいえ診断系コンテンツと同じです）。

ラジオボタンの背景画像にはansButton.gif（左図）を利用しています。3つの画像をつなげた形になっており、1番上が通常時（非選択時）の画像で、2番目がマウスオーバー時の画像、一番下が選択された時の画像となっています。

マウスオーバー時の演出はcssで以下の様に設定しています。選択された時の処理（jQueryにて実施予定）は、まだですがcssでは選択された時に設定するselectedのclass属性をすでに用意しています。

ul li:hover {
	background-position: 0px -50px;
}
ul li.selected {
	background-position: 0px -100px;
}

「製品を探すボタン（id属性searchButton）」の設定もしてあるのですが、これは実際に利用する時に説明したいと思います。ラジオボタンの部分はhtmlもcssも診断系コンテンツと同じ考えで作成されていることを理解しておいて下さい。次は結果画面の構成について説明します。

結果画面の構成を確認

サンプル（intro/02.html）を開きbody内に結果画面が追加されているのを確認して下さい。結果画面は回答に応じて内容を変更するため、現時点ではid属性resultのdiv要素で囲まれている点だけ理解しておけばOKです。詳細は結果画面を表示する部分で説明します。

<div id="result">
・
（省略）
・
</div>

cssの設定に関しても、特筆する点はありません。

次回に向けて

今回のサンプルではcssの記述が多いので外部ファイルにします。サンプル（intro/03.html）を開いてhead領域を確認して下さい。以下の様にcssの設定が外部リンクに変更されています。

<link rel="stylesheet" href="../images/product.css" type="text/css" />

尚、このproduct.cssは今後変更されることはありません。つまり、これがcssの最終形です。

本格的なjQueryは次回から作成するのですが、最後に少しだけjQueryを追加しておきます。製品抽出のサンプルでは、最初は結果画面を表示しないので消しておきましょう。サンプル（intro/04.html）を開き、以下のjQueryが追加されていることを確認して下さい。

$(function () {
	$("#result").hide();
});

id属性がresultの要素（つまり結果画面部分）に対してhideメソッドを利用して、最初は表示しないようにしました。これで今回は終わりです。次回はラジオボタンの部分を作成し、全ての質問に回答したかを確認する機能を作成します。。

次のページ：回答の確認