Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

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

Jan282007
Vote:
http://bizcaz.com/archives/2007/01/28-233625.php
Categories: JavaScript
Tags: JavaScript
Social Bookmark

Prev Page: JavaScriptでドロップシャドウ
Next Page: IE6でαチャンネルPNG画像を表示する３

わたしのサイトのトップページで表示してる、『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 追記-

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