まずは検索ダイアログの表示内容を用意しよう
前回までの作例として活躍した料理レシピサイトに替わり、今回からはいよいよ新しいWebサイトをもとに解説していきます。新サイト「JPhoto.net」はアマチュアカメラマンが運営するオンラインギャラリーサイトで、趣味で撮影した写真を紹介しています。
それでは、元となるWebページのデザインとソースコードを確認しておきましょう。今回スクリプトを組み込むのはトップページです（元になる作例ページ）。
JPohoto.netのトップページ。組み込む前の状態は、SEARCHのボタンをクリックしてもダイアログは表示されません
■元のHTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="手入力でござる">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<title>JPhoto.net - TOP -</title>
</head>
<body>
<div id="contents">
<h1>JPhoto.net</h1>
<ul id="globalMenu">
<li><a href="top.html" id="menu-top" class="current">Top</a></li>
<li><a href="photo.html" id="menu-gallery">Gallery</a></li>
<li><a href="search.html" id="menu-search">Search</a></li>
<li><a href="ranking.html" id="menu-ranking">Ranking</a></li>
<li><a href="info.html" id="menu-info">Information</a></li>
</ul>
<br style="clear:both;">
<!-- 繰り返し表示 -->
<div id="photoSlide">
<div id="slide1">
<img src="images/main-1.jpg"><br><br>
＃103 TITLE：北の丸公園で太陽とススキ
</div>
</div>
<!-- What's New? -->
<div id="WhatsNew">
<h2>What's new？</h2>
<hr>
<h3>サイトをリニューアル</h3>
<p>Webサイトを大幅リニューアルしました。Ajaxを使ったサイトに生まれ変わりました。（08/09/19）</p>
<h3>検索機能を追加</h3>
<p>写真のジャンルなどから検索できる詳細検索機能を搭載しました「Search」からお試しください。（08/09/01）</p>
<h3>夏の新作2点追加</h3>
<p>夏の京都を中心に2点、新作を追加しました。「Gallery」からどうぞ。（08/08/30）</p>
</div>
<div id="partner">
<h2>Friends＆Favorites</h2>
<br>
<img src="images/shared/banner01.jpg" alt="banner">
<img src="images/shared/banner02.jpg" alt="banner">
<img src="images/shared/banner03.jpg" alt="banner">
</div>
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
</body>
</html>
JPhoto.netのトップページには、写真を検索できる詳細検索があります。左上の「SEARCH」ボタンをクリックしたら、ダイアログがオーバーレイで表示されるように改良しましょう。
ThickBoxの場合、ダイアログ内に表示する内容はあらかじめページ内に用意しておきます。表示する内容は<div>タグで囲んでおきID名をつけておきます。ただし、このままでは画面に表示されてしまいますので、あらかじめスタイルシートを使って、ダイアログに表示する内容は見えないようにしておきましょう。
ここでは以下のように検索オプションのHTMLタグを設定しました。<div>タグのID名は「searchOption」にしてあります。後で説明しますが、「ここが詳細検索のダイアログだ」と示すために必要なID名となります。
<!-- 詳細検索で表示する内容 -->
<div id="searchOption">
<form action="./search.cgi" method="post">
<h2>[Search Option]</h2>
<p>
<label><input type="checkbox" value="near">Recent Entries</label>
<label><input type="checkbox" value="season">Traditional Beauty</label>
</p>
<p>
<label><input type="checkbox" value="mountain">Modern Beauty</label>
<label><input type="checkbox" value="sea">Architecure</label>
</p>
<hr>
<p>
<label><input type="checkbox" value="river">Nature</label>
<label><input type="checkbox" value="cat">Animals</label>
</p>
<p>
<label><input type="checkbox" value="cat">Girls</label>
</p>
<br />
<h2>[Search Keyword]</h2>
<p>
<label><input type="text" value="" name="keyword"></label>
<label><input type="submit" value="この条件で検索"></label>
</p>
</form>
</div>
