FCafe　 そして再統合へ

　　リリースしたプラグインや、書いて来た記事を振り返りますと、一口に「ツリー化」とは申しましても各ナビリスト毎に微妙に求められる性状は異なるものだな、と感じている管理人です。
そういう訳で個別に御利用頂けるプラグイン版にはそれぞれ、（現状の私に）可能な範囲で色々と機能を盛り込んでみたりした次第ですが　一方で、
「コレでイイのか？」
という考えも湧いて来たりしまして、去年の記事みて（ getItem ⇒ mkTree だけで全リストをツリー化してたんだよなあ）　・・・とか。　＾＾　 　 　ソース書き？には（レベルを問わず）規模や精緻さによる高（多）機能を目指す方向と、シンプルさや汎用性を目指す方向があると思うのですが、針が反対方向に触れて来たような。　
で、作ってみました。　６つのナビリスト全てを単独でツリー化できる関数を。

 

SAMPLE

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

<div class="jtree">
<ul><!--リスト始--><li>
*<a href="URL" title="マウスon表示">項目本体<!--分類要素--></a>*
</li><!--/リスト終--></ul>
</div>

　マウスオンで表示されるtitle要素はツリー化後も継承されます
　A タグの外に書かれた項目要素はツリー化時に切り捨てられます
 

以下はコメントリストの場合の（一）例です

<div class="jtree">
<ul><!--rcomment--><li>
<a
 href="<%rcomment_link>#comment<%rcomment_no>"
 title="<%rcomment_etitle>≪<%rcomment_title>">
<%rcomment_month>/<%rcomment_day> <%rcomment_name>
<!--<%rcomment_etitle>-->
</a>
</li><!--/rcomment--></ul>
</div>

全リストの後〜　</body> タグ手前　に以下のスクリプトを書きます

<script type="text/javascript"><!--
function Tree() {
var s="<!"+"--";var t="--"+">"; var G=new Array();
/* - - - - - - - - - - - - - - - - - - - - - - - */
    G[1]="その他$分類壱,1,2,3$分類弐,4,5";
    G[2]="others$groupA,1,2$groupB,3,6,7";
/* - - - - - - - - - - - - - - - - - - - - - - - */
var T=document.getElementsByTagName('DIV');
for (h=0;h<T.length;h++){  if(T[h].className=="jtree"){
 var A=T[h].getElementsByTagName('A'); 
 var B=new Array(); var C=new Array(); var I="";  var L=A.length; 
 for (i=0;i<L;i++){ 
  var p=A[i].innerHTML.split(s); B[i]=p[0]; C[i]=p[1].split(t)[0];
 }   q=C[0]; var tg='">';
 if (q==1 || q==2) {
    var K=G[q].split('$'); if (q==2){tg='" target="_blank">'}
    for (i=1;i<K.length;i++){ var p=K[i].split(',');
     for (j=1;j<p.length;j++){   C[p[j]-1]=p[0]; 
    } }
    for (i=0;i<L;i++){  if(C[i]==q){  C[i]=K[0] } }
 }
 for (i=0;i<L;i++){  if (C[i]!=""){
  var E=C[i];  var d=-1;  var D=new Array();
  I+='<p><b>'+E+'</b><br />';
  for(j=i;j<L;j++){ if(C[j]==E){d++; D[d]=j} }
  for(j=0;j<=d;j++){
   k=D[j]; C[k]=""; if(j<d){I+='&nbsp;├'} else {I+='&nbsp;└'}  
   I+='<a href="'+A[k].href+'" title="'+A[k].title+tg+B[k]+'</a><br />';
  } I+='</p>';
 } }  T[h].innerHTML=I;
} } }
if (document.getElementsByTagName) { Tree() }
//--></script>

色付きの部分は設定の一例です
 

【 使用法 】 　　リストを　jtree　とクラス指定されたDIVタグで囲います。（スクリプトはこのDIVタグ内の Ａタグとその内容のみを操作します。リストの構造は問いません ）
ツリー化の元となるグループ要素はＡタグ内にコメントとして埋め込みます。
カテゴリリストのコメント部は　<!--1-->　、 リンクリストの場合は　<!--2--> として下さい（重要）。
この色の部分でカテゴリとリンクのグループ情報を書きます。
（ カテゴリは　G[1] 、リンクは　G[2]　を設定　）
設定方法は　最初の項目を「未分類グループ」の名前とし,　　以後、
$分類名,項目番号,・・・項目番号 　　　が単位となるように続けます。
グループ間は $ で区切り、末尾に , や　$　が来ないよう注意して下さい
（　「項目番号」は管理画面上で当該項目が表示される行番であり　%cno ではありません　）
また、このスクリプトでは『未分類グループ』に含まれる項目が先頭にあると、最初に『未分類』ツリーが形成されます。　（グループを並べたい順番に一つずつだけでも項目を移動して下さい）

 

【 解 説 】 　　このスクリプトは ページ内に存在するDIV要素の内、class名が jtree であるものを探し、その中にあるリンク群をツリー化して行きます。（”tree”というクラス名はツリー化プラグインシリーズで使用済みなので^^）
コメントやＴＢ等、項目自体にツリー化の為のデータが含まれているリストではそれに基づいて、リンクやカテゴリなど項目に分類材料がないリストでは別途データを参照してツリー化を行います。
Recent や Archive のようなシリアルなリストもコメント・ＴＢのようなランダム性状のリストと同じエンジンでツリーを作成します（速度は殆ど変わりません）。　
先までの記事に掲載されたスクリプトやプラグインに供出されたものと当スクリプトには大きな相違点があり、 項目分類時に参照されるのは、Ａタグのタイトル要素ではなく　Ａタグ内のコメント要素となっています　　（タイトル要素のようにダイレクトに参照出来ませんが、専用ルーチンを設け全項目のグループデータをソート前に完成させる事により速度低下を可及的に押さえました）
更に この段階に於いてリンク・カテゴリの外部グループデータを織り込む事でこれらリストのツリー化もその他リストと同じエンジンで処理する事を可能としております。

　　各リストの性状毎にチューニングされたプラグイン版と比較しますと機能的にはシンプルで画一的となる傾向は否めませんが、　この「統合版」ツリー化スクリプトには　上記により全てのリストで title要素が継承可能であるというメリットも御座います。
（現在当社では　Treeシリーズ以外の既存プラグインの当スクリプト対応を検討中です）
なお、当スクリプトについてもフリーで御使用いただけることは云うまでもありません。

2006 / 06 / 25 　Sun
Navigation   
Comment 10 / TB 0 / Edit