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

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

  なんだか「パイプの煙」みたくなって来ましたがまだ続きます。  私自身の現状レベル確認(或いは完熟訓練)という意味合い(一年前の「ツリー化」記事読むと結構感慨深いものがあるんですなこれが)も兼ねてますのですがどうぞ御容赦を。 (実は唯のソースフェチなのかも)

 グループ分け(ツリー化)のためのデータを「スクリプト側」に持たせる、という発想の例を前記事でお示ししましたが、カテゴリリストの場合などですと 未分類項目を「その他」グループに一括りにしてしまうのではなく、逆に指定グループに含まれる各項目を「サブカテゴリ」的に表示するのが適当である場合も有り得るのではないでしょうか。(長文)
  今回は 通常のカテゴリとグループ(ブランチ)が同格で、「細分化された項目」があるように見せるツリー化の方法を考えてみました。
また、折角の機会ですので、 「まず『グループ』をツリー化し、後から通常項目を並べる」 ものと、「元リスト順に項目を表示し、グループ化される項目の所で他メンバと併せツリーを形成する」 もの、という二通りのスクリプトを御用意してみました。
(プラグインに供出させていただいたものとは類似点もありますが別物です)

SAMPLE


【 設置法 】  対象となるナビリストの構造は前記事と同様です。
( リストをID付きのDIVタグで囲んでください )
リストより後、或いはソース末尾( </body> タグ手前 ) に以下のスクリプトを書きます

■TYPE 1
<script type="text/javascript"><!--
function sTree(ID) {
var A=document.getElementById('CA').getElementsByTagName('A');
var C=new Array(); I="";
/* - - - - - - - - - - - - - - - - - - - - - - - */
  C[1]="groupA,2,3,8";
  C[2]="groupB,5,6";
 
/* - - - - - - - - - - - - - - - - - - - - - - - */
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+'">'+A[q].innerHTML+'</a><br />';
  }  I+='</p>'
 }
}
for (i=0;i<A.length;i++){ if(A[i].title!="-"){
 I+='<p><b><a href="'+A[i].href+'">'+A[i].innerHTML+'</a></b></p>';
} }
document.getElementById('L2').innerHTML=I;
}
if ( document.getElementById ) {sTree("リストID")}
//--></script>
 
■TYPE 2

<script type="text/javascript"><!--
function sTree(ID) {
var A=document.getElementById('CA').getElementsByTagName('A');
var C=new Array(); I="";
/* - - - - - - - - - - - - - - - - - - - - - - - */
  C[1]="groupA,2,3,8";
  C[2]="groupB,5,6";
 
/* - - - - - - - - - - - - - - - - - - - - - - - */
for (i=0;i<A.length;i++){  if(A[i].title!="-"){  var m=0;
 for (j=1;j<C.length;j++){ 
  p=C[j].split(','); l=p.length;  if(l>1){
   for (k=1;k<l;k++){ if(p[k]==i+1){m=1;break} }
   if(m==1){  I+='<p><b>'+p[0]+'</b><br />';
    for (k=1;k<l;k++){  q=p[k]-1; if(A[q].title!="-"){
     I+='・<a href="'+A[q].href+'">'+A[q].innerHTML+'</a><br />'; 
     A[q].title="-";
    } } I+='</p>'; break;
 } } }
 if(m==0){   A[i].title="-";
  I+='<p><b><a href="'+A[i].href+'">'+A[i].innerHTML+'</a></b></p>';
} } } 
document.getElementById(ID).innerHTML=I;
}
if ( document.getElementById ) {sTree("リストID")}
//--></script>

 

【 解 説 】  使用法(項目のグループ設定等)は前記事とほぼ同じ要領です。
( 今回のスクリプトでは「未分類」グループ名は設定不要です )    どちらかのスクリプトを選択し、設定を調整する事で様々な順序でツリー化を行う事ができます。
 先に述べたように一連(今月)のツリー化スクリプトでは A タグの内容のみが用いられます。  リストのアレンジについては 元リスト(スクリプト無効環境)に要素を追加する場合は A タグの外に、ツリー化時の項目に要素を加える場合はスクリプト中のタグ合成部分に書いて下さい。
お示ししたソース(スクリプト)にはプラグイン版にあるマウスonでの説明表示機能等はありませんが、簡素なぶん判り易くなっているとも言えます。  殆どfor・if文と比較・代入式だけですのでプラグイン版等、他のスクリプトと比較して各所を改造するのも難しくないでしょう。
( 「 TYPE2 」 はもう少し簡潔に書けるかも・・・)

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/334-a61f4642

Shown after Admisson
.

≫ plugin Treeシリーズ 外部要素によるツリー化 ≪

2006 / 06 / 23  Fri
Navigation   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。