The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/animatedcollapse.js"></script>
<script type="text/javascript">
/* Sample 1 */
animatedcollapse.addDiv('doughnuts', 'fade=1,height=180px')
animatedcollapse.addDiv('bearcake', 'fade=1,height=180px')
animatedcollapse.addDiv('cafeeat', 'fade=1,height=180px')
/* Sample 2 */
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=nabe')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=nabe,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=nabe,hide=1')
/* 初期化 */
animatedcollapse.init()
</script>
<!-- JS / -->
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm'>Animated Collapsible DIV v2.01</a></p>
<!-- Sample 1 -->
<h2>要素のスライドダウン・アップ</h2>
<p>
<a href="javascript:animatedcollapse.show(['doughnuts', 'bearcake', 'cafeeat'])">例1～3を表示する</a>
|
<a href="javascript:animatedcollapse.hide(['doughnuts', 'bearcake', 'cafeeat'])">例1～3を非表示にする</a>
</p>
<div class="cf">
<!-- doughnuts -->
<div style="float:left; margin:10px 10px 10px 0; width:320px;">
<h3>例1：クリスピー・クリーム・ドーナツ</h3>
<p><button onclick="animatedcollapse.toggle('doughnuts')">スライドダウン・アップ切替</button></p>
<p><a href="javascript:animatedcollapse.show('doughnuts')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('doughnuts')">スライドアップ</a></p>
<div id="doughnuts" style="width:240px; display:none"><a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" width="240" height="180" alt="クリスピー・クリーム・ドーナツ" /></a></div>
</div>
<!-- doughnuts / -->
<!-- bearcake -->
<div style="float:left; margin:10px 10px 10px 0; width:320px;">
<h3>例2：くまさんケーキ</h3>
<p><button onclick="animatedcollapse.toggle('bearcake')">スライドダウン・アップ切替</button></p>
<p><a href="javascript:animatedcollapse.show('bearcake')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('bearcake')">スライドアップ</a></p>
<div id="bearcake" style="width:240px; display:none"><a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></a></div>
</div>
<!-- bearcake / -->
<!-- cafeeat -->
<div style="float:left; margin:10px 10px 10px 0; width:320px;">
<h3>例3：CAFE EAT@代官山</h3>
<p><button onclick="animatedcollapse.toggle('cafeeat')">スライドダウン・アップ切替</button></p>
<p><a href="javascript:animatedcollapse.show('cafeeat')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('cafeeat')">スライドアップ</a></p>
<div id="cafeeat" style="width:240px; display:none"><a href="http://www.flickr.com/photos/22559849@N06/2973352946/" title="CAFE EAT@3 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_m.jpg" width="240" height="180" alt="CAFE EAT@3" /></a></div>
</div>
<!-- cafeeat / -->
</div>
<hr style="margin: 1em 0" />
<!-- Sample 1 / -->
<!-- Sample 2 -->
<h2>要素のスライドダウン・アップ（グループ化）</h2>
<p>グループ内で1要素のみが開くタイプのアコーディオン。</p>
<!-- cat -->
<p><button onclick="animatedcollapse.toggle('cat')">スライドダウン・アップ切替</button> <a href="javascript:animatedcollapse.show('cat')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('cat')">スライドアップ</a></p>
<div id="cat" style="width: 400px; background: #bdf381;">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
<!-- cat / -->
<!-- dog -->
<p><button onclick="animatedcollapse.toggle('dog')">スライドダウン・アップ切替</button> <a href="javascript:animatedcollapse.show('dog')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('dog')">スライドアップ</a></p>
<div id="dog" style="width: 400px; background: #bdf381;">
The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
</div>
<!-- dog / -->
<!-- rabbit -->
<p><button onclick="animatedcollapse.toggle('rabbit')">スライドダウン・アップ切替</button> <a href="javascript:animatedcollapse.show('rabbit')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('rabbit')">スライドアップ</a></p>
<div id="rabbit" style="width: 400px; background: #bdf381">
Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
</div>
<!-- rabbit / -->
<!-- Sample 2 / -->
</div>
</body>
</html>
