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

Movable Type 備忘録

jQueryでサイドバー折りたたみをやってみる

Jun232007
Vote:
http://bizcaz.com/archives/2007/06/23-232407.php
Categories: jQuery
Tags: jQuery
Social Bookmark

Prev Page: jQueryで非同期通信(Ajax)やってみる
Next Page: jQueryでフェードするメッセージ表示してみる

こんにちわ^^

jQuery にもだいぶ慣れてきましたが、まだまだ分からないことが多くて、ぜんぜん使いこなせてないです。
コードを書いてて、気づくと Native な JavaScript の記述になってしまって、慣れるまでにチョビッと時間がかかりそうです (^▽^;)

さて、わたしのサイトを jQuery 漬けにしようと目論んでおりますが、予想以上に prototype.js に依存しちゃってまして、jQuery 移行はまだ先の話になりそうですの。
とりあえず、jQuery を使ってサイドバーを折りたたんでみましたのでそのカスタマイズをご紹介します。

今回は2つのサイドバーの折りたたみ方を説明します。

1つはブラインド・エフェクトによるサイドバーの折りたたみです。オーソドックスなサイドバーの折りたたみ方です。
ifxblind.js によるエフェクト

もう1つはスライド・エフェクトによるサイドバーの折りたたみです。
アコーディオンみたいなかんじのやつです。
ifxslide.js によるエフェクト

ディレクトリ構成

http://●●●.com/
|
+-- index.html <-- 各自のトップページ
+-- styles-site.css <-- 各自のスタイルシート
|
+-- js/
| +-- jquery/
| | +-- interface/
| | | +-- ifx.js <-- interface.js のコア
| | | +-- iutil.js <-- interface.js のユーティリティ関連
| | | +-- ifxblind.js <-- ブラインド・エフェクト用
| | | +-- ifxslide.js <-- スライド・エフェクト用
| | | +-- ：
| | | +-- ：
| | | +-- ：
| | |
| | +-- jquery.js
| | +-- jquery-effect.js
| |

ブラインド・エフェクトによるカスタマイズ

まずはオーソドックスなサイドバーの折りたたみから説明します。

まず jQuery をアップロードします。
jQuery のアップロードについては、こちらのjQueryを使ってみるを参考にしてください。
次に interface.js をアップロードします。
こちらのInterface elements for jQuery - Download Interfaceから interface_1.2.zip という圧縮ファイルをダウンロードします。

そして、適当なフォルダに展開して上記ディレクトリ構成のようにアップロードしてください。
テンプレートを変更します。
HTMLヘッダ(<head>～</head>)の中に以下を追加します。
HTML ヘッダに追加
1. <script src="<$MTBlogURL$>js/jquery/jquery.js" type="text/javascript"></script>
2. <script src="<$MTBlogURL$>js/jquery/interface/ifx.js" type="text/javascript"></script>
3. <script src="<$MTBlogURL$>js/jquery/interface/iutil.js" type="text/javascript"></script>
4. <script src="<$MTBlogURL$>js/jquery/interface/ifxblind.js" type="text/javascript"></script>
5. <script src="<$MTBlogURL$>js/jquery/jquery-effect.js" type="text/javascript"></script>
次にサイドバーを変更します。
以下を参考に各自のテンプレートを変更します。
ブラインド・エフェクト用サンプル
1. <div id="blind-container">
2. <dl>
3. <dt class="blind-header"><a id="monthly-archive-link" href="javascript:void(0);"
4. onclick="ifxblind_toggle_vertical('#monthly-archive');">Monthly Archives</a></dt>
6. <dd id="monthly-archive-block"><dl>
7. <MTArchiveList archive_type="Monthly">
8. <dt><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%Y/%B"$> </a>[<$MTArchiveCount zero_pad="3"$>]</dt>
9. </MTArchiveList>
10. </dl></dd>
12. <dt class="blind-header"><a id="recent-entry-link" href="javascript:void(0);"
13. onclick="ifxblind_toggle_vertical('#recent-entry');">Recent Entries</a></dt>
15. <dd id="recent-entry-block"><ul>
16. <MTEntries>
17. <li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$> </a>
18. <$MTEntryDate language="en" format="%y%m/%d"$></li>
19. </MTEntries>
20. </ul></dd>
21. </dl>
22. </div>
赤い字の部分が大事なところです。
赤い字で指定した ID タグがブラインド・エフェクトされるところになります。

エフェクトされるところの ID タグには、「赤い字の部分 + '-block'」という名称を付けてください。
後ほど説明します jquery-effect.js の内部で、赤い字で指定した文字列に '-block' という文字列を連結させています。
そうすると、結果的には以下のような ID タグが付いたブロックがエフェクトされることになります。
1. <dd id="monthly-archive-block">
青い字の部分は、クリックされると 'ifxblind_toggle_vertical' という関数を実行するよう指定しています。
最後にブラインド・エフェクト用の JavaScript をアップロードします。
以下のコードをコピペして、jquery-effect.js というファイル名で保存します。
jquery-effect.js
1. function ifxblind_toggle_vertical(id)
2. {
3. $(id + '-block').BlindToggleVertically(500, null, 'bounceout');
4. return false;
5. }
青い字の部分を変更(ミリ秒単位)することでブラインド・エフェクトの速度を変更することができます。
一通り変更したら上記ディレクトリ構成のようにアップロードしてください。

以上で jQuery のブラインド・エフェクトでサイドバーを折りたたむことができました (●＞∀＜●)／

スライド・エフェクトによるカスタマイズ

次にスライド・エフェクトによりサイドバー折りたたみを説明します。
jQuery と interface.js のアップロードはブラインド・エフェクトと同じなので省きます。

テンプレートを変更します。
HTMLヘッダ(<head>～</head>)の中に以下を追加します。
HTML ヘッダに追加
1. <script src="<$MTBlogURL$>js/jquery/jquery.js" type="text/javascript"></script>
2. <script src="<$MTBlogURL$>js/jquery/interface/ifx.js" type="text/javascript"></script>
3. <script src="<$MTBlogURL$>js/jquery/interface/iutil.js" type="text/javascript"></script>
4. <script src="<$MTBlogURL$>js/jquery/interface/ifxslide.js" type="text/javascript"></script>
5. <script src="<$MTBlogURL$>js/jquery/jquery-effect.js" type="text/javascript"></script>
次にサイドバーを変更します。
以下を参考に各自のテンプレートを変更します。
スライド・エフェクト用サンプル
1. <div id="slide-container">
2. <dl>
3. <dt class="slide-header">Monthly Archives</dt>
5. <dd class="slide-content"><dl>
6. <MTArchiveList archive_type="Monthly">
7. <dt><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%Y/%B"$> </a>[<$MTArchiveCount zero_pad="3"$>]</dt>
8. </MTArchiveList>
9. </dl></dd>
11. <dt class="slide-header">Recent Entries</dt>
13. <dd class="slide-content"><ul>
14. <MTEntries>
15. <li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$> </a>
16. <$MTEntryDate language="en" format="%y%m/%d"$></li>
17. </MTEntries>
18. </ul></dd>
19. </dl>
20. </div>
赤い字および、緑の字の部分はそれぞれ必ず統一させてください。
そうしないと、アコーディオンのような動作しなくなりますのでご注意ください。

また、赤い字、緑の字および、青い字の部分は固定名称です。
各自の好みで変更したい場合には、後ほど説明します jquery-effect.js の中を変更する必要があります。
最後にスライド・エフェクト用の JavaScript をアップロードします。
以下のコードをコピペして、jquery-effect.js というファイル名で保存します。
jquery-effect.js
1. $(function(){
2. $('#slide-container dd:not(:first)').hide();
4. $('#slide-container dt.slide-header').click(
5. function(){
6. $('#slide-container dd.slide-content:visible').slideUp('slow');
7. $(this).next().slideDown('slow');
8. return false;
9. });
10. });
赤い字、緑の字および、青い字は先ほど説明しました固定名称になります。
変更する場合には、JavaScript と合わせて変更してください。

カーキ色の時の部分を変更することでスライド・エフェクトの速度を変更することができます。 slow、normal、fast から選択可能です。
一通り変更したら上記ディレクトリ構成のようにアップロードしてください。