Movable Type 備忘録

 

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

わたしのサイトのトップページで表示してる、『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をコピーしてファイルに保存します。

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

 Trackback Pings(0)

No trackbacks found.

 Comments(6)

#1: Posted by す [RES]

とても参考になりました

#2: Posted by bzbell [RES]

>>1 す さん

こんにちわ^^

> とても参考になりました

参考になってよかったです♪

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

私のブログへのコメント、ありがとうございます。

お気づきになったかもしれませんが、
このエントリーの内容を参考にさせてもらって、
「サイドバーの折りたたみ」を実装しました。

たいへん貴重な情報、ありがとうございます。
これからも参考にさせてください。
よろしくお願いします。

#4: Posted by bzbell [RES]

>>3 かわぐち さん

こんにちわ^^

> 私のブログへのコメント、ありがとうございます。

いつも見させてもらってるのですが、コメントするのは初めてでしたね ( ̄∇ ̄)!?
ムスメさんのイラスト気に入ってますの♪

こちらこそよろしくお願い致します (m;_ _)mペコ

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

どうもです、かわぐちです。

>ムスメさんのイラスト気に入ってますの♪
ありがとうございます。
乗せろ、乗せろとうるさいもんで・・・。
親バカですね・・・。

#6: Posted by bzbell [RES]

>>5 かわぐち さん

こんにちわ^^

> 親バカですね・・・。

そうかもしれませんね (; ̄∇ ̄A

でも、世間の父親なんてそんなもんだと思いますよ♪
わたしの父も、わたしが帰るといろいろ食べ物だしてくれたり、TDLのチケットくたりなど至りつくせりですの♪

 Post a Comment

コメント用フィード