スタッフブログ
なおとです。
今日はJavascriptを楽に記述できる頼もしいライブラリ「jQuery」を使って、よくある showHide() アクションを実装してみます。 showHideとはつまり、ボタンを押すことによって、画面の中の一部分が開いたり閉じたりする動きのことです。
ちょっと長いですが、全体を以下に示します。
<html>
<head>
<title>test</title>
<style type="text/css">
#test div {
border: 0.2em transparent solid;
padding: 2em;
}
#test div.item {border-color: blue;}
#test div.description {border-color: cyan;}
#test div.editform {border-color: skyblue; display:none;}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
marker = new Array();
marker['Description_show'] = '詳細';
marker['Description_hide'] = '詳細を隠す';
marker['EditForm_show'] = '編集';
marker['EditForm_hide'] = '入力フォームを閉じる';
function showHide(prefix, id)
{
$('#' + prefix + id).toggle();
if ($('#for' + prefix + id).val() == marker[prefix + '_show']) {
$('#for' + prefix + id).val(marker[prefix + '_hide']);
} else {
$('#for' + prefix + id).val(marker[prefix + '_show']);
}
}
</script>
</head>
<body id="test">
<h1>showHide() sample</h1>
<div class="item">
<h2>Item 1</h2>
<form>
<input type="button" id="forDescription1" value="詳細を隠す" onclick="java script:showHide('Description', 1);" onkeypress="java script:showHide('Description', 1);" />
</form>
<div class="description" id="Description1">
<h3>Item 1の詳細</h3>
<p>
かくかくしかじか
</p>
<form>
<input type="button" id="forEditForm1" value="編集" onclick="java script:showHide('EditForm', 1);" onkeypress="java script:showHide('EditForm', 1);" />
</form>
<div class="editform" id="EditForm1">
<h3>Item 1の編集</h3>
<form>
<input type="text" name="q" value="" size="20" />
<input type="submit" name="submit1" value="送信" />
</form>
</div>
</div>
</div>
</body>
</html>
まず、「詳細」と「編集」という2種類の領域とボタンを作るとします。詳細の領域の中に、編集用の領域があるという配置にします。
詳細と編集はそれぞれ番号をつけて、複数持てるようになっています。 これに「DescriptionX」、「EditFormY」という系列で名前をつけます。 XとYは任意の数字としています。（例では1だけ登場します。）
さっそく詳しい説明をしてみます。
はじめのほうに、<script>要素があり、そこでは配列「marker」に、閉じたとき、開いたときのボタンの文言を書いておきます。 また、function showHide(prefix, id)を定義しています。 じつはこれが今回の肝にあたる部分なのですが、とてもコンパクトに書けることがわかります。 ここではブラウザ毎の挙動の違いなどは気にする必要はありません。
いっぽう、開閉をするためのボタンには「forDescription1」「forEditForm1」というようなid属性を付けます。 onclick属性には"java script:showHide('EditForm', 1);"というような命令を書きます。 1という数字は、先に説明した複数個の領域がずらっと続く場合のための、任意の数字の部分です。
そして開閉したい領域には、「Description1」「EditForm1」というようなidを付けます。
おおまかな説明でしたが、大体こんな感じです。
htmlを表示したときのイメージとして、以下にサンプルを載せておきます。（このページ上では動作しません。囲みの中身を別のファイルにコピー＆ペーストして試してください。）
showHide() sample
Item 1
Item 1の詳細
かくかくしかじか
Item 1の編集
トラックバック
