このページの本文へ

すぐ使える!なめらかアコーディオンで“魅せる”UIに (5/5)

2008年11月25日 12時33分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

■完成した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">
<link rel="stylesheet" href="css/accordion.css" type="text/css" media="all">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js2/effects.js"></script>
<script type="text/javascript" src="js2/accordion.js"></script>
<title>JPhoto.net - Ranking -</title>
</head>
<body>
<div id="contents"> 
<h1>JPhoto.net</h1>
<ul id="globalMenu">
<li><a href="top.html" id="menu-top">Top</a></li>
<li><a href="photo.html" id="menu-gallery">Gallery</a></li>
<li><a href="seacrh.html" id="menu-search">Search</a></li>
<li><a href="ranking.html" id="menu-ranking" class="current">Ranking</a></li>
<li><a href="info.html" id="menu-info">Information</a></li>
</ul>
<br style="clear:both;">
<img src="images/shared/rank.gif">
<div id="acc1">
<h2 class="accordion_toggle">top 1 | 北の丸公園で太陽とススキ</h2>
<div class="accordion_content">
<img src="photo/photo103.jpg">
<div class="captionOff">#103 Location:Tokyo Date:08-10-24 Tag:Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 2 | 多摩川土手で出会う</h2>
<div class="accordion_content">
<img src="photo/photo107.jpg">
<div class="captionOff">#107 Location:Tokyo Date:07-07-15 Tag:Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 3 | 夕日を浴びる京急線</h2>
<div class="accordion_content">
<img src="photo/photo109.jpg">
<div class="captionOff">#109 Location:Tokyo Date:08-09-01 Tag:Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 4 | 聖路加ガーデンから臨む</h2>
<div class="accordion_content">
<img src="photo/photo108.jpg">
<div class="captionOff">#108 Location:Tokyo Date:08-9-19 Tag:Architecure</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 5 | そうだ、京都行こう</h2>
<div class="accordion_content">
<img src="photo/photo099.jpg">
<div class="captionOff">#099 Location:Kyoto Date:04-03-20 Tag:Girls</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 6 | 夕暮れ時の二月堂</h2>
<div class="accordion_content">
<img src="photo/photo6.jpg">
<div class="captionOff">#097 Location:Nara Date:07-08-13 Tag:Architecure</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 7 | 地面に落ちた葉</h2>
<div class="accordion_content">
<img src="photo/photo105.jpg">
<div class="captionOff">#105 Location:Tokyo Date:07-11-13 Tag:Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 8 | 倉敷川から横道へ</h2>
<div class="accordion_content">
<img src="photo/photo102.jpg">
<div class="captionOff">#102 Location:Kurashiki Date:08-08-11 Tag:Architecure</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 9 | 群馬の冬</h2>
<div class="accordion_content">
<img src="photo/photo100.jpg">
<div class="captionOff">#100 Location:Gunam Date:07-03-01 Tag:Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top10 | 東京ステーションのある夜</h2>
<div class="accordion_content">
<img src="photo/photo095.jpg">
<div class="captionOff">#095 Location:Tokyo Date:07-09-01 Tag:Architecure</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
</div>
<img src="images/shared/rank2.gif">
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
<script type="text/javascript">
new accordion("acc1");
$$("#acc1 .capButton").each(function(ele){
Event.observe(ele,"click", function(){
var ele1 = $(this).previous(".captionOff");
var ele2 = $(this).previous(".captionOn");
if (ele1){
ele1.removeClassName("captionOff");
ele1.addClassName("captionOn");
}
if (ele2){
ele2.removeClassName("captionOn");
ele2.addClassName("captionOff");
}
}, true);
});
</script>
</body>
</html>

前へ 1 2 3 4 5 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています