Dreamweaver記事

AIR チュートリアル Dreamweaver 第４回 オープンソースを使ってみよう！～ jQueryを利用する～

第４回の完成画面

制作に入る前に、まずは今回のチュートリアルの完成画面を見てみましょう。

第３回からの変更点として、ホテルの種類を選択するプルダウンの下に、施設やサービスで絞り込みできるようチェックボックスが配置されています。
AIRアプリケーションを起動すると、タイトルおよび絞り込み条件のエリアが表示効果付きで表示されます。
「SEARCH」をクリックすると、“HOTELS”と“DETAILS”のエリアが順次表示され、検索結果が確認できるようになります。もちろん絞り込み条件を選択することで、表示結果も変わってきます。

大まかなステップ

第４回の大まかなステップとしては、以下の2つとなります。

1. レイアウトを作成する。
2. jQueryを使って絞り込み条件から情報を抽出させる。

jQueryを使ってデータの連係を図るには、スクリプトのコーディングを必要としますが、今回は難しく捉えるのはやめましょう。本チュートリアルでは、AIRアプリケーションの開発がおもな学習内容となりますので、タグやJavaScript、CSSに関しては言及しません。

早速、チュートリアルを始めるとしましょう！

レイアウトを作成する

まずは、絞り込み条件のフォームをレイアウトします。第3回で作成したプルダウンと「SEARCH」ボタンをdivタグのstyle属性を使って再配置します。

【div id=”menu”以下のHTMLを以下のように変更してください。】

<div id=”menu”>
<form id="form1" name="form1" method="post" onsubmit="return validateonsubmit(this);">
　<div style=" width:770px;float:left;" id="formregion">
　　<span id="spryselect1">
　　　<label>
　　　　<select name="hotel_type" id="hotel_type2">
　　　　<option value="">選んでください</option>
　　　　<option value="0">指定しない</option>
　　　　<option value="1">旅館</option>
　　　　<option value="2">ペンション・民宿</option>
　　　　<option value="3">貸別荘</option>
　　　　</select>
　　　</label>
　　　<span class="selectRequiredMsg">項目を選択してください。</span>
　　</span>
　</div>
　<div style=" width:100px;text-align:center;float:left;border-left:1px dotted #1a1a1a;">
　　<input type="submit" value="SEARCH">
　</div>
</form>
</div>

【コードビュー】

divタグの扱いに慣れている方は、どのような外観になったか容易に想像がつくと思いますが、とりあえずAIRにパブリッシュして、プレビューしてみましょう。

プルダウンと「SEARCH」ボタンがエリアの左右に分かれましたね。
次に今回の目玉となる絞り込み条件のチェックボックスを配置します。

【submit以下にあらたなdivタグを挿入してください】

<div style=" width:100px;text-align:center;float:left;border-left:1px dotted #1a1a1a;">
	<input type="submit" value="SEARCH">
</div><div style="float:left;width:880px;">

<div style="float:left;width:880px;">
<table style="width:100%;border-top:1px dotted #1a1a1a;">
   <tr >
　　<td>
　　　<input type="checkbox" name="o_pool" id="ck_o_pool" value="1">
　　　<label for="ck_o_pool">屋外プール</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="parking" id="ck_parking" value="1">
　　　<label for="ck_parking">駐車場無料</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="pub_bath" id="ck_pub_bath" value="1">
　　　<label for="ck_pub_bath">内湯・大浴場</label>
　　</td>
　　<td>
　　　　<input type="checkbox" name="onsen" id="ck_onsen" value="1">
　　　　<label for="ck_onsen">温泉</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="prv_bath" id="ck_prv_bath" value="1">
　　　<label for="ck_prv_bath">貸切風呂</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="v_bath" id="ck_v_bath" value="1">
　　　<label for="ck_v_bath">展望風呂</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="sauna" id="ck_sauna" value="1">
　　　<label for="ck_sauna">サウナ</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="jacz" id="ck_jacz" value="1">
　　　<label for="ck_jacz">ジャグジー</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="mssg" id="ck_mssg" value="1">
　　　<label for="ck_mssg">マッサージ</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="r_ski" id="ck_r_ski" value="1">
　　　<label for="ck_r_ski">貸しスキー</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="r_brd" id="ck_r_brd" value="1">
　　　<label for="ck_r_brd">貸しボード</label>
　　</td>
　</tr>
　<tr>
　　<td>
　　　<input type="checkbox" name="pet" id="ck_pet" value="1">
　　　<label for="ck_pet">ペットOKの宿</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="esthe" id="ck_esthe" value="1">
　　　<label for="ck_esthe">エステ設備</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="p_pong" id="ck_p_pong" value="1">
　　　<label for="ck_p_pong">卓球あり</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="limo" id="ck_limo" value="1">
　　　<label for="ck_limo">送迎あり</label>
　　</td>
　　<td colspan="3">
　　　<input type="checkbox" name="late_out" id="ck_late_out" value="1">
　　　<label for="ck_late_out">チェックアウト11時以降</label>
　　</td>
　</tr>
</table>
</div>

【コードビュー】

jQueryとの連携は、後のステップで定義します。
では、ここで記述した内容を再びAIRでプレビューしてみましょう。

16項目のチェックボックスが先ほどのプルダウンと「SEARCH」ボタンの下に配置されましたね。これで第4回のチュートリアルで必要になるレイアウトは完成しました。

ページ 2 / 3

前のページ

次のページ