書式
accordionObj = new fx.Accordion(headClass, bodyClass, { duration:msec, opacity:flag })accordionObj.showThisHideOpen(bodyClass[panelNumber])
accordionObj : アコーディオンオブジェクト
headClass : 見出し部分のスタイルシートクラス
bodyClass : 本体部分のスタイルシートクラス
msec : 処理完了までの時間 (ミリ秒)【省略可能】
flag : 半透明処理フラグ (true : する、false : しない)【省略可能】
panelNumber : パネル番号 (0〜)
説明
<div>パネルタイトル</div> ←パネルを示すタグ
<div>パネル本体</div> ←パネルの内容を示すタグ
オプションとして処理するまでのミリ秒、表示する際の不透明処理を行うかどうかのフラグを指定できます。
特定のパネルを展開するにはshowThisHideOpen()を使います。パラメータには展開表示するパネル本体のスタイルシートクラスの番号を指定します。
Ajaxライブラリ リファレンスサンプルコード [実行]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript" src="moo.fx.pack.js"></script>
<script type="text/javascript"><!--
window.onload = function(){
var aHead = document.getElementsByClassName("acHead");
var aBody = document.getElementsByClassName("acBody");
accordionObj = new fx.Accordion(aHead, aBody, { duration:400, opacity:true });
accordionObj.showThisHideOpen(aBody[1]);
}
// --></script>
</head>
<body>
<h1>アコーディオンエフェクト</h1>
<div id="contents">
<div class="acHead">アコーディオンエフェクト</div>
<div class="acBody">アコーディオンエフェクトを使えば省スペースで多くの情報を提供できます。</div>
<div class="acHead">Rico.jsにもある</div>
<div class="acBody">アコーディオンエフェクトはRico.jsでもサポートされています。タグの互換性はありません。</div>
<div class="acHead">Adobe Spryにもある</div>
<div class="acBody">アコーディオンエフェクトはAdobe Spryでもサポートされています。Rico.jsとdivタグ構成は全く同じです。</div>
</div>
</body>
</html>