anything from here 20051112

▼ Browsing MENU
||
ホーム
＞
2005年11月のエントリイ

Memo：拡張パン屑リスト(3)──Javascript編── 2005/11/12(Javascript)
パン屑リスト関連エントリイ一覧 in this Blog パンくずリストとは【topic path】 - 意味・解説： IT用語辞典次はJavascriptである。こちらは記すべき事が沢山ある。パン屑リストではスクリプトを２箇所で使っている。1つはパン屑リストの最左部に配置したブラウジングメニューにおいて、もう1つはパン屑リストそのものではないが、「http://username.blogx.fc2.com/blog-date-yyyymmdd.html」形式で表示する際のナビ...

Memo：拡張パン屑リスト(3)──Javascript編──

次はJavascriptである。こちらは記すべき事が沢山ある。

パン屑リストではスクリプトを２箇所で使っている。1つはパン屑リストの最左部に配置したブラウジングメニューにおいて、もう1つはパン屑リストそのものではないが、「http://username.blogx.fc2.com/blog-date-yyyymmdd.html」形式で表示する際のナビゲーションバーにおいて、である。

これらのスクリプトに関しては関数起動用以外にはHTML文はない（厳密に言えば、スクリプトからHTML要素を操作するために、HTML文内にid名称を付けたから関数起動用以外にも若干のHTML文の追記が生じた）。全てスクリプト内で処理し、例えばclone階層メニューをHTML文に貼り付けるのも、DOMのappendChildメソッドを利用した。

1 ブラウジングメニューについて

既述の通り、この階層メニューはここで初めて作成し登場したものではない。既に存在している階層メニューのクローンである。実は今回初めて cloneNode メソッドに挑戦したのだが、そのままでは重複してしまうid名の変更策に手こずったものの、その便利さに改めて驚嘆した。

以下にブラウジングメニューの要点だけを抽出して記しておく。

1　HTML文

(1) 階層メニューのclone作成

ブラウザによるHTML文読み込み完了時点で（loadイベント発生時）、clone作成関数を起動してcloneを作成するようにした。併せて日付指定時における頁ナビ表示を変更する関数（dayModeCheck）も load イベントとして組み込んだ。なおこれらの関数は、共にindex エリアでは不要なので not_index エリアにおいてのみ起動するように制限した。

<body onload="makeGmenuClone();
dayModeCheck()">

(2) 作成されたclone階層メニューの表示と隠蔽

次にcloneの階層メニューを表示・隠蔽する基点として、パン屑リスト記述部の冒頭に次のHTML文を置いた。

<div id="breadCrumbsList"><span onmouseover="balloonPopup(this,'ここをクリックすると各種閲覧メニューを表示又は隠蔽します。')" onclick="gmenucloneOnOff(this);">▼ Browsing MENU</span> | <a href="<%url>">ホーム</a> ＞・・・

mouseover イベントで操作説明の吹き出しを表示させ、同時に引数this（子ノードに「▼Browsing MENU」というテキストノードを有するSPAN要素）のメソッドとして、mouseoutイベントを設定し、thisからマウスが離れたら吹き出しを消去するようにした。
click イベントで gmenucloneOnOff 関数を起動し、階層メニューの第一階層を表示／隠蔽させると共に、起点となったテキストノードも微妙にトグル変化させるようにした。

2　Javascript文

ブラウジングメニューに関するスクリプトは膨大にあるので、その全てについてここで触れることは適当ではない。要点のみを記す。

function makeGmenuClone() {
  // id=gmenu の cloneNode を作成する
    var clone = document.getElementById("gmenu").cloneNode(true);

  // 早速、作成したcloneNodeのidを変更する。
    clone.id ="gmenu_clone";

  // 変数宣言
    var i,j,k, elem;

  // 階層メニュー表示の基点となるNodeを取得する
    var orgElem = document.getElementById("breadCrumbsList");

  // 階層メニュー内の不要なエレメント「toTop」を削除する
     var toTopElem = clone.lastChild;  //最後の子ノードを取得
     
  // 最後の子ノードがテキストである限り、その直前にある
  // 兄姉ノードを取得し直す。（改行をNodeとして認識しないIEと異なり、
  // 正しくDOMを実装しているMozilla系ブラウザの場合には、改行もNode
  // となる。このDOM実装の差異を解消するためのクロスブラウザ対策）
     while (toTopElem.nodeType == 3) {
	    toTopElem = toTopElem.previousSibling;
	 }

  // テキストノードではない toTopElem、つまりtoTopエレメントを
  // cloneオブジェクトから削除する。
     clone.removeChild(toTopElem);

  /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  以下は作成したcloneにおいてid名称を付け替える一連のスクリプト.
  階層メニューの各階層に応じて id が振られている為、各階層を的確に抽出
  することにかなり苦労した。
  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

  // gmenuclone の childNodes から<li>タグだけを抽出し、idをふり直す。
    var clChd = clone.childNodes;
    var lastLiChd;
    i = 0;
    for (j=0; j < clChd.length; j++){
        if (clChd[j].tagName == "LI") {
            i++;
            clChd[j].id = "gmenuclonelist" + i;
            clChd[j].childNodes[1].id = "gmenuclone" + i;
            k = j;
        }
    }
    
  // 最後の子ノードのid番号を記憶
    var cloneLiChildNum = i;

  // gmenuclone の第三階層の子ノード（ Link集）から、
  // <li>タグだけを抽出し、idをふり直す。
    i = 0;
    var LinkChd = clone.childNodes[k].childNodes;
    for (j = 0; j < LinkChd.length; j++ ) {
        if (LinkChd[j].tagName == "LI") {
            i++;
            LinkChd[j].id = "gmenuclonelist"
             + cloneLiChildNum + "-" + i;
            LinkChd[j].childNodes[1].id = "gmenuclone"
             + cloneLiChildNum + "-" + i;
        }
    }

  // 以上で編集した clone 階層メニューをHTML文内に挿入
	document.body.appendChild(clone);

  /* ------------------------------------------------------------
      作成した階層メニューcloneの配置位置に関わるスクリプト
  ------------------------------------------------------------ */

  // 階層メニューの基点エレメントである breadCrumbs 行の画面上の位置取得
  var pos = getPos(orgElem);
     // getPosは要素のleft、top座標を取得する独自作成関数

  // 階層メニューの基点エレメントである breadCrumbs 行の外枠高さを取得
  var outerHeight = orgElem.offsetHeight  //内枠高さ

  // IE以外の場合
  if (!document.all) {    // IE以外の場合
      outerHeight += getSize(orgElem,"padding-bottom")
      + getSize(orgElem,"border-bottom-width");
  } else {                // IEの場合
       //DOCTYPE宣言が標準モードの場合
    if (document.compatMode && document.compatMode.indexOf("CSS1") >=0 ) {
       outerHeight += parseInt(orgElem.currentStyle.paddingBottom);
    }
    outerHeight += parseInt(orgElem.currentStyle.borderBottomWidth);
  }

  var getClone = document.getElementById("gmenu_clone");
  with (getClone.style) {
    left = pos.x +"px";   //基点エレメントの左側に揃え、
    top = pos.y + outerHeight +"px";  //基点Elementの外枠高さだけ下に配置
  }
}

/*+++++++++汎用独自作成関数++++++++++*/
  //that要素の座標取得（left値、top値）
function getPos(that) {
  var targetEle = that;
  var pos = new function(){ this.x = 0; this.y = 0; }
  while( targetEle ){ 
      pos.x += targetEle.offsetLeft; 
      pos.y += targetEle.offsetTop; 
      targetEle = targetEle.offsetParent;
  }
  return pos;
}

  //位置指定されていない通常要素の各種サイズ取得（Mozilla系）
function getSize(targetElem,part){
  var val = 0;
  if (document.defaultView) {
    var cssDec = document.defaultView.getComputedStyle(targetElem, '');
    val = cssDec.getPropertyValue(part);
  }
  return parseInt(val);
}

以前の月へ(1)

ホーム(2)

以後の月へ(3)

anything from here

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載！

Memo：拡張パン屑リスト(3)──Javascript編──

1 ブラウジングメニューについて

1　HTML文

(1) 階層メニューのclone作成

(2) 作成されたclone階層メニューの表示と隠蔽

2　Javascript文

▲ Browsing MENU

■ SEARCH

■ Profile,etc.

■ 足跡板

■ とらばyou

■ 創作四字熟語

anything from here

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。2005年12月から社会問題も掲載！

Memo：拡張パン屑リスト(3)──Javascript編──

1 ブラウジングメニューについて

1 HTML文

(1) 階層メニューのclone作成

(2) 作成されたclone階層メニューの表示と隠蔽

2 Javascript文

▲ Browsing MENU

■ SEARCH

■ Profile,etc.

■ 足跡板

■ とらばyou

■ 創作四字熟語

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載！

1　HTML文

2　Javascript文