2004年9月13日

サイドメニュー折りたたみ状態保持スクリプト

September 13,2004 11:56 PM
Tag:[]
Permalink

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

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

を参照ください。


このblogではサイドバーメニューの折りたたみ機能を利用させて頂いてますが、折りたたみ状態を変更した後で他のページに移動して戻ってきたり、新たにブラウザを起動するとblog管理者(つまり私)が予め設定しているデフォルトの折りたたみ状態に戻ってしまいます。このようにせっかくカスタマイズした折りたたみ状態が一瞬にして水の泡となってしまうのは何となく不便に感じていました。

そういう訳で折りたたみ状態を保持できるようにスクリプトを改造してみました。これにより折りたたみ状態をカスタマイズした訪問者はページを移動しても、別の日にブラウザを起動した時でも、常に直前に行った折りたたみ状態でblogを閲覧することができます。つまりblog管理者が設定したデフォルトの折りたたみ状態に縛られる必要がなくなる訳です。
具体的にどのような動作になるかは、このサイトでメニューの折りたたみ状態を変更して更新ボタンをクリックするか、他のページへ移動して戻ってきてみられるとお分かり頂けると思います(動作の都合上一瞬デフォルト状態になります)。

この機能を有効にするためにはブラウザのcookieが有効になっていること、折りたたみスクリプトは当方が利用させて頂いているJUGEMカスタマイズ講座ナビゲーションの折り畳みを使われていることが前提です。

2004.09.20追記
この機能はcookieを利用しています。id属性名("?name"や"?list"を除いた文字列)がそのままcookie名となりますので他のcookie名と重複しないようなユニークな名称を使用してください。重複している場合、cookieを用いたスクリプトの動作に不具合が生じる場合があります。
またプレビュー画面では正常に動作していません(原因未確認です)。
動作確認済ブラウザはIE6.0およびNC7.1です。

2004.09.24追記
下記のサイトで公開中の折りたたみ用スクリプトに状態保持機能を採用くださいました。ありがとうございます。

以下、スクリプトの修正方法です。

1.cookie取得・設定用スクリプトの追加
メニュー毎の折りたたみ状態をcookieに保持およびcookieから読み出すスクリプトを<head>~</head>の間に追加します。ちなみにこのスクリプトはスタイルシート切り替えのstyleswitcher.jsのcookie用関数の一部を流用しておりますので、そちらを既に使われている方はこの項目をスキップしてください。
注:styleswitcher.jsを利用する場合、状態を保持したいテンプレートに全て指定されている必要があります。

<script type="text/javascript">
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
</script>

2.折りたたみ用スクリプトにcookie保持・読み出しスクリプト追加
折りたたみ用スクリプトを設定している各テンプレート(注:サイドバーメニューの折りたたみからの修正であればmenufolder.js)に下記の青色部分を追加します。

function FoldNavigation(idName,initMode,viewNum) {
    :
  if (!dispMode) {
    var cookie_initMode = readCookie(idName);
    if(cookie_initMode){
      initMode = cookie_initMode;
    }
    createCookie(idName, initMode, 365);
  var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
    :
  } else if (initMode == 'chng') {
    :
    objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
    if (dispMode == 'none') {
      createCookie(idName, 'on', 365);
    } else {
      createCookie(idName, 'off', 365);
    }
  }
}
InitFoldNavi();

以上です。

メニューの折りたたみ状態をページ毎に制御したい場合(例えばメインページでたたんでいる「月別アーカイブ一覧」を月別アーカイブのページでは開いた状態にしたい等)は、id属性の名称をそれぞれ異なる名称で設定すればOKです。同じid属性名にしておけばページが変わっても同じ折りたたみ状態が引き継がれます。

2006.04.04 追記
リストから language 属性を削除しました(HTML4.01/XHTMLで非推奨あるいは廃止されているため)。

Comments [30] | Trackbacks [4]
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