2005年8月24日

サイドメニューの折りたたみ(v5.0:ゆっくり折りたたむ)

Google MapsGoogleサジェスト で一躍有名になった Ajax(Asynchronous JavaScript+XML:エイジャックス) ですが、Ajax用JavaScriptライブラリを利用してサイドメニューをゆっくり折りたためるようにしてみました。
公開テンプレートを用いたサンプルを作りましたので、実際の折りたたみ動作をご確認ください。固定3カラム・可変3カラムを右上のリンクで切り替えられるようにしています。

ゆっくり折りたたむサンプル

本カスタマイズで参考にさせていただいたのは下記のサイトです。ありがとうございました。

なお、本カスタマイズはサイドメニューの折りたたみ(v4.0)を前提にカスタマイズしていますので、新たにサイドメニューの折りたたみを導入される場合はサイドメニューの折りたたみ(v4.0)のカスタマイズを行ってください。
また折りたたみマークで折りたたむようにしている場合の動作は未確認ですので予めご容赦ください。

1.Ajax用JavaScriptライブラリのダウンロード

Scriptaculous のページへジャンプし(接続できない場合は2項へ進んでください)、上の方にある downloads というタブをクリックします。次ページの右側にある Archived Versions の1.1b1 の zip または tar.gz のリンクをクリックしてください。なお他のバージョンでは動作しませんのでご注意ください。
ダウンロードしたアーカイブを解凍し、src というディレクトリに

  • controls.js
  • effects.js
  • dragdrop.js

の3つのファイルがあることを確認してください。この中から controls.js と effects.js を使います。

次に、downloads タブをクリックした次のページの本文にある Prototype JavaScript library のリンクをクリックし、次のページの Just the .js, please というリンクをクリックして prototype-1.3.1.js をダウンロードします(バージョンは2005年8月24日現在)。保存する時、または保存後、ファイル名を

prototype.js

に修正してください。

2.Ajax用JavaScriptライブラリのダウンロード

(1項が×の場合)

1項で Scriptaculous に接続できない場合は、下記のページより取得してください。

Ruby on Rails/spinoffs/scriptaculous/

取得するのは下記の3ファイルです。

  • prototype.js
  • controls.js
  • effects.js

prototype.js は lib/ のリンクをクリックして、次のページの prototype.js をクリックします。次ページでソースが表示されますのでマウスコピーし、任意のエディタで新規ファイルを作り、そこにペーストして prototype.js というファイル名で保存します(コピーする範囲に注意してください)。文字コードはブログと同じ文字コードが無難です。
他の3ファイルは、最初のページに戻って src/ のリンクをクリックします。後は prototype.js と同様の方法で保存してください。

3.menufolder.js のダウンロード(Ver4.00以下の方のみ)

下記の download をクリックして、次のページで menufolder.js をクリックして menufolder.js(Ver5.00) をダウンロードしてください。

download

4.スクリプトの修正

デフォルトの状態では正常に動作しない(折りたたみタイトルが変に表示される)ため、以下のいずれか片方のみを実施してください。修正方法は妥当でないかも知れませんので予めご容赦ください。

4.1 protptype.js を修正する

任意のエディタで prototype.js を開き、「show: function」で検索し、そのちょっと下の部分に青色の「block」を追加します。

show: function() {
  for (var i = 0; i < arguments.length; i++) {
    var element = $(arguments[i]);
    element.style.display = 'block';
  }
},

4.2 menufolder.js を修正する

任意のエディタで menufolder.js を開き、一番下から 50 行ほど戻ったところにある

        Element.show(effect.element); // prototype.js 修正要
//      element.style.display = 'block';

の赤色部分を削除して、その上の行の先頭に、青色のように

//        Element.show(effect.element); // prototype.js 修正要
      element.style.display = 'block';

とコメントマークを追加します。

5.スクリプトのアップロード

上記の4ファイルをローカル・サイト・パス(index.html が置かれているディレクトリ)にアップロードします。
なお、menufolder.js については6項の設定を行った後でアップロードしてください。

6.テンプレートの修正

折りたたみを行いたい各テンプレートの <head> ? </head> の部分に青色部分を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>controls.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

7.折りたたみ速度の設定

menufolder.js では全てのメニューに対して一括してゆっくりにする方法と個別に設定する2通りの方法を用意しています。

7.1 全てのメニューに対して一括してゆっくりにする

menufolder.js の下記の赤色部分を slow に修正してください。デフォルトは normal になっています。 テンプレートで FoldNavigation を起動している部分の変更は不要です。
//-----------------------
// 折りたたみスピード
//-----------------------
// 通常:'normal'
// 遅い:'slow'
var speed = 'slow';

7.2 個別に設定する

ゆっくり折りたたみたいメニューリストの下に下記の記述を追加します。

<script type="text/javascript">
<!--
FoldNavigationSlowly('idName','initState',viewListNumber);
//-->
</script>

すでにご利用中の方は

FoldNavigation('idName','initState',viewListNumber);

の FoldNavigation を FoldNavigationSlowly に変更してください。
赤色部分については menufolder.js マニュアルの3項を参照してください。

設定が終わったらテンプレートを保存・再構築してください。設定が正常にできていれば折りたたみ動作が変わっているはずです。

8.折りたたみスピードを変更する

サンプルの折りたたみ速度はデフォルトよりやや速くしています。速度を変更する場合は、effect.js の下記の赤色部分を変更します。

Effect.Base.prototype = {
  setOptions: function(options) {
    this.options = Object.extend({
      transition: Effect.Transitions.sinoidal,
      duration:   1.0,   // seconds
      fps:        25.0,  // max. 100fps
      sync:       false, // true for combining
      from:       0.0,
      to:         1.0
    }, options || {});
  },

単位は「秒」で、デフォルトは「1.0」(つまり1秒)なので、これを「0.5」等に修正すれば動作が早くなります。

9.その他

公開テンプレートはサンプルでご覧の通り正常に動作します。BlogPeople 等のリンクリストを overflow 指定でスクロールさせている場合も問題ありません。
折りたたみ動作で開く瞬間と閉じる瞬間に点滅するような場合は1行目の

<?xml version="1.0" encoding="utf-8"?>

を削除してみてください(取り除くことで正常に動作することを確認しています)。

またサブカテゴリーリストの折りたたみは不具合があるようです(原因不明)。また他のCSSを用いられている場合、設定?によってスムーズに動作しない可能性があります(原因は究明できておりません)ので予めご容赦ください。
また折りたたむ動作はメニューリストの上下 margin が少ない方がスムーズに動くようです。

以上です。

2005.08.25
折りたたみ時に発生する不具合を解消するための4項を追加しました(既知の事象でしたが本文に盛り込むのを忘れておりました、すいません)。

2005.11.01
折りたたみ時にメニューリストが点滅する場合の対処を9項に追記しました。

2007.10.25
6項のソースコードについて、JavaScript エラー回避のため、controls.js と effects.js の順序を入れ替えました。

Comments [75] | Trackbacks [25]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3