FCafe  外部要素によるツリー化

 ・・・ちょっと間が空きましたが、ツリー化についてもう少し。
前回まではリスト項目自体にグループ分け(ツリー化)の為の要素が含まれる場合について述べさせて戴きました。   しかし blogのナビリストにはそのような要素が含まれておらず、前述の方法ではツリー化が困難なものも存在します。
そう、「リンク」と「カテゴリ」のリストです。 どちらのリストも項目名しかありません。(カテゴリには「記事件数」もありますが、それでツリー化することに殆ど意味はないでしょう)
しかし、これら二つのリストをツリー化する方法が存在することも皆様既に御存知の事項であります。 (今更改めて触れるまでも無いかもしれませんが)本邦blog関連スクリプトのゴールデンスタンダードとも言える takkyun氏の方法は、『リスト項目にあらかじめ”分類”の為の要素を付加して登録しておく』 というものでした。
JUGEMのナビリストに源を発するそのスクリプトをFC2に転用する方法は各所で解説されており、実装済みのテンプレートも幾つか公開されている訳ですが、未だ適用に困難を感じていらっしゃる方々も少なくないように見受けられます。

「登録済みの項目に変更を加える事無く LINK や CATEGORY をツリー化したい」
昨年私自身が書いた方法は「グループ名」を外部要素化する、というものでしたがそれでも登録項目に半角数字で番号を振る必要がありました(スクリプトoff環境での見栄えは多少すっきりしましたが)。
以下に御紹介するのは各登録項目はそのままでツリー化を行う方法です。

SAMPLE


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

<div id="リストID">
<ul><!--リスト始--><li>
<a href="URL" title="マウスon表示要素">項目本体</a>
</li><!--/リスト終--></ul>
</div>
 
 ( 以下↓は リンクリスト の場合の一例です )
<div id="LK">
<ul><!--link--><li>
<a href="<%link_url>" title="<%link_url>"><%link_name></a>
</li><!--/link--></ul>
</div>

リストソース以降( 或いは </body> タグ手前 ) に以下のスクリプトを書きます

<script type="text/javascript"><!--
function gTree(ID){
 var C=new Array();  I="";
 /* - - - - - - - - - - - - - - - - - - - - - - - */
  C[1]="GROUP-A,2,3";
  C[2]="GROUP-B,5,6";

  var OTHER="others";        // 未分類グループ名
 /* - - - - - - - - - - - - - - - - - - - - - - - */
 var A=document.getElementById(ID).getElementsByTagName('A');
 var tg='" target="_blank">';
 for (i=1;i<C.length;i++){  p=C[i].split(','); l=p.length;
  if(l>1){  I=I+'<p><b>'+p[0]+'</b><br />';
   for (k=1;k<l;k++){ q=p[k]-1;  A[q].title="-";
    I+='・<a href="'+A[q].href+tg+A[q].innerHTML+'</a><br />';
   } I+='</p>';
  }
 }  l=-1; var C=new Array();
 for (i=0;i<A.length;i++){ if(A[i].title!="-"){l++; C[l]=i}}
 if(l>=0){ I+='<p><b>'+OTHER+'</b><br />';
  for (i=0;i<l;i++){  k=C[i]; 
   I+='・<a href="'+A[k].href+tg+A[k].innerHTML+'</a><br />';
  } I+='</p>'
 } document.getElementById(ID).innerHTML=I;
}
if ( document.getElementById ) {gTree("ID名")}
--></script>

 

【 使用法 】   ソース中の該当部分グループ名とそれに属す項目の番号を指定します。
(お示ししたリストでは 一番目のグループ名を "GROUP-A" 、として、2,3番目の項目を所属させ 二番目のグループ名を"GROUP-B" とし 5,6番目の項目を所属させています )
また(グループ化されない)未分類項目のグループ名を(必要なら)指定して下さい。
このスクリプト(の初期値)では others となっています 。

リスト項目のリンクを別窓で開かない場合は赤色部分を削除して下さい

   

【 解 説 】   リンクやカテゴリを登録する際に、「その項目が所属するグループ名」を項目名に付加しておけば、スクリプトはそれらを参照してリストをツリー化する事が可能となる訳ですが、それにはかなりの手間が掛かりますし、スクリプト無効環境や非搭載テンプレートではリストの外観がかなり異様なものとなってしまうという問題がありました。
 ツリー化スクリプト(関数)自体に 「分類するグループのデータ」を持たせれば この問題は回避できる上にデータのメンテナンス性やポータビリティもUPします(良いことずくめ)。  ・・・今や「プラグイン」という強力なスクリプト継承機能を備えるに至ったFC2blogに於いて、「グループデータ」を何処に置くかについては従来と異なる選択肢があって然るべきではないか、という私の考えは間違いでしょうか?(持って回った言い方)

 この記事のスクリプトは まず(項目の存在する)グループ毎にツリーを形成し、最後にグループ化されなかった項目を「未分類」というグループにツリー化するものです。  共有プラグインに供出させて頂いたリンクリストと近いものですが、 「樹状マーク」等一部機能を省略してある一方、プラグインにはないtarget指定機能が搭載されている等、異なるものです。 (機能は必要に応じ取捨選択されて下さい)

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/333-e56a504e

Shown after Admisson
.

≫ 外部要素によるツリー化 2 整列リストのツリー化 ≪

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