2004年10月26日

サイドメニュー折りたたみの動作遅延対処

October 26,2004 12:50 AM
Tag:[]
Permalink

2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので

サイドメニュー折りたたみスクリプト(cookie等改善版)

を参照ください。


以前公開したサイドメニュー折りたたみ(改)でリンクリスト等の表示までに時間がかかるメニューがあると、一時的にメニューが開いた状態になってしまいます。これは折りたたみ状態保持スクリプトを適用している場合も同様で、HTML表示を実行した一番最後に折りたたみ用のJavaScriptを起動し、メニューの折りたたみ状態を追加しているためです。
これを解消するため、HTMLの最後にJavaScriptを実行するのではなく、HTMLの任意の位置で数回に分けてこのJavaScriptを実行するように変更しました。このサイトで更新ボタンをクリックして頂ければ実際の折りたたみ動作をご覧いただけます(メニューが全て閉じた状態であればさらに○)。

これはfacet-diversさんのサイドバー折り畳み2:動作遅延対策のアイデアを元に修正させて頂きました。個人的にはこの記事のおかげでサイドメニュー折りたたみがほぼ完成型になったと思っています。
この場をお借りして改めてお礼申し上げます。本当にありがとうございました。

以下、上記エントリーからの変更手順です。なお万が一に備えて以前の状態に戻せるようmenufolder.jsおよび各テンプレートのバックアップは保存してから作業を行われることをお勧めします。

1.menufolder.jsより下記の赤字部分(InitFlodNaviとその起動箇所)を削除

function InitFoldNavi() {
    FoldNavigation('newentry','off',true);    // 最新エントリー
    FoldNavigation('monthly','off',true);     // 月別アーカイブ
    FoldNavigation('category','on',true);     // カテゴリー別アーカイブ
    FoldNavigation('comment','on',true);      // 最新コメント
    FoldNavigation('trackback','on',true);    // 最新トラックバック
    FoldNavigation('link','on',true);         // リンク
}
function FoldNavigation(idName,initMode,viewNum) {
    var openMark = '[+]'; /* 閉じている場合に開くためのマーク */
    var closeMark = '[?]'; /* 開いている場合に閉じるためのマーク */
            :
          (省略)
            :
}
InitFoldNavi(); // ナビゲーションの折り畳み

削除部分のFoldNavigation…という行は後でそのまま使います。またファイルを保存する際には文字コードにお気をつけください。

2.各テンプレートの一番下に配置していた

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

を <head>~</head> の間に移動

3.各テンプレートの、折りたたみを指定している各メニューの下に下記のスクリプトを追加

<script type="text/javascript">
<!--
FoldNavigation('xxxxx','on',true);
//-->
</script>

真中の FoldNavogation? は1項で削除した行をそのまま使います。"xxxxx"の部分に直前のメニューに指定したid属性のものが割り当てられるようにします。例えば、カテゴリーリストメニュー用のid属性に"category"を指定している場合、カテゴリリストメニューの直下には、

<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>

を配置してください。
なお上記のスクリプトはメニュー対し1対1に細かく分割しなくても構いません。要するに遅延しないメニュー用と遅延するメニュー用のJavaScriptに分割できればよいので、例えばBlogPeople等のリンクリストの直前までの(遅延しない)メニュー分をまとめてリンクリスト(タイトル)の直前に、

<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
FoldNavigation('monthly','on',true);
FoldNavigation('newentry','off',true);
//-->
</script>

と記述して配置し、BlogPeopleやMyBlogList等のリンクリスト用のJavaScriptのみを

<script type="text/javascript">
<!--
FoldNavigation('link1','on',true);
//-->
</script>

と書いてリンクリストの直下にそれぞれ配置してもOKです。

この対処はメニューの途中に遅延するメニューが存在する場合はあまり効果的でありません(遅延するメニュー以降のメニューは遅延します)ので予めご了承ください。

Comments [15] | Trackbacks [5]
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