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

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

仕様

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

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

使い方

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

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

view plainprint?

1. <style type="text/css"><!--  
2. .list-label-widget-content ul {  
3.  margin-bottom:0;  
4. }  
5. .list-label-widget-content ul li{  
6.  cursor:pointer;  
7. }  
8. --></style>  
9. <script type="text/javascript"><!--  
10.  jQuery.noConflict()(function($){  
11.   var classname = {};  
12.   var labelcount = 0;  
13.   $(".list-label-widget-content li").each(function(){  
14.    var labels = $(this).find(":first").text().split("|");  
15.    var parentul = $(".list-label-widget-content > ul");  
16.    for (var i = 0;i < labels.length;i++){  
17.     if (classname[labels[i]] == null){  
18.      classname[labels[i]] = "list_group_"+labelcount;  
19.      labelcount++;  
20.     }  
21.     if ( i < labels.length-1){  
22.      if ($("."+classname[labels[i]]).length == 0){  
23.       parentul.append("<li class='"+classname[labels[i]]+"'></li>")  
24.        .find("li:last")  
25.        .append("<a>"+labels[i]+"</a>")  
26.        .append('<ul></ul>');  
27.      }else if($("."+classname[labels[i]]+">ul").length == 0 ){  
28.       $("."+classname[labels[i]]).append('<ul></ul>');  
29.      }  
30.      parentul = $("."+classname[labels[i]]+" > ul");  
31.     }else{  
32.      if ($("."+classname[labels[i]]).length == 0){  
33.       parentul.append($(this).clone())  
34.        .find("li:last")  
35.        .addClass(classname[labels[i]])  
36.        .find(":contains("+labels[i]+")")  
37.        .text(labels[i]);  
38.      }else{  
39.       $("."+classname[labels[i]]+">a")  
40.        .text(labels[i])  
41.        .attr("href",$(this).find(">a").attr("href"))  
42.        .after($(this).find(">span").clone());  
43.      }  
44.      $(this).remove();  
45.     }  
46.    }  
47.   })  
48.   
49.   $(".list-label-widget-content li").click(function(){  
50.    $(this).children("ul").toggle();  
51.    return false;  
52.   });  
53.   $(".list-label-widget-content a").click(function(){  
54.    if ($(this).attr("href") != undefined) document.location = $(this).attr("href");  
55.   });  
56.  })  
57. --></script>  

<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追記
「|」だとフィードが取れないので「/」に変更。