目次の仕様を変更───必要に応じて簡単なマウス操作で見え隠しする

関連エントリイリスト in this Blog

• jQueryを使ってブログエントリイの目次を自動作成する。
• ブログ頁内ジャンプ移動に際して、ジャンプ先からジャンプ元に直ぐに戻れるようにする jQuery プラグイン

新しい目次作成＋頁内ジャンプ プラグインの設計

結論を言えば、上の関連エントリイリストに記した 2 つのプラグインの統合を行いました。

No.782 の目次自動作成プラグインは、ページトップの近くに、常時固定的に表示する目次を自動的に作成するものであり、No.793 は頁内移動を容易に行うためのものです。

これらを暫く使ってみた結果、統合して 1 つのプラグインにまとめた方が使い勝手がよいことに気づきました。

目次として自動登録するのは h4 タグです。そして、頁内ジャンプは主に目次項目を使用するものでした。つまり共通の対象を操作するわけです。ならば統一できるし、その方が効果的に使えると考えたのです。

また、頁内ジャンププラグインは敢えて animatedPopup プラグインを利用していますが、ここで目的とする機能は重いプラグインを使わなくても、もっと軽快に達成できるのではないか、否、達成すべきだとも考えました。

こうして 2 つのプラグインを統合した軽快な目次作成＋頁内ジャンププラグインを完成させました。

仕様

以下のように、必要に応じて目次を表示させ、また不必要になったら消えるようにしました。目次内の項目をクリックすると当該箇所にジャンプすることは言うまでもありません。

1. 目次は固定的には表示させず、必要に応じて表示/隠蔽するようにしました。
2. エントリイ頁が開かれた時には、画面上部の中央部分に目次が表示されます。その時目次を使いたくなければ、目次ボックスの文字以外の箇所をクリックするか、あるいは window をスクロールすれば目次を消すことが出来ます。
3. 一旦消えた目次を見たくなった場合には、マウスカーソルをその時々の window 左辺付近に近づけると、その時のマウスカーソルの位置に応じて、目次が右にスライドしながら表示されます。つまり、スクロールの有無や多寡に関わらず、時々の window 左辺にマウスカーソルを近づけると、window 左辺に接して目次を表示するようにしました。この「 浮動的に 」表示/隠蔽する目次がこのプラグインの最大の特徴です。
   なお、ジャンプしたくない場合には、既に触れたように一寸頁をスクロールさせれば目次を隠蔽出来ます。
4. 目次内の任意の文字列をクリックすると、当該箇所にジャンプします（スクロールします）。その際には、既述のように、LI タグに登録したイベントハンドラーによって目次は隠蔽されます。
5. このプラグインは起動元を特定する必要がありません。$() を起動元にしても起動できますし、起動元は何であっても構いません。なお、背景色を変えて起動したい場合には、$().makeTableContents("specified color") と指定すれば良いだけです。

▲ToTop

コード

■ slideSide

上下方向の slideToggle , slideUp , slideDown インスタンスメソッドに準じて、横方向のスライドメソッド slideSideToggle , slideSideOut , slideSideIn を以下のように作りました。duration、easing、complete callback 関数 の初期値も指定していますので、引数を指定せずに起動すれば、継続時間は slow を、easing 関数は swing を、アニメーション終了後に起動する関数は無指定を、それぞれ指定することになります。

この横方向スライドメソッドは、縦方向の Up/Down メソッドと共に、かなり使い回すことの出来る汎用的なものとなるでしょう。

$.fn.slideSideToggle = function(duration,easing,callback){
  this.animate({width:"toggle", marginLeft:"toggle", marginRight:"toggle",
    paddingLeft:"toggle", paddingRight:"toggle"},
    duration || "slow", easing || "swing", callback || function(){});
}
$.fn.slideSideOut = function(duration,easing,callback){
  this.animate({width:"hide", marginLeft:"hide", marginRight:"hide",
    paddingLeft:"hide", paddingRight:"hide"},
    duration || "slow",easing || "swing", callback || function(){});
};
$.fn.slideSideIn = function(duration,easing,callback){
  this.animate({width:"show", marginLeft:"show", marginRight:"show",
    paddingLeft:"show", paddingRight:"show"},
    duration || "slow",easing || "swing", callback || function(){});
};

■ makeTableContents

 1:$.fn.makeTableContents = function(color){
 2:/* $.fn.makeTableContents(color)メソッド
 3: * color：目次の背景色を指定すれば、default："navy"を変更可能
 4: * 起動方法：$().makeTableContents("specified color") or $().makeTableContents()
 5: * release：2010/12/4
 6: */
     // エントリイモードではない時には何もしない。
 7:  if (!/.+blog-entry.+html/.test(location.href)){
 8:    (function(){return false;})();
 9:  } else {
10:    $(function(){
         // entry_body に h4 タグがなければ何もしない。
11:      if (!$("h4","div.entry_body").length) {return (function(){return false;})();}
         // もし既に目次がある場合にはこれを削除する。
12:      if ($("#tablecontents").size()) {$("#tablecontents").remove()};
         // ローカル変数定義
13:      var $contents, bgColor = color && typeof color==="string" && color|| "navy",
14:          initScrollTop = $(window).scrollTop();
         // 目次タグ要素の作成
15:      $contents = $("<ol id='tablecontents' title='目次が消えた後でも、
           マウスカーソルを window 左辺に近づけると再度表示させることが出来ます。
           <br />また、window をスクロールすると目次を隠蔽することが出来ます。' />")
16:        .css($.extend({}, // 初期値(opts) と引数を統合
17:          $.fn.makeTableContents.opts, bgColor!==null ? {background:bgColor}:{})
18:        .prependTo($("body"));
         // entry_body 内の h4 毎に目次項目を作るイテレート処理を行う。
19:      $("h4","div.entry_body").each(function(i){
20:        $(this).wrapInner("<a id='tablecontents"+i +"'></a>");
21:        $contents.append("<li><a href='#tablecontents"+i+"'>"+$(this).text() +"</a></li>");
22:      });
23:      // 目次の幅は 400 px またはそれ以下とする。
24:      var cW = Math.min($contents.width(),400),
25:          cH = $contents.css({width:cW}).height(), // 目次の高さ
26:          oW = $contents.css({width:cW}).outerWidth(), // 目次の幅外寸
27:          direction = true; // direction : true -> up down, false -> side
         // 上下方向／横方向の方向別の 3 つの slide メソッドの選択指定
28:      var slideFuncToggle = function(){
29:        return direction ? this.slideToggle("slow") : this.slideSideToggle();
30:      };
31:      var slideFuncOut = function(){
32:       return direction ? this.slideUp("slow") : this.slideSideOut();
33:      };
         // このプラグインでは使用しないが、一応定義しておく
34:      var slideFuncIn = function(){
35:        return direction ? this.slideDown("slow") : this.slideSideIn();
36:      };
37:      // 目次（＝ジャンプリスト）表示関数
38:      var displayJumpList = function(top){
39:        cPopCSS = !top ? { // top 値がゼロの時
40:          top : $(window).scrollTop()+160,
41:          left : (($(window).width()-oW)/2),
42:          height : cH,
43:          overflow:"auto"
44:        } : { // top 値がゼロではない時
45:          top : top,
46:          left :$(window).scrollLeft(), // 画面左端に配置
47:          height : cH, // 高さを変化させないために
48:          overflow:"auto"
49:        };
           // css 値を設定してから slide メソッドを呼び出す。
           // 高さを指定して横方向アニメが起きた時に高さを変化させないようにする。
           
50:        slideFuncToggle.call($contents.css(cPopCSS));
51:      };
         // 目次各項目への click イベントハンドラーの登録
52:      $("li",$contents).each(function(){
53:        $(this).click(function(){
54:          slideFuncToggle.call($contents); // 目次を隠蔽する
55:        })
56:      });
57:      displayJumpList(); // 頁オープン時に目次を表示する
58:      $("body").mousemove(function(e){ // mouseが動いた時
           // マウスカーソル X 位置が window 左辺から 10px 以内にあって、
           // かつ 目次が表示されていなければ
59:        if (e.pageX-$(window).scrollLeft()<10 && $contents.is(":hidden"){
60:          direction = false; // 横方向を指定し
61:          displayJumpList(e.pageY); // 目次を top：マウスカーソル Y 座標に表示する
62:        }
         // window scroll イベントハンドラーの登録（目次の隠蔽）
63:      })
64:      $(window).scroll(function(){
           // 目次が表示されていて初期スクロール Top 値と
           // 今行ったスクロール後の Top 値が 20 px 以上差がある場合には
65:        if (Math.abs(initScrollTop-$(this).scrollTop())>20 && !$contents.is(":hidden")){
66:          slideFuncOut.call($contents); //目次を隠蔽する
67:          initScrollTop = $(this).scrollTop()// 現在値を初期値とする。
68:        }
69:      });
37     });
70:  return this;
71:  }
72:};
73:// 目次の CSS 初期値設定
74:$.fn.makeTableContents.opts = {
75:  position:"absolute",
76:  zIndex:"1010",margin:0,padding:"0.5em 0.5em 0.5em 2em",
77:  border:"2px ridge white",textAlign:"left",lineHeight:"1.1em",
78:  background:"navy",display:"none"
79:}