« javaでブラウザサイズを取得する。 | ホーム | Javaの統合開発環境として、MacにAptana Studioを導入しました。 »
2011年3月23日
jQueryを使って、クリックすると伸びるように出現するパーツをつくる。
昨年制作したサイトの中に、フリーペーパーミュージアムというサイトがあります。
今日は、そんなパーツを作る仕組みをメモします。
以下のコードを.jsデータに書き込みます。
その上で、この.jsファイルに対応するhtmlファイルの例を以下に記載します。
ここに記したものを実際にこちらにアップしました。
この仕組みは、IEなどでも上手く動いているので、とても使い勝手がよいですよ★
「まるで冊子を手にとって読んでいるような、"触感"を感じてもらう」
というコンセプトの下、左部のメニューには、クリックするとメニューが伸びて出てくる仕掛けを作りました。今日は、そんなパーツを作る仕組みをメモします。
以下のコードを.jsデータに書き込みます。
$(document).ready(function(){
$(".hidden_box").hide();
$("h1.button").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
});
});
赤色に装飾されている部分は、htmlファイルのクラス属性と対応しています。その上で、この.jsファイルに対応するhtmlファイルの例を以下に記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>2010_0320</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/上のコードを記載したもの.js"></script>
</head>
<body>
<h1 class="button"><a>Where are you?（Please click here!）</a></h2>
<div class="hidden_box">
<div class="block">
<p>In Starbucks!</p>
</div><!--block-->
</div><!--hidden_box-->
</body>
</html>
ここに記したものを実際にこちらにアップしました。
この仕組みは、IEなどでも上手く動いているので、とても使い勝手がよいですよ★
