FCafe  リストのツリー化

 はい、月頭にお報せした如く今月は「Tree化月間」です。 で、遅ればせの第一弾

 CSSが「装飾」的役割のみならず「表示制御」的機能をも果たし得ることは、当店のお客様に於かれては既に御存知の事項でありましょう。  従来スクリプトが担って来たような効果がCSSでも可能な事は当店でも幾つかの例を挙げさせて戴きました。
特にblogのようなCMSではその傾向が顕著であると言え、CSS機能の更なる高度化とブラウザ側でのサポートが期待される訳ですが、 逆の見方をすれば blogに於けるjavascriptはファンクショナルスタイルシート的な性質を帯びるとも解釈できるのではないか、などと思ったりもする今日この頃であります。

 勿論、「ツリー化」をCSSのみによって実現することも可能な訳ですが、設置の手間やサーバー負荷等の総合的バランス*を考えるとやはり「スクリプト」に行わせるのが適当な仕事であろうと思われます。
昨年書いた方法はナビリストの全要素を一度配列に取り込んでから再構築して書き出す、というものでした(「スタック&ビルド方式」と呼称)。 元リストの形態を定める必要が無い自由さがウリでしたが noscript タグを要する為にリスト内容が二回ロードされる、というのが気にならなくもありませんでした。
 今回新たに御紹介させて戴くのは 「後置型」のスクリプトです。
(例によって「元リスト」の構成はある程度自由に設定可能な仕様となっていますが)
では 最も簡素なものから。 (今回の「ツリー化」では複数のバージョンを御紹介します) 

SAMPLE


【 設置法 】  ツリー化するナビリストを以下のような構成にします

<div id="リストID">
 <ul><!--リスト始--><li>
  <a href="リンク先URL" title="GROUP名要素">各項目表示内容</a>
 </li><!--/リスト終--></ul>
</div>
 ID はリスト毎に異なる半角文字列としてください
 ( 以下↓は「最近のコメント」 の場合の一例です )
<div id="RC">
<ul><!--rcomment--><li>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_etitle>">
<%rcomment_month>/<%rcomment_day> <%rcomment_name>
</a>
</li><!--/rcomment--></ul>
</div>

以下のスクリプトを 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!=""){
  I+='<p><b>'+E+'</b><br />';
  for(j=i;j<L;j++){ if(A[j].title==E){ A[j].title="";
   I+='・<a href="'+A[j].href+'">'+A[j].innerHTML+'</a><br />';
  } } I+='</p>';
 } } document.getElementById(ID).innerHTML=I;
}
if (document.getElementById){Tree('ID名1');Tree('ID名2'); ・・・}
//--></script>
 

【 解 説 】   ツリー化の方法について少し詳しく説明させて戴きますと
スクリプトは引数で指定されたIDのリストから <a ~ /a> 部分を読込み、  title 要素(group名)でソートしツリーを形成します ( ul、li タグは必須ではありません=単なるリンクの羅列でもツリー化は行われます)。 スクリプトはリストの先頭からブランチ化されていない項目(リンク)を探し,見付けるとまずそのgroup名を太字で書き, 次いでその項目以下の同group名の項目内容(aタグに挟まれた部分)を順に枝に書き足して行きます。
   使われた項目は「印」を付けられ次のブランチ作成時は無視されます。  リスト末尾まで該当項目を探し終えると スクリプトはまた新しいgroup名の「枝」を作れるか探す、という仕組みです。
  お示しした例(コメントリスト)では「親記事のタイトル」で「枝」が作られますが、
「投稿者名」 や 「日付」でも ツリー化可能な訳です。
スクリプトoff時のリストにグループ名要素も表示したい場合は Aタグ外に書いて下さい

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/330-79004d11

Shown after Admisson
.

≫ リストのツリー化(2) カスタマイズCAMP ≪

2006 / 06 / 13  Tue
Navigation   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced