FCafe　 リストのツリー化（２）

・・（前記事から続く）　ここでツリー化されたリストの装飾法などについて少し。

先の記事を含め、当店のスクリプトによって『ツリー化』された後のナビリストは概ね以下のような構造となります　(例)

<div id="リストID">
<p><b>GROUP名1</b><br />
♦<a href="URL">リスト項目1</a><br />
♦<a href="URL">リスト項目2</a><br />
</p>
<p><b>GROUP名2</b><br />
♦<a href="URL">リスト項目3</a><br />
♦<a href="URL">リスト項目4</a><br />
♦<a href="URL">リスト項目5</a><br />
</p>
</div>

各「枝」は P タグで括られ、内容はインライン化されています
ＣＳＳで装飾される場合は　リストID （複数リストをツリー化する場合はDIVタグに "tree" 等の共通クラスを付与*するのも良いでしょう）との包含関係に依って下さい。　以上御参考まで
当店提供の「プラグイン版」では追加済みです

　さて、前記事を「BASIC版」 と銘打ったからには当然「上位版」も存在します。
（　「水増し」ぽい感じも無きにしも非ずですが　）
今回は前記事のスクリプトに「ツリーのシンボル」とも言える　"枝マーク"　を追加してみます。

SAMPLE

【 設置法 】 　元になるナビリストの構成は前記事と同じ要領です。
以下のスクリプトをリスト本体以後〜 HTMLソース末尾　（ </body> タグ手前）に貼ります

<script type="text/javascript"><!--
function Tree(ID) {
 var A=document.getElementById(ID).getElementsByTagName('A');
 var I="";  var L=A.length;
 for (i=0;i<L;i++){ E=A[i].title; if (E!="") {
  var C=new Array(); var c=-1; I+='<p><b>'+E+'</b><br />';
  for(j=i;j<L;j++){ if(A[j].title==E){c++; C[c]=j} }
  for(j=0;j<=c;j++){
   k=C[j]; A[k].title=""; if(j<c){I+='&nbsp;├'} else {I+='&nbsp;└'}  
   I+='<a href="'+A[k].href+'">'+A[k].innerHTML+'</a><br />';
  } I+='</p>';
 } } document.getElementById(ID).innerHTML=I;
}
if (document.getElementById){Tree('ID名１');Tree('ID名２'); ・・・}
//--></script>

【 解 説 】 「樹状マーク」を付けるとスクリプトは少し長く（複雑に）なってしまいます。
ブランチ最後の項目のみ " ├" ではなく " └" にしなければならないからです。
前記事のスクリプトではどの項目にも同じ代用リストマークが用いられる為、　「枝」に項目を付け足す時 「最後の項目か」否かは (必要ないので) 調べていませんでした。
「樹状マーク」を使うには「その枝に項目は幾つあるのか」を予め調べておいて、付け足す項目が末尾か否かを判別しなければならないのですが、　その為にソース（処理）が長く（重く）なるのを可とするか不可とするかは人により意見が分かれる所かもしれません。
（ 二通りのソースを書いたのは「水増し」の為ばかりではないのです ）