トップページ > Ajaxライブラリ使用サンプル集 > アコーディオン-AdobeSpry

Ajaxライブラリ使用サンプル集

アコーディオン-AdobeSpry

Adobe Spry（アドビ スプライ）は、 アドビ システムズ 株式会社が配布しているAjaxフレームワーク。
なお、Adobe Spryは、Dreamweaver CS3から標準で搭載されているので、Dreamweaver上で装備できる。
ここではAdobe Spryサイトから手動でダウンロードする方法でテストする。

下はデフォルトのアコーディオン。
Panel 1
デフォルトでは１番目のパネルが開いている。開いているタブをクリックしてもデフォルトでは閉じない。
デフォルトのパネルの高さは200px。ここでは省スペースのためにCSSで100pxに変更した。
デフォルトでは、パネルのpaddingが0。文字が枠にくっついて気持ちが悪いですね。
Panel 2
必要なファイルは「SpryAccordion.js」と「SpryAccordion.css」だけ。依存ライブラリは無いので簡単。
Panel 3
タブやボーダーが地味だが、これはCSSファイルで調整すればよい。
CSSはとてもシンプルで編集しやすい。prototypeのアコーディオンよりデザイナー向きに感じる。
Panel 4
いろいろなオプションがありHTML上でスクリプトを書いて変更できる。
「アニメーションのオン・オフ」「アニメーションのスピードの変更」「最初に開いているパネルの指定」「パネルを閉じておく指定」 「パネルの高さを内容に合わせて変える指定」など。









デフォルトではパネルの高さが固定されていて、
固定値より大きい場合は、このようにスクロールバーが出る。
Adobe Spryをダウンロードする

まずは、必要なファイルをAdobe Spryのサイトからダウンロードするが、 このとき、アコーディオンだけをチョイスしてダウンロードすることはできない。一切合切ゴッソリとダウンロードされる。他のいろいろなフレームワークとサンプルなど、全部で13Mぐらい。 2009年9月時点でバージョンは1.6。

ダウンロードページでは「アドビID」と「パスワード」を入力。アドビID（E-mailアドレス）とパスワードは、アドビのオンラインサービス利用時のためのもの。 アドビIDとユーザIDは別の物なので注意。
「アドビID」を持っていなければ「No, I will create one now.」をチェックすれば無料で作成できる。

ページの最上部へ

SpryAccordionのjsとcssファイルを読み込む
ダウンロードしたフォルダの中の
「samples」→「accordion」→「AccordionSample.html」で、設定の基本がわかる。
「widgets」→「accordion」にデフォルトのセットがあり、SpryAccordion.css, SpryAccordion.html, SpryAccordion.js の3つのファイルが入っている。
このcssとjsファイルを<head>部に読み込ませる。パスはサイトに合わせる。
<link rel="stylesheet" href="css/SpryAccordion.css" type="text/css" />
<script type="text/javascript" src="../js/SpryAccordion.js"></script>
ページの最上部へ

HTMLでの指定

ダウンロードしたデフォルトセットの中の「SpryAccordion.html」をコピペして加工していけば良い。

構造的には、全体はclass名「Accordion」というブロックで囲まれている。id名は任意で付ける。
1つのパネルセットは「AccordionPanel」というクラス名のブロックで囲む。その中にタブとパネル本文がある。 タブはクラス名「AccordionPanelTab」、本文はクラス名「AccordionPanelContent」。

そして、アコーディオン要素の直後にスクリプトをおき、SpryAccordion.js と繋ぐ。
デフォルトではアコーディオンブロックの名前（先程付けた任意のid）だけ指定すればよい。

デフォルトのHTMLソースは下記のようになっている。

<div class="Accordion" id="defaultAccordion"> 　←このidは任意。好きな名前で良い。
<div class="AccordionPanel">
　 <div class="AccordionPanelTab">Panel 1</div>
　 <div class="AccordionPanelContent">
　・・・・・・・・・・
　 </div>
</div>
<div class="AccordionPanel">〜略（2番目のパネル）〜</div>
<div class="AccordionPanel">〜略（3番目のパネル）〜 </div>
<div class="AccordionPanel">〜略（4番目のパネル）〜 </div>
</div>

<script language="JavaScript">　↓<body>上に書く場合のスクリプト
var acc = new Spry.Widget.Accordion("defaultAccordion");
</script>
この↑最後のJavaScript、アドビのサンプルではここに書くようになっているが、<head>に置くのも可。
<head>内に書く場合は下記のように function() を使う。
<script language="JavaScript">　↓<head>内に書く場合のスクリプト
window.onload = function() { new Spry.Widget.Accordion("defaultAccordion"); }
</script>
ページの最上部へ

オプション設定

アコーディオンのソースの下に書く JavaScript で、いろいろなオプションを指定する事ができる。


●このサンプルは、最初に開いているパネルを2番目のパネルに設定している。
Panel 1
最初に開いているパネルを2番目のパネルに設定
Panel 2

スクリプトは下記の通り。

<script language="JavaScript">
var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: 1 });　←0が1番目のパネル
</script>
Panel 3
最初に開いているパネルを2番目のパネルに設定
ページの最上部へ

●「duration」でアニメーションの速度を変える例。
Panel 1
「duration」でアニメーションの持続時間をミリセカンドで指定できる。
1秒は1000ミリセカンド。数字が大きいと遅く、小さいと速くなる。
このサンプルは1000で指定した。
Panel 2

スクリプトは下記の通り。

<script language="JavaScript">
var acc2 = new Spry.Widget.Accordion("Acc2", { duration: 1000 });
</script>
Panel 3
「duration」でアニメーションの持続時間をミリセカンドで指定できる。
ページの最上部へ

●1秒当たりのフレーム数(fps)を変える例。
Panel 1
1秒当たりのフレーム数の数(fps = frames per second)を変えることができる。
数値が大きい方がなめらか。
ここでは、わかりやすいように、フレーム数を5にしてみた。ぎこちない動きになっている。
このオプションは、上の「アニメーションの持続時間をミリセカンドで指定」で、ゆっくりした速度にする時に併用すると良い。
Panel 2

スクリプトは下記の通り。

<script language="JavaScript">
var acc3 = new Spry.Widget.Accordion("Acc3", { fps: 5　});
</script>

Panel 3

durationと併用する時は下記のように。

<script language="JavaScript">
var acc3 = new Spry.Widget.Accordion("Acc3", { duration: 1000, fps: 90　});　←カンマ（,）で区切る。
</script>
ページの最上部へ

●アニメーションをオフにする。
Panel 1
アニメーションをオフにする
Panel 2

スクリプトは下記の通り。

<script language="JavaScript">
var acc4 = new Spry.Widget.Accordion("Acc4", { enableAnimation: false });
</script>

Panel 3
アニメーションをオフにする。
ページの最上部へ

●パネルの高さを固定せず、内容に合わせて変化させる。
Panel 1
デフォルトではパネルの高さは固定されているが、それをオフにすることもできる。
パネルの高さは内容量により変化する。
他の要素が動くので、ページ全体としては見にくくなる気がする。






Panel 2

スクリプトは下記の通り。

<script language="JavaScript">
var acc5 = new Spry.Widget.Accordion("Acc5", { useFixedPanelHeights: false });
</script>

Panel 3
パネルの高さを変化させる。

ページの最上部へ

●すべてのパネルを閉じた状態にしておく。
Panel 1
最初に開いているパネルがない状態にする。
また、デフォルトでは、開いているパネルのタブをクリックしても閉じないが、これを閉じるようにする。
先述の「パネルの高さを固定しない」オプションと併用する。




Panel 2

スクリプトは下記の通り。

<script language="JavaScript">
var acc6 = new Spry.Widget.Accordion("Acc6", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>

Panel 3
すべてのパネルを閉じた状態にしておく。

ページの最上部へ

●パネルタブ以外のナビゲーションでパネルを操作する。

下のように、ナビゲーションをクリックすることによってアコーディオンパネルを操作できる。

(1) Open by Simple Navigation: First | Previous | Next | Last

(2) Open by Panel Index: 0 | 1 | 2 | 3 | 4

(3) Open by Panel ID: panel1 | panel2 | panel3 | panel4 | panel5

(4) Close: Current Panel

Panel 1

この例は、ナビゲーション部分のソースで「onclick=」で指示を与えるだけ。

アコーディオンパネルは、先述の「パネルの高さを固定しない」オプションにしておく。
<script language="JavaScript">
var acc7 = new Spry.Widget.Accordion("Acc7", { useFixedPanelHeights: false });
</script>

または、「すべてのパネルを閉じておく」オプションにしておいてもOK。
<script language="JavaScript">
var acc7 = new Spry.Widget.Accordion("Acc7", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
Panel 2

最初の (1) Open by Simple Navigation のナビのHTMLは下記の通り。

<p>
(1) Open by Simple Navigation:
<a href="#" onclick="acc7.openFirstPanel(); return false;">First</a> |
<a href="#" onclick="acc7.openPreviousPanel(); return false;">Previous</a> |
<a href="#" onclick="acc7.openNextPanel(); return false;">Next</a> |
<a href="#" onclick="acc7.openLastPanel(); return false;">Last</a>
</p>
Panel 3

(2) Open by Panel Index のソースは下記の通り。

<p>
(2) Open by Panel Index:
<a href="#" onclick="acc7.openPanel(0); return false;">0</a> |
<a href="#" onclick="acc7.openPanel(1); return false;">1</a> |
<a href="#" onclick="acc7.openPanel(2); return false;">2</a> |
<a href="#" onclick="acc7.openPanel(3); return false;">3</a> |
<a href="#" onclick="acc7.openPanel(4); return false;">4</a>
</p>
Panel 4

(3) Open by Panel ID の場合は、各パネルセットのブロックに、下記のようにidを付ける必要がある。
<div id="panel1" class="AccordionPanel">
<div id="panel2" class="AccordionPanel">
<div id="panel3" class="AccordionPanel">
<div id="panel4" class="AccordionPanel">
<div id="panel5" class="AccordionPanel">

ナビゲーションのソースは下記の通り。

<p>
(3) Open by Panel ID:
<a href="#" onclick="acc7.openPanel('panel1'); return false;">panel1</a> |
<a href="#" onclick="acc7.openPanel('panel2'); return false;">panel2</a> |
<a href="#" onclick="acc7.openPanel('panel3'); return false;">panel3</a> |
<a href="#" onclick="acc7.openPanel('panel4'); return false;">panel4</a> |
<a href="#" onclick="acc7.openPanel('panel5'); return false;">panel5</a>
</p>

Panel 5

(4) Close のソースは下記の通り。

<p>
(4) Close:
<a href="#" onclick="acc7.closePanel(); return false;">Current Panel</a>
</p>
ページの最上部へ

●アコーディオンパネルをプリント可能にする。

アコーディオンパネルのあるページをプリントする時、現在閉じられているパネルの内容はプリントされない。
内容を全部プリント可能にするには「media="print」でCSSを加え、閉じているパネルの内容を visible にする。プリント時に、すべてのパネルが開いた状態でプリントされる。

<head>内に下記のCSSを加える。
<style type="text/css" media="print">
.Accordion {
overflow: visible !important;　← !important を加えて優先順位を上げる
}
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
}
</style>
ページの最上部へ

●別のCSSクラス名を適用する。

同じページで異なるCSSのアコーディオンを列記する場合、CSSクラス名を変えて適用する事ができる。
SpryAccordion.js のために、新しいクラス名を指定してやる必要がある。
これは同じページで異なるCSSのアコーディオンを併記する場合のみ。単にアコーディオンのデザインをデフォルトと変えるなら 「SpryAccordion.css」を、クラス名は変えずに編集する。

ここまでのアコーディオンのサンプルは、デフォルトのCSSを利用した。
下は↓異なるCSSを新規作成したアコーディオン。
Panel 1

まず、新しいCSSファイルを作り、<head>に読み込ませる。
このアコーディオンのCSSは下記の通り。

.NewAccordion {　←全体のセットを「NewAccordion」というクラス名に変更
overflow: hidden;
border: 1px solid #CCCCCC;
}
.NewAccordion .Tab {　←タブ。.AccordionPanelTabだった部分
height: 22px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-align: center;
background: #ADD447 url(../img/gradation1.jpg) repeat-x center;
line-height: 22px;
color: #FFFFFF;
}
.NewAccordion .Content {　←パネル本文。.AccordionPanelContentだった部分
overflow: auto;
height: 200px;
padding: 0.5em;
background: url(../img/gradation3.jpg) repeat-x;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
.NewAccordion .hover {　←タブのロールオーバー時。元は.AccordionPanelTabHover
background: #00CACA url(../img/gradation2.jpg) center;
}
.NewAccordion .open .Tab {　←タブオープン時。元は.AccordionPanelOpen .AccordionPanelTab
background: #00CACA url(../img/gradation2.jpg) center;
}

Panel 2

HTMLは下記の通り。

<div class="NewAccordion" id="Acc8" tabindex="0">
	<div class="Panel">　←これは任意。クラス名が無くても良い
		<div class="Tab">Panel 1</div>
		<div class="Content">
		・・・・・・・
		</div>
	</div>
	<div class="Panel">
		<div class="Tab">Panel 2</div>
		<div class="Content">
		・・・・・・・
		</div>
	</div>
	<div class="Panel">
		<div class="Tab">Panel 3</div>
		<div class="Content">
		・・・・・・・
		</div>
	</div>
</div>
Panel 3

最後に、アコーディオンのソース下に書くスクリプトで、SpryAccordion.js に関わる新しいクラス名を指定する。

		
<script type="text/javascript">
var acc8 = new Spry.Widget.Accordion("Acc8", 
{ hoverClass: "hover", openClass: "open",
 closedClass: "closed", focusedClass: "focused" });
</script>

ここでは「closed」「focused」は指定してないが、一応書いておいた。カンマ（,）で区切って指定する。
ページの最上部へ