Spry ver 1.2ではアコーディオンエフェクト（ウィジェット）が追加されています。アコーディオンエフェクトを使用するにはdivタグを使ってアコーディオン全体を囲むコンテナを定義します。このコンテナにID名を指定します。このID名をSpry.Widget.Accordion()の最初のパラメータとして指定します。ただし、これだけでは動作しません。アコーディオンの各パネルとタブ、そして内容を示すタグを用意する必要があるからです。アコーディオンの表示させたい項目の数だけ記述すれば自動的にアコーディオンエフェクトの処理が行われます。スタイルシートは全く定義しなくても動作します。以下のサンプルは最も基本的なアコーディオンエフェクトです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アコーディオンWidget</title>
<link type="text/css" href="SpryAccordion.css" rel="stylesheet">
<script type="text/javascript" src="SpryAccordion.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
new Spry.Widget.Accordion("Accordion1");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル1</div>
<div class="AccordionPanelContent">
内容、その１
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル２</div>
<div class="AccordionPanelContent">
内容、その２
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル３</div>
<div class="AccordionPanelContent">
内容、その３
</div>
</div>
</div>
</body>
</html>
アコーディオンエフェクトは内容をスライドして表示させるため処理速度の遅い環境では表示までに時間がかかってしまうことがあります。そのような場合にはスライドするエフェクトを行わないようにすることができます。これはSpry.Widget.Accordion()の二番目のパラメータに{ enableAnimation: false }と指定します。これでクリック時のスライドアニメーションが行われなくなります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アコーディオンWidget</title>
<link type="text/css" href="SpryAccordion.css" rel="stylesheet">
<script type="text/javascript" src="SpryAccordion.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
new Spry.Widget.Accordion("Accordion1",
{ enableAnimation: false });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル1</div>
<div class="AccordionPanelContent">
内容、その１
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル２</div>
<div class="AccordionPanelContent">
内容、その２
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル３</div>
<div class="AccordionPanelContent">
内容、その３
</div>
</div>
</div>
</body>
</html>
最初の状態では常に一番最初のパネルが表示されます。場合によっては二番目のパネルなど任意のパネルを最初に表示させておきたい場合があります。任意のパネルを最初に表示させておくにはSpry.Widget.Accordion()の二番目のパラメータに{ defaultPanel: 1 }を指定します。この数字の1は二番目である事を示しています。これは一番最初のパネルの番号が0になるためです。これにより任意のパネルを最初に表示させておくことができます。
以下のサンプルは二番目のパネルを最初に表示させるようになっています。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>アコーディオンWidget</title>
<link type="text/css" href="SpryAccordion.css" rel="stylesheet">
<script type="text/javascript" src="SpryAccordion.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
new Spry.Widget.Accordion("Accordion1",
{ defaultPanel: 1 });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル1</div>
<div class="AccordionPanelContent">
内容、その１
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル２</div>
<div class="AccordionPanelContent">
内容、その２
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル３</div>
<div class="AccordionPanelContent">
内容、その３
</div>
</div>
</div>
</body>
</html>
[
目次へ]
(2006.7.31)