FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

アイコン付きツリー化リンクをグループで折りたたむ

以前に『アイコン付きツリー化リンク』を紹介しましたが、このアイコン付きツリー化リンクをグループで折りたたみ可能にする方法を紹介します。

プラグインHTMLを編集します。

<style type="text/css" media="all">
<!--
#ILI p {
margin: 4px 0 2px;
}
#ILI ul {
margin:2px 0 4px;
padding:0;
}
#ILI li {
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
margin:0;
padding:2px 0;
}
#ILI li.branch {
background-image: url(http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif); /*ツリー画像 */
padding-left:20px;
}
#ILI li.branch_end {
background-image: url(http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif); /*ツリー画像(最後尾) */
padding-left:20px;
}
//-->
</style>

<div class="tree" id="ILI">
<ul>
<!--link-->
<li &align><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
<li><a href="./?admin">管理者ページ</a></li>
</ul>
</div>

<script type="text/javascript"><!--
function ilw(num) {
if(document.getElementById) {
if (document.getElementById('ilu'+ num ).style.display=='block') {
document.getElementById('ilu'+ num ).style.display='none';} else {
document.getElementById('ilu'+ num ).style.display='block';}}}
--></script>


<script type="text/javascript"><!--
var A=document.getElementById('ILI').getElementsByTagName('A');
var C=new Array(); var icon=new Array(); var n=1; I="";

/* ■ツリー化設定 */
C[1]="グループA,1,2";
C[2]="グループB,3,4";

/* ■アイコン画像URL */
icon[1] = "http://blog44.fc2.com/image/e/180.gif";
icon[2] = "http://blog44.fc2.com/image/e/181.gif";
icon[3] = "http://blog44.fc2.com/image/e/182.gif";
icon[4] = "http://blog44.fc2.com/image/e/183.gif";
icon[5] = "http://blog44.fc2.com/image/e/184.gif";
icon[6] = "http://blog44.fc2.com/image/e/185.gif";
icon[7] = "http://blog44.fc2.com/image/e/186.gif";
icon[8] = "http://blog44.fc2.com/image/e/187.gif";
icon[9] = "http://blog44.fc2.com/image/e/188.gif";

for (i=1;i<C.length;i++){ p=C[i].split(','); l=p.length; if(l>1){
I=I+'<p><img src='+icon[n++]+' align="absmiddle" border="0"> <b><a href="javascript:onclick=ilw('+i+')">'+p[0]+'</a></b></p>';
I=I+'<ul id="ilu'+i+'" style="display:none">';
for (k=1;k<l;k++){ q=p[k]-1;
if(k==l-1) {I+='<li class="branch_end"><a href="'+A[q].href+'" title="'+A[q].innerHTML+'" target="_blank" >'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
else {I+='<li class="branch"><a href="'+A[q].href+'" title="'+A[q].innerHTML+'" target="_blank" >'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
} I+='</ul>';
} }
for (i=0;i<A.length;i++){if (A[i].title!="-") {
p= A[i].innerHTML.split('&nbsp;');
I+='<ul><li><img src='+icon[n++]+' align="absmiddle" border="0"> <a href="'+A[i].href+'" title="'+p[0]+'" target="_blank" >'+p[0]+'</a></li></ul>';
} }
document.getElementById('ILI').innerHTML=I;
--></script>


赤い記述がオリジナルから新たに加わった部分です。
初期状態で展開した状態にしておきたい場合は noneblock としてください。

【2009/08/23 追記】
全てを一度に開閉したい場合は、そのリンクを表示させたい箇所に以下を加えてください。

<script type="text/javascript"><!--
function ilwo(num) {
if(document.getElementById) {document.getElementById('ilu'+ num ).style.display='block';}}
function ilwc(num) {
if(document.getElementById) {document.getElementById('ilu'+ num ).style.display='none';}}
--></script>

<a href="javascript:onclick=ilwo('1'); ilwo('2'); ilwo('3'); ">全て開く</a>
<a href="javascript:onclick=ilwc('1'); ilwc('2'); ilwc('3'); ">全て閉じる</a>


グループの数だけ
ilwo('4'); ilwo('5'); ilwo('6'); ・・・
ilwc('4'); ilwc('5'); ilwc('6'); ・・・
と増やしてください。
関連記事
[ 2009/06/03 22:06 ] 共有プラグイン | TB(0) | CM(7)
[ 4580 ]
迅速な対応ありがとうございます。

実は上記の追加を行ってみたところ、リンクが崩れるのみで
折りたたむことができませんでした。

今までに行った記述の変更がおかしかったのかと思いまして、
改良前のstandardをDLし直して、上記の記述を試してみましたが
以前使用していたlightframe含め、双方ともでもダメなようでした。

再度自分の記述におかしな点がないか確認したいと思います。
お手数をお掛けして、申し訳ありませんでした。
[ 2009/06/04 02:30 ] [ 編集 ]
[ 4581 ]
申し訳ありません、上記の件解決致しました。

プラグインの場合はプレビューだと記述の変更が
反映されないと知らず、記述以前の問題でした。

双方のテンプレにてきちんと反映されました。
ありがたく使わせて頂きたいと思います。

ありがとうございました。
[ 2009/06/04 02:49 ] [ 編集 ]
[ 4588 ] > keroさん
解決して良かったです。
プレビューだと反映されないんですね。私も今知りました^^;
[ 2009/06/05 23:25 ] [ 編集 ]
[ 5594 ]
記事掲載ありがとうございました。
リンクが増えてきてたので、すっきりしました。
そこで、質問なのですが、たとえばデフォルトを全て閉じた状態にして「全て開く」とかの項目を作って、それを押すと全カテゴリーがオープンになる・・・とかできないですか?
ぶしつけな質問ですみません。
[ 2009/08/23 14:42 ] [ 編集 ]
[ 5597 ] > k2さん
記事に追記したのでこちらを参考にしてください。

アイコン付きツリー化リンクをグループで折りたたむ
【2009/08/23 追記】
http://10plate.blog44.fc2.com/blog-entry-219.html#a20080823
[ 2009/08/23 19:36 ] [ 編集 ]
[ 5600 ]
出来ました。
ありがとうございます。
[ 2009/08/23 21:14 ] [ 編集 ]
[ 5607 ] > k2さん
出来ましたか。良かったです^^
[ 2009/08/23 22:57 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。