2009年11月19日

リンク集のツリー化

やっとみなさんのリンクを追加し始めました。亀作業で申し訳ありません。

お気付きの方もおられると思いますが、リンクの表示、フツーではありません。

野球ツリー化してある
野球折り畳み機能付き
野球長いリンク文字列は省略されるようになっている
野球リンク上にマウスを持っていくと省略なしのリンク文字列がツールチップ表示する

という改造を加えてあります。


まず、設定のやり方です。

野球以下の5つの画像をダウンロードする。最初に透明な画像があります。


Trans.pngPlus.pngMinus.pngBar2.pngBar1.png


野球ダウンロードした画像をアップロードする
野球『デザイン』⇒『HTML』から『HTML編集』を行う
野球『</head>』の直前に以下を追加する


<script type="text/javascript">
<!--
String.prototype.getExtent = function(ruler) {
  var e = document.getElementById(ruler);;
  var c;
  while (c = e.lastChild) e.removeChild(c);
  var text = e.appendChild(document.createTextNode(this));
  var width = e.offsetWidth;
  e.removeChild(text);
  return width;
}

String.prototype.truncateTailInWidth = function(maxWidth, ruler) {
  if (this.length == 0) return '';
  if (this.getExtent(ruler) <= maxWidth) return this;
  for (var i=this.length-1; i>=1; --i) {
    var s = this.slice(0, i) + '...';
    if (s.getExtent(ruler) <= maxWidth) return s;
  }
  return '';
}
// -->
</script>


野球『<body>』の直後に以下を追加する。


<span id="ruler" class="side" style="visibility:hidden;position:absolute;">
</span>


野球『保存』する
野球『デザイン』⇒『コンテンツ』⇒『リンク集』⇒『コンテンツHTML編集』
野球以下に置きかえる


<div class="sidetitle"><% content.title %></div>
<% content.header -%>
<div id="linkcontents" class="side">
</div>
<script type="text/javascript" language="JavaScript"><!--
function LinkItem(title, href, level) {
this.title = title;
this.href = href;
this.level = level;
};

function MakeATagElementsForLinks(elements) {
var ans = new Array();
var level = 0;
for (var j = 0; j < elements.length; ++j) {
var element = elements[j];
element.level = level;
if ( '#S' == element.href ) {
element.href = null;
ans.push(element);
++level;
} else if ( '#E' == element.href ) {
--level;
} else {
ans.push(element);
}
}
return(ans);
}

function OpenLinkTree(levelIdx) {
document.getElementById('LinkLv' + levelIdx + 'C').style.display = 'none';
document.getElementById('LinkLv' + levelIdx + 'O').style.display = 'block';
}

function CloseLinkTree(levelIdx) {
document.getElementById('LinkLv' + levelIdx + 'C').style.display = 'block';
document.getElementById('LinkLv' + levelIdx + 'O').style.display = 'none';
}

function MakeForLinks(linkItems, iconSize, width, ruler) {
var text = '';
var levelIdx = 0;
for (var i = 0; i < linkItems.length; ++i) {
var targetItem = linkItems[i];
if ( null == targetItem.href ) {
{//閉じてる時
text += '<div id="LinkLv' + levelIdx + 'C">';
text += '<a style="text-decoration:none;" href="javascript:OpenLinkTree(' + levelIdx + ');"><img src="/image/Plus.png" border=0 height=' + iconSize + ' /></a>';
text += targetItem.title.truncateTailInWidth(width[targetItem.level], ruler);
//text += '<br/>';
text += '</div>';
}
{//開いている時
text += '<div id="LinkLv' + levelIdx + 'O" style="display:none">';
text += '<a style="text-decoration:none;" href="javascript:CloseLinkTree(' + levelIdx + ');"><img src="/image/Minus.png" border=0 height=' + iconSize + ' /></a>';
text += targetItem.title.truncateTailInWidth(width[targetItem.level], ruler);
text += '<br/>';
}
++levelIdx;
} else {
text += '<img src="/image/Trans.png" height=' + iconSize + ' />';
if ( 0 == targetItem.level ) {
text += '<a href="' + targetItem.href + '" title="' + targetItem.title + '">' + targetItem.title.truncateTailInWidth(width[targetItem.level], ruler) + '</a>';
text += '<br/>';
} else if ( (linkItems.length - 1) != i && linkItems[i + 1].level == targetItem.level ) {
text += '<img src="/image/Bar1.png" height=' + iconSize + ' />&nbsp;';
text += '<a href="' + targetItem.href + '" title="' + targetItem.title + '">' + targetItem.title.truncateTailInWidth(width[targetItem.level], ruler) + '</a>';
text += '<br/>';
} else {
text += '<img src="/image/Bar2.png" height=' + iconSize + ' />&nbsp;';
text += '<a href="' + targetItem.href + '" title="' + targetItem.title + '">' + targetItem.title.truncateTailInWidth(width[targetItem.level], ruler) + '</a>';
//text += '<br/>';
text += '</div>';
}
}
}
return(text);
}

function ExecTreeLinkView() {
var widthArray = new Array(180, 170);
var elements = new Array();
{
<% loop:list_link -%>
elements.push(new LinkItem('<% content_link.title %>', '<% content_link.url %>', 0));
<% /loop -%>
}
var linkItems = MakeATagElementsForLinks(elements);
var text = MakeForLinks(linkItems, 10, widthArray, 'ruler');
var contextElement = document.getElementById('linkcontents');
contextElement.innerHTML = text;
}

ExecTreeLinkView();

//--></script>


野球『保存』する


以上で設定はおしまいです。


実際に、ツリー化を実現するには、リンクを2つ追加します。
その際、『リンクタイトル』にカテゴリの名前(『親戚さん』等)を、『リンクURL』には『#S』(Start)と『#E』(End)を入力して下さい。『表示順』を編集して、カテゴリ内に入れたいリンクをStartとEndで囲って下さい。
posted by ヴィントパパ at 17:25 | Comment(2) | ブログカスタマイズ | edit
この記事へのコメント
リンクありがとうございます!
こちらからも繋がらせていただきますね〜
なんだか、いまさらな感じですが。。。(笑

これ、パパさんオリジナルですか???
すごいねぇ
大学のときにちょこぉっとC言語とかプログラミング系を学んでみたのが懐かしくなりました。

%>', '<% がすっぱい顔した日本神話の登場人物に見える。。。
Posted by MOZ MAMMA at 2009年11月20日 14:23
☆MOZ MAMMAさん☆

ありがとうございます。リンクよろしくです。

オリジナルですよ[Em140]文字列省略だけは、面倒だったのでどこぞから持って来ましたが(ブラウザ落ちてどこだったか分からなくなったけど)。他のブログにもほとんどそのまま適用できるはずです[Em146]
Seesaa以外で自分のブログにもって方がいれば、助力しますよ[Em87]必要な情報や労力は提供してもらわないとダメですが。

確かに[Em140]顔文字良く知らないですけど、そんなのありそうだし。
Posted by ヴィントパパ at 2009年11月20日 17:41
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

絵文字
認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。