FCafe  リストのツリー化(2)

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

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

<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 タグで括られ、内容はインライン化されています
CSSで装飾される場合は リスト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名1');Tree('ID名2'); ・・・}
//--></script>
 
 

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

Comment

banri banri Edit
07/09 16:03

こんにちは。TreeシリーズのコメントとTB使わせていただきました。TBの方なのですが、当方Mac10.4+Safari2.0環境ですとTB元がundefinedとなってしまいました。WIN XP+IEだと何故かrtrackback_monthと_day部分が反映されず…。コメントのscriptをコピペしてIDを入れ替えればどちらでもきちんと表示されるようになったのでそのようにして使っております。不具合かもと思ったので一応ご報告しておきますね。

実はこちらが本題だったりするのですが、このシリーズでツリーの樹状マーク部分を任意の画像にすることは可能でしょうか?全く別scriptになるかなと思ったのですが、もしカスタマイズできそうならと思ってお聞きしてみます。

もうひとつ、<li>に設定したcssが効かないのです。サイドメニュー全体のcssが反映しなかったので.tree li とか#RT li などとしてみたのですがダメでした;
今はclass=treeに行間とpaddingだけ指定してますが、できればサイドメニューの他のリスト項目と同じ見栄えになればどんなテンプレートにも対応できていいなあと思いまして…何かやり方がありましたらアドバイスしていただけると嬉しいです。
長々と失礼しました。これだけでも十分便利ですので今後はこれをデフォルトにするつもりです^^
どうもありがとうございました。

daniel daniel Edit
07/10 03:03

benri さんこんばんは。 プラグイン御利用有難うございます。

>month/day の非表示について
blog名は(コメントに於けるHNに比べて)長い場合が多く、(私の感覚として)行折り返しになるとツリーが見苦しくなりますので、TBについては「月日」を切り落とし受信年月日を表すクラス名をtitle要素に転用しマウスオーバー表示するようにしてみたのですが、紛らわしかったでしょうか。


樹状マークの画像転用については 以下のようにされて下さい。
スクリプト冒頭部に
var mk='<img src="画像URL" border="0">';
などと追加し、
if (j<c) {I+=' ├'} else {I+=' └'}
とある行を
I+=mk;
と変更します。 前の件と併せるとソースは以下のようになります。
http://blog3.fc2.com/p/pcafe/file/tbtree2.txt

http://blog3.fc2.com/p/pcafe/file/ttbsmp.gif
( CSSで #RT p a { に余白と背景画像を指定する、という手もあります )

PS この記事にありますようにツリー化されたリストでは ul li タグは取り除かれ、 各枝毎に Pタグで括られています。
例えば分類タイトルを装飾する場合、 
#RT p b {~  または .tree p b {~ のように指定してみて下さい 

banri banri Edit
07/10 23:47

>month/day
なるほどそうでしたか~。Mac+FireFoxはちゃんとそのようになってました、すみません(^_^;

画像転用とcss指定の件もよく分かりました!
ようやく意味が分かりました…おかげでどのテンプレでも表示を揃えられそうで嬉しいです^^
画像もできたのですが調整が必要そうだったので時間のある時にゆっくりやってみるつもりです。
どうもありがとうございました~!


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/331-fc4a3555

Shown after Admisson
.

≫ 整列リストのツリー化 リストのツリー化 ≪

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