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

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

アコーディオン-prototype

Accordion v2.0は、 stickman labsの開発したライブラリ。内容をアコーディオン形式で表示する。
Sam Stephenson氏の「Prototype」と Thomas Fuchs氏のチームによる「script.aculo.us」の、2つのライブラリを利用する。MITライセンス。

accordion.jsを読み込む

Accordion v2.0 サイトから一式ダウンロードする。
「javascript」フォルダがダウンロードされ、prototype.js、effects.js、accordion.jsの3つが入っている。

<head>内に、ダウンロードした3つのjsを下記の順に読み込ませる。パスはサイトに合わせる。
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/accordion.js" type="text/javascript"></script>
JavaScriptを<head>内に書き設定する
必要な3つの外部jsを読み込んだあと、下記のスクリプトを<head>内に書き込む。あとでHTMLに指定するid名を入力しておく。
下記はデフォルト。このページはこのソースで作っている。
<script>
Event.observe(window, 'load', function(){
new accordion("accordion");　←このid（accordion）は任意。これをHTMLソースに指定する。
}, false);
</script>
このほかのオプションは、
マウスオーバーでアコーディオンを開く。

<script>
Event.observe(window, 'load', function(){
new accordion("accordion",{onEvent : "mouseover"});
}, false);
</script>

サンプル：マウスオーバーでアコーディオンを開く
最初から開いているコンテンツを指定する。

<script>
Event.observe(window, 'load', function(){
var acc = new accordion("accordion");
acc.activate($$("#accordion .accordion_toggle")[0]);　←1番上のタグが「0」2番目が「1」
}, false);
</script>

サンプル：開いているコンテンツを指定する
開くスピードを変える。数値が大きいと速く、小さいと遅い。

<script>
Event.observe(window, 'load', function(){
new accordion("accordion",{resizeSpeed : 10});
}, false);
</script>

サンプル：開くスピードを変える
HTMLでの設定
HTMLコードは、<head>内に書いたjsで設定したidの要素で全体を囲む。
その中に、「accordion_toggle」を付けた要素（見出し）と「accordion_content」を付けた要素（本文）を入れる。
クラス名「accordion_toggle」と「accordion_content」は変更不可。
下記のように構成する。
<div id="accordion">　←<head>内に書いたjsのidと連動。
<hx class="accordion_toggle">見出し</hx>
<div class="accordion_content">本文</div>
・
・
</div>
CSSの設定

CSSは要素の幅やカラーなど好きなように指定するが、以下の点に注意。
「accordion_toggle」には「cursor: pointer;」を指定。
「accordion_content」には「overflow:hidden;」を指定。こうしたほうが動きがスムーズ。

このページのCSSは下記の通り。
#accordion {
width:600px;
border-top: 1px solid #CCC;
}
#accordion .accordion_toggle {
width:598px;
background: url(../img/icon.gif) no-repeat 5px center;
text-indent: 20px;
color: #990000;
font-weight: normal;
font-size: 13px;
height: 24px;
cursor: pointer;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
line-height: 25px;
}
#accordion .accordion_content {
width:578px;
background:#F4F7FB;
overflow:hidden;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
padding: 10px;
}
横方向にも展開
<head>内のjsに「direction : "horizontal"」を書き加えることで、横方向にも開くことができる。
<script>
Event.observe(window, 'load', function(){
new accordion("sample5",{direction : "horizontal"});
}, false);
</script>
上記のスクリプトだけだと、内容量によって幅がバラバラになったり、また、すべて閉じた状態だと、展開時に見た目の変化が大き過ぎるので、 幅をあらかじめ定め、最初からどれか1つのコンテンツが開いているようにすると見やすい。
サンプルのスクリプトは下記の通り。

<script>
Event.observe(window, 'load', function(){
var acc = new accordion("sample5",{direction : "horizontal",
defaultSize:{width:300}});
acc.activate($$("#sample5 .accordion_toggle")[0]);
}, false);
</script>

サンプル：横方向に展開
CSSも横展開に合わせて設定する。
クラス「accordion_toggle」「accordion_content」ともに「float: left;」を指定する。
幅や高さなども、横開閉に合わせた数値を指定する。
また、「accordion_content」には
「height」「min-height」「max-height」に同じ値を指定しておくと、内容量によって高さが変ることを防ぐ。
サンプルのCSSは下記の通り。
#sample5 .accordion_toggle {
background: #A3DFE9;
font-size: 13px;
cursor: pointer;
float: left;
border-bottom: 1px solid #A3DFE9;
border-right: 1px solid #FFFFFF;
border-top: 1px solid #A3DFE9;
text-align: center;
width: 22px;
height: 300px;
}
#sample5 .accordion_content {
overflow:hidden;
background: #FFFFFF;
float: left;
border-bottom: 1px solid #A3DFE9;
border-right: 1px solid #A3DFE9;
border-top: 1px solid #A3DFE9;
padding: 10px;
height: 280px;
min-height:280px;
max-height:280px;
}
ページの最上部へ