Movable Type 備忘録

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

  • Mar182007
  • Vote:
    http://bizcaz.com/archives/2007/03/18-152934.php
  • Categories: prototype
  • Tags:
  • Social Bookmark

こんにちわ^^

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

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

サンプルを表示できませんでした。

ディレクトリ構成

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

  1. http://●●●.com/
  2.  +--- index.html
  3.  +--- styles-site.css
  4.  +--- styles-calendar.css <-- 新規作成するスタイルシートです
  5.  +--- js/
  6.       +--- moo.fx/
  7.             +-- tabbed.html
  8.             +-- images/
  9.                   +-- greentab.jpg
  10.             +-- scripts/
  11.                   +-- moo.fx.js
  12.                   +-- moo.fx.pack.js
  13.                   +-- prototype.lite.js <-- 既にprototype.jsを使ってる人は不要です
  14.                   +-- moo.fx.accordion.js <-- 新規作成するスクリプトです

カスタマイズ

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

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

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

    1. /*
    2.  * boxid :moofx-box を指定します
    3.  * tabid :moofx-tab を指定します
    4.  * duradion:エフェクトの表示間隔を指定します
    5.  * index :任意番目のmoofx-boxを初期表示します(1~n)
    6.  */
    7. function moofx_init(boxid, tabid, duration, index)
    8. {
    9.     var stretchers = document.getElementsByClassName(boxid);
    10.     var toggles = document.getElementsByClassName(tabid);
    11.     var myAccordion = new fx.Accordion(toggles, stretchers, {opacity: false, height: true, duration: duration});
    12.  
    13.     var found = false;
    14.  
    15.     toggles.each(function(h3, i) {
    16.         var div = Element.find(h3, 'nextSibling');
    17.             if (window.location.href.indexOf(h3.title) > 0) {
    18.                 myAccordion.showThisHideOpen(div);
    19.                 found = true;
    20.             }
    21.     });
    22.  
    23.     if (!found) {
    24.         myAccordion.showThisHideOpen(stretchers[0]);
    25.     }
    26.  
    27.     myAccordion.showThisHideOpen(stretchers[index - 1]);
    28. }

    以上で準備は完了です。

moo.fx の使い方

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

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

  1. <div id="content">
  2.     <div class="tab"><h3 title="●●●1"><a href="javascript:void(0);">タブ1 タイトル</a></h3></div>
  3.     <div class="tab"><h3 title="●●●2"><a href="javascript:void(0);">タブ2 タイトル</a></h3></div>
  4.     <div class="tab"><h3 title="●●●3"><a href="javascript:void(0);">タブ3 タイトル</a></h3></div>
  5.  
  6.     <div class="boxholder">
  7.         <div class="box">タブ1に対するコンテンツをここに記述します</div>
  8.         <div class="box">タブ2に対するコンテンツをここに記述します</div>
  9.         <div class="box">タブ3に対するコンテンツをここに記述します</div>
  10.     </div><!-- boxholder -->
  11. </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 です。

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

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

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

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

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

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

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

 Trackback Pings(0)

No trackbacks found.

 Comments(7)

#1: Posted by かわぐち @ March 18, 2007 [REPLY]
user-pic

ども、かわぐちです。

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

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

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

 
#2: Posted by bzbell @ March 18, 2007 [REPLY]
user-pic

>>1 かわぐち さん

こんにちわ^^

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

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

 
#3: Posted by かわぐち @ March 20, 2007 [REPLY]
user-pic

ども、かわぐちです。

>ついでに、サイトマップもmoo.fxでカスタマイズしちゃいました♪
ほ～、それは是非拝見しないと。
・・・・。
って、マップはどこかな？

 
#4: Posted by 山田 @ November 20, 2008 [REPLY]
user-pic

検索してこちらに辿り着いた者です。
たいへん分かりやすい説明で感激です。
説明通りに設置し、うまく機能しているのですが、
ひとつだけ教えていただきたいことがございます。

＞初期表示時のタブの番号を指定

というところで、０は初期設定だと思うのですが、
２や３にするだけで、初期のタブ表示が
変わるのでしょうか？

当方の環境では、タブ３つあり、
０と１にした場合は、何も変わらず、２や３にしてみると
いきなり全部が見えてしまう状況です。

何かご教示いただけましたら幸いです。
よろしくお願いいたします。

 
#5: Posted by Author Profile Page bzbellから山田への返信 @ November 20, 2008 [REPLY]
user-pic

>>4 山田 さん

こんばんわ^^

> 当方の環境では、タブ３つあり、
> ０と１にした場合は、何も変わらず、２や３にしてみると
> いきなり全部が見えてしまう状況です。

すいませんあせあせすっごく今さらですが 0 から始まる番号ではなく、1 から始まるタブ番号を指定してください。
そうしないと JavaScript の挙動がおかしくなります。

また、moo.fx.accordion.js 内の 24 行目を以下のようにコメントにすれば期待する動作になると思います。 

/*myAccordion.showThisHideOpen(stretchers[0]);*/

ご確認くださいぺこり

 
#6: Posted by 山田 @ November 21, 2008 [REPLY]
user-pic

bzbell様
さっそくのご回答いただきありがとうございます。ぺこり
コメントしてみたところ、
今度は全部閉じた状態となってしまいました。
一応、タブの方は機能しているのですが、
どうして指定したタブで始まらないのか、悲しくなります。グウグウ

なんとなく、あと少しというところのような気がするのですが、
また一つ質問で恐縮ですが、この部分
myAccordion.showThisHideOpen(stretchers[index - 1]);
は、そのままでよいのでしょうか？
この[index - 1]の部分が気になるのですが、
どういう意味なのでしょうか？
javascrpt初心者ですみません。
何かヒントでもあれば助かります。
よろしくお願いいたします。

 
#7: Posted by 山田 @ November 21, 2008 [REPLY]
user-pic

bzbell様
今先ほど無事に解決いたしました。
よくわかりませんが、
myAccordion.showThisHideOpen(stretchers[0]);
の数値を変えて表示されました。
いろいろとご迷惑をおかけいたしました。

 

 Post a Comment

 

コメント用フィード