ラベルでサブカテゴリを使えるようにする

ブログって順繰りに見てく分にはいいんだけど、
どんなコンテンツがあるのかパット見わからないのが、
前々から気になってた。
ラベルとかタグとかはあるんだけど、カテゴリがでかすぎて探すのがだるい。
ということで、ラベルでサブカテゴリを使えるようにカスタマイズする。

仕様

1. ラベルを階層を「 | 」(半角|)の区切りで登録すると、階層化されて表示されるようにする。例）aaa|bbb|ccc
2. 階層で同じ名前は使わない。aaa,bbb|aaaみたいのはだめ。（表示がおかしくなる）

ま、実際にどう表示されるかは、右を見たほうが早いな。
下のラベルの欄を見るとわかるけど、サブカテゴリもラベルとして追加してる。
aaa,aaa|bbb,aaa|bbb|cccという感じ。

使い方

jQueryを使ってるので、bloggerでjQueryを使えるようにする
を参考に、インクルードしとく。
下のコードよりも先に読み込まれるように差し込むこと。

Bloggerのカスタマイズ→ガジェットの追加→HTML/Javascript
に↓のコードを貼り付ける。

<style type="text/css"><!--
.list-label-widget-content ul {
 margin-bottom:0;
}
.list-label-widget-content ul li{
 cursor:pointer;
}
--></style>
<script type="text/javascript"><!--
 jQuery.noConflict()(function($){
  var classname = {};
  var labelcount = 0;
  $(".list-label-widget-content li").each(function(){
   var labels = $(this).find(":first").text().split("|");
   var parentul = $(".list-label-widget-content > ul");
   for (var i = 0;i < labels.length;i++){
    if (classname[labels[i]] == null){
     classname[labels[i]] = "list_group_"+labelcount;
     labelcount++;
    }
    if ( i < labels.length-1){
     if ($("."+classname[labels[i]]).length == 0){
      parentul.append("<li class='"+classname[labels[i]]+"'></li>")
       .find("li:last")
       .append("<a>"+labels[i]+"</a>")
       .append('<ul></ul>');
     }else if($("."+classname[labels[i]]+">ul").length == 0 ){
      $("."+classname[labels[i]]).append('<ul></ul>');
     }
     parentul = $("."+classname[labels[i]]+" > ul");
    }else{
     if ($("."+classname[labels[i]]).length == 0){
      parentul.append($(this).clone())
       .find("li:last")
       .addClass(classname[labels[i]])
       .find(":contains("+labels[i]+")")
       .text(labels[i]);
     }else{
      $("."+classname[labels[i]]+">a")
       .text(labels[i])
       .attr("href",$(this).find(">a").attr("href"))
       .after($(this).find(">span").clone());
     }
     $(this).remove();
    }
   }
  })

  $(".list-label-widget-content li").click(function(){
   $(this).children("ul").toggle();
   return false;
  });
  $(".list-label-widget-content a").click(function(){
   if ($(this).attr("href") != undefined) document.location = $(this).attr("href");
  });
 })
--></script>

以上。

一応クリックイベントを仕込んで、開く閉じるもできるようにしてるけど、
開いてるとき、閉じてるときの押す場所のイメージの変更とかは、テンプレートにも絡んでくるんで、
手をつけなかった。
liにイベント仕込んでるのが我ながらアレだよなぁ…。
まあ、とりあえずはこんなもんか。

2010/06/06追記
「|」だとフィードが取れないので「/」に変更。