Movable Type 備忘録

Rico.jsを使ってサイドバーの折りたたみ

Jan282007
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, Rico

Next Page: ブログの最終更新日付を表示する
Prev Page: Ajaxでアンケート投票する

わたしのサイトのトップページで表示してる、『Commenters Top10』や『Popular Page Top10』の折りたたみについて訪問者さんから質問を頂いたので、メールで返答して済ませたのですが、他にも疑問を持つ人いるかなぁ･･･と思って記事にしてみました。

正直言うと、このカスタマイズってタイミングを逸してまして、RicoというJSを使用して実現してます。
今となってはたくさんのサイトで詳しく紹介されてるので、今さら感いっぱいなかんじがしてご紹介はやめてましたの。

Ricoはprototype.jsと併用して使います。
できる機能もたくさんありまして、Ricoのサイトでデモ・ページと、使い方などが説明されてます。
Ricoのデモページ

たくさんある機能の中で、わたしは主に以下の機能を使ってたりします。

Rico.Corner
いわゆる角丸を実現してくれます。
Rico.Accordion
任意のブロックをアコーディオンのように折りたたむことで、記事などを見やすくしてくれます。
Rico.Effect
任意のブロックをフェードアウトさせたり、アニメーションしながらサイズ変更したりなどできる、エフェクト系です。

で、今回ご質問した内容は上記でいうところの、Rico.Effectという機能を応用したものです。スライドさせながら、任意のブロックの長さを変更することで、表示／非表示させています。ですので、わたしのサイトでは訳けあって使ってませんが、エントリの追記を表示するときに使用したりしてもいいかも、です。

使い方はカンタンで、まずRico.jsをRicoからダウンロードします。 prototype.jsをお持ちでないなら、ついでにダウンロードしておきます。

次に、以下のrico-toggleslider.jsをコピーしてファイルに保存します。

var toggle_save_height = new Object();
var toogle_showing     = new Object();

function rico_toggle_slide(itemid, linkid, openmark, closemark)
{
    if ( toogle_showing[itemid] )
    {
        rico_toggle_up_slide(itemid, linkid);
        toogle_showing[itemid] = false;
        $(linkid).innerHTML    = openmark;
    }
    else
    {
        rico_toggle_down_slide(itemid, linkid);
        toogle_showing[itemid] = true;
        $(linkid).innerHTML    = closemark;
    }

    return false;
}

function rico_toggle_up_slide(itemid, linkid)
{
    var menu = $(itemid);

    menu.style.overflow = 'hidden';
    new Rico.Effect.Size(menu, null, 1, 120, 8, {complete:function() { $(menu).style.visibility = 'hidden'; }});
}

function rico_toggle_down_slide(itemid, linkid)
{
    var menu = $(itemid);

    menu.parentNode.style.height = '';
    menu.style.visibility        = 'visible';
    new Rico.Effect.Size(menu, null, toggle_save_height[itemid], 120, 8, {complete:function() { $(menu).style.overflow = 'visible'; }});
}

function rico_init_toggle_slide(className,  showmode)
{
    var entries = document.getElementsByClassName(className);

    for (var i = 0;entries.length >
i;i++)
    {
        var e = entries[i];

        toogle_showing[e.id]     = showmode;
        toggle_save_height[e.id] = e.offsetHeight;

        if ( showmode )
        {
            e.style.height     = toggle_save_height[e.id];
            e.style.visibility = 'visible';
            e.style.overflow   = 'visible';
        }
        else
        {
            e.style.height     = '1px';
            e.style.visibility = 'hidden';
            e.style.overflow   = 'hidden';
        }
    }
}

window.onload = function()
{
    rico_init_toggle_slide('rico-toggle-slide-close', false);
    rico_init_toggle_slide('rico-toggle-slide-open',  true );
}

rico.js、prototype.jsおよび、rico-toggleslider.jsをサーバにアップロードします。アップロード先はどこでも構いません。各自の環境に合わせてアップロードしてください。

最後にスライドさせたい部分のテンプレートを変更します。ここでは、サイドバーの折りたたみを例にして説明します。
変更内容は以下の通りです。

<head>～</head>の間
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/rico/rico.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/rico/rico-toggleslider.js"></script>

青い字の部分を各自の環境に合わせて変更します。

<div class="module-header">Commenters Top10
<a id="commenter-link" href="javascript:void(0);" onclick="return rico_toggle_slide('commenter-list', 'commenter-link', '▼', '▲');" class="toggle-slide-link">▼</a></div>
<div class="module-recent-comments module">
<ul id="commenter-list" class="rico-toggle-slide-close">
    <MTSQL query="select DISTINCT comment_author, comment_url, COUNT( * ) FROM `mt_comment` WHERE comment_author != 'bzbell' GROUP BY comment_author ORDER BY `COUNT( * )` DESC LIMIT 0 , 10">
        <li><a href="<$MTSQLColumn column='2'$>"><span><$MTSQLColumn column="3"$></span><$MTSQLColumn column="1"$></a></li>
    </MTSQL>
    </ul>
</div>

上記XHTMLは、わたしのサイトで実際に使っているコメンター一覧です。
青い字の部分がサイドバー折りたたみのリンクにあたります。赤い字の部分が折りたたみ対象となるブロック名になります。緑の字の部分はリンク名になります。ピンクの字の部分は必ずrico-toggle-slide-closeまたは、rico-toggle-slide-openとすることで、初期表示時の状態を設定できます。

赤と緑の部分はそれぞれ対になっています。名称を合わせる必要がありますのでご注意ください。

また、パラメータとしてOPEN/CLOSE時に表示するマークを指定します。

rico_toggle_slide('commenter-list', 'commenter-link', '▼', '▲');

青い字の部分がOPEN時に表示されるマークで、赤い字がCLOSE字のマークとなります。

以上で完了です。いつものように再構築して表示確認してください。

こんなかんじでサイドバーの折りたたみができるわけですが、このrico-toggleslider.jsには欠点があります。
それは、初期表示時は 'OPEN' または 'CLOSE' というように、どちらか一方しか指定ができないことです。たとえば、あるサイドメニューの初期表示時は 'OPEN' で、他は 'CLOSE' というような使い方は現時点ではできません。
今後の課題で、気が向いたら対応したいと思います。

- 2007.02.14 追記-

rico-toggleslider.jsをバージョンアップしました。
各サイドバーから呼び出す、rico_toggle_slide関数のパラメータとして、OPEN/CLOSE字のマークを渡すよう変更しました。また、エントリ追記のスライドもできることを確認しました（;￣∇￣A ほっ

- 2007.02.12 追記-

原因がよく分からないです（つω-`｡）
ですので、一時的にエントリ追記用のスライドを使用できないようにします。具体的には以下のように対応しました。

66行目
/*Opera/WINだと思った動作をしないため、問題解決までコメントします
rico_init_toggle_slide('rico-toggle-slide-readmore', '続きを読む', '隠す', false);
*/
rico_init_toggle_slide('rico-toggle-slide-close', '▼', '▲', false);
rico_init_toggle_slide('rico-toggle-slide-open', '▼', '▲', true);

赤い字の部分をコメントにして使用不可にします。

- 2007.02.10 追記-

すいません。周知するの忘れてましたがOPEN/CLOSE混在して使用できるように対応しました。

ですが問題が見つかりまして、Opera/WINで確認したところ、折りたたみの部分が制御できなくなる現象がでております。 Firefox/WIN、IE/WINでは問題ないのですが、なぜかOpera/WINだけが正しく動作しておりません。(調査中)
問題箇所は以下のところです。

66行目
rico_init_toggle_slide('rico-toggle-slide-readmore', '続きを読む', '隠す', false);
rico_init_toggle_slide('rico-toggle-slide-close', '▼', '▲', false);
rico_init_toggle_slide('rico-toggle-slide-open', '▼', '▲', true);

赤い字の部分がエントリ追記用、青い字の部分がサイドバー用として追加したのですが、上記いれずかの行を1行でも削除すると、Opera/WINでも動作することを確認しています。

では、SEE YOU