Movable Type 備忘録

moo.fx でアコーディオン表示

Mar182007
Author: bzbell
Categories: Customize
Tags: JavaScript, moo.fx

Next Page: DJTRによるフリーフォントで日本語表示する
Prev Page: エラーページ用のテンプレート変更

こんにちわ^^

こちらのK's Laboさんのところでmoo.fxを使用したタブ表示を紹介してたので、わたしも moo.fx を使ってみました (●´∀｀●)

詳しい説明は
moo.fxによるアコーディオンみたいなプルダウン表示「導入編」
NYOKIGLITTER - design studio 2007:: moo.fx tutorial
を参考にしてください。

ディレクトリ構成

ここでは以下のような環境として説明します。

http://●●●.com/
+--- index.html
+--- styles-site.css
+--- styles-calendar.css  <-- 新規作成するスタイルシートです
+--- js/
+--- moo.fx/
+-- tabbed.html
+-- images/
+-- greentab.jpg
+-- scripts/
+-- moo.fx.js
+-- moo.fx.pack.js
+-- prototype.lite.js  <-- 既にprototype.jsを使ってる人は不要です
+-- moo.fx.accordion.js <-- 新規作成するスクリプトです

カスタマイズ

まず moo.fx をアップロードします。
こちらのfx.Accordion/tab styleからtabAccordion.zipという圧縮ファイルをダウンロードして、適当なフォルダに展開します。

そして、上記ディレクトリ構成のようにアップロードします。

次に新規作成する、scripts/moo.fx.accordion.js をアップロードします。
以下をコピー & ペーストして、上記ディレクトリ構成のようにアップロードします。保存するファイル名は任意ですが、ここでは scripts/moo.fx.accordion.js とします。

/*
* boxid   :moofx-box を指定します
* tabid   :moofx-tab を指定します
* duradion:エフェクトの表示間隔を指定します
* index   :任意番目のmoofx-boxを初期表示します(1~n)
*/
function moofx_init(boxid, tabid, duration, index)
{
var stretchers  = document.getElementsByClassName(boxid);
var toggles     = document.getElementsByClassName(tabid);
var myAccordion = new fx.Accordion(toggles, stretchers, {opacity: false, height: true, duration: duration});
var found = false;
toggles.each(function(h3, i) {
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) {
myAccordion.showThisHideOpen(stretchers[0]);
}
myAccordion.showThisHideOpen(stretchers[index - 1]);
}

以上で準備は完了です。

moo.fx の使い方

moo.fx のアコーディオン・エフェクトの説明をカンタンにしてみます。

先ほどのサンプルページのように、moo.fx を使ってアコーディオンのようなエフェクト表示させるには、以下のようなマークアップにする必要があります。

<div id="content">
<div class="tab"><h3 title="●●●1"><a href="javascript:void(0);">タブ1 タイトル</a></h3></div>
<div class="tab"><h3 title="●●●2"><a href="javascript:void(0);">タブ2 タイトル</a></h3></div>
<div class="tab"><h3 title="●●●3"><a href="javascript:void(0);">タブ3 タイトル</a></h3></div>
<div class="boxholder">
<div class="box">タブ1に対するコンテンツをここに記述します</div>
<div class="box">タブ2に対するコンテンツをここに記述します</div>
<div class="box">タブ3に対するコンテンツをここに記述します</div>
</div><!-- boxholder -->
</div><!-- content -->

上記のように、moo.fx のブロックとして <div id="content">~</div> で囲います。
そして、タブ名として <div class="tab">~</div> を必要な分だけ用意します。

最後に、各タブ選択時に表示する内容を <div class="box">~</div> として用意します。
その際、<div class="box">~</div> の順番は先ほどの <div class="tab">~</div> の順番に合わせる必要があります (￣∇￣)b

そして、各タブ表示内容 <div class="box">~</div>を<div class="boxholder">~</div> で囲います。

以上が moo.fx のアコーディオン・エフェクトの構成です。
上記のようなマークアップにしたら、ページの先頭(<head>～</head>)とページの最後(</body>の上辺り)に以下を追加すれば OK です。

ページの先頭
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx/scripts/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx/scripts/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx/scripts/moo.fx.pack.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx/scripts/moo.fx.accordion.js"></script>

以下はページの最後に追加します。

<script type="text/javascript">
Element.cleanWhitespace('moofx-content');
moofx_init('moofx-box', 'moofx-tab', 600, 0);
</script>

青い字の部分には、上記で moo.fx のマークアップで説明した <div id="content">～</div> の ID 名称を指定します。

赤い字の部分にはタブ名(<div class="tab">~</div>)を、緑の字の部分にはエフェクトの表示間隔を指定します。

最後にピンクの字の部分には初期表示時のタブの番号を指定します。タブ番号は 0 から始まる番号となります。

以上で、moo.fx を使用したアコーディオン・エフェクトを使うことができました。

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(3)

#1: Posted by かわぐち [RES]

ども、かわぐちです。

わたしのエントリーを紹介してくださって、
ありがとうございます(≧o≦)
うれし～、でもちょっと恥ずかし～。

いっつも参考にさせてもらうばっかだったので、
これで少しは役にたったような気がして嬉しい限りです。

んで、な～るほど、このカレンダー。
いいですね～。（素直な意見）
やってみようかなって思う私であります。

Posted on March 18, 2007

#2: Posted by bzbell [RES]

>>1 かわぐちさん

こんにちわ^^

とっても参考になりましたの (●´∀｀●)
ついでに、サイトマップもmoo.fxでカスタマイズしちゃいました♪

今後ともよろしくですの (￣∇￣)/

Posted on March 18, 2007

#3: Posted by かわぐち [RES]