Teach - Label by tree view

When many articles post, simple label is not enough to satisfy our demand.  More complex.
How about tree view.

To replace left code to right code.

For copy use:

 <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div id='treeLabel_main' style='font-family: Arial;'><span class='item-control blog-admin' id='treeLabel_host'/></div>
 
<style>
#treeLabel_toggle {
  float: right;
  font-family: Arial;
}
#treeLabel_toggle a, #treeLabel_main a {
  font-size: 10pt;
  text-decoration: none;
}
 
.treeLabel_catText a:link {
  color: #0b5394; /* 請填入大分類的顏色, 如果要使用系統預設的超連結顏色, 可刪除此行 */
  font-weight: bold;
}
.treeLabel_catText a:hover {
  color: #b8b832;  /* 請填入滑鼠移過大分類要顯示的顏色, 如果要使用系統預設的超連結顏色, a:link 與 a:hover 的顏色都不要設定 */
}
 
.treeLabel_category {  /* 這裡可設定大分類名稱區塊的 CSS */
  font-size: 10pt;
  margin-top: 4px;
}
.treeLabel_label {  /* 這裡可設定標籤名稱區塊的 CSS */
  font-size: 10pt;
  margin-top: 2px;  
}
</style>
 
<script>
//<![CDATA[
var treeLabel = {
  category: ["Computer Tricks", "Life", "Entertainment"], // 雙引號內填入大分類名稱, 每個大分類用小寫逗號隔開, 最後一個大分類之後不可有逗號; 填入順序就是顯示的順序
  showLevel: 1,  // 預設打開的標籤層數, 填入 1 為全部收起的狀態
  showCategoryCount: "Y",  // 大分類若不顯示文章數, 請填入 "N"
  openLogo: "▼",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
  closeLogo: "►",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
  listLogo: "⇢",  // 如使用圖檔,雙引號內請填入 http 開頭的網址
  margin: 10,  // 縮排的像素值
  openText: "全展開",  // 可改為自訂文字, 不顯示文字請改為 ""
  closeText: "全收合",  // 可改為自訂文字, 不顯示文字請改為 "&nbsp;"
  interval: "Y"  // 預設每個大分類之間空一行, 如不要空行請填 "N"
};
//]]>
 
treeLabel.data = [];
treeLabel.labelName = [];
 
<b:loop values='data:labels' var='label'>
 
(function ()  {
  var a = &quot;<data:label.name/>&quot;,
      b = a.split(&quot;-&quot;),
      l = b.length,
      data = [],
      i;
//<![CDATA[
for(i=0;i<l;i++){if(i!=0&&i!=l-1&&b[i].search(" ")!=0){b[i]=" "+b[i]}data[i]=b[i]};
//]]>
  treeLabel.data.push([data, &quot;<data:blog.languageDirection/>&quot;, &quot;<data:label.url/>&quot;, &quot;<data:label.count/>&quot;]);
} )();
 
</b:loop>
 
//<![CDATA[
treeLabel.dg=function(a){return document.getElementById(a)};treeLabel.toggle=function(n){var k=treeLabel.dg,o=treeLabel.labelName,b=o.length,p=treeLabel.openLogo,h=treeLabel.closeLogo,m,q,d,g,a,e,c,f;for(e=0;e<b;e++){m=o[e];f=m.length;for(c=0;c<f;c++){q=m.join("")+c;d="logo"+q;g=k(q);a=k(d);if(m[1]&&n==1){if(a&&!a.firstChild.src){a.innerHTML=p}if(a&&a.firstChild.src){a.firstChild.src=p}if(g){g.style.display="block"}}if(m[1]&&n==0){if(a&&!a.firstChild.src){a.innerHTML=h}if(a&&a.firstChild.src){a.firstChild.src=h}if(g){g.style.display="none"}}}}};treeLabel.swap=function(c,d){var f=treeLabel.dg,a=f(d),e=f(c),b=treeLabel.openLogo,g=treeLabel.closeLogo;if(!e.firstChild.src){e.innerHTML=(e.innerHTML==b)?g:b}else{e.firstChild.src=(e.firstChild.src==b)?g:b}a.style.display=(a.style.display=="block")?"none":"block"};(function(){var l=treeLabel.dg,S=treeLabel.data,F=treeLabel.category,R=[],D=[],u=[],f=[],z=F.length,g=S.length,E=treeLabel.showLevel,v=treeLabel.openLogo,e=treeLabel.closeLogo,N=treeLabel.listLogo,d=treeLabel.margin,I=(treeLabel.interval=="Y")?"<p/>":"",w="",t="",m="",a=0,J,A,o,c=l("treeLabel_host"),Q=(window.getComputedStyle)?(window.getComputedStyle(c).display=="none")?"<a href='http://wayne-fu.blogspot.com/2013/01/multi-tree-label-update.html' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9DrpmPojOzb4n08pjLvpV5lAszsR5NrvvgQ4QdXY7MXcTC5Vz_Kk4cgvlS_mOnHNrfwgLMojR4zIzJJ_FI4nhxiNZydPTLvQN9iBN5d8r1yTN3cJo9LRPjNl6M3rDctqgoDNuZ4CJ3pf/s1600/info.png' title='Blogger 多層樹狀標籤\n程式設計：WFU BLOG' style='width: 20px; vertical-align: middle;'/></a>":"":"",P,O,M,C,B,K,L,s,H,q,G,h,b,r;v=(v.search("http")<0)?v:"<img src='"+v+"' style='vertical-align: middle;'/>";e=(e.search("http")<0)?e:"<img src='"+e+"' style='vertical-align: middle;'/>";N=(N.search("http")<0)?N:"<img src='"+N+"' style='vertical-align: middle;'/>";S.sort();for(P=0;P<g;P++){treeLabel.labelName[P]=S[P][0];D[P]=S[P][1];u[P]=S[P][2];f[P]=S[P][3]}R=treeLabel.labelName;for(P=0;P<z;P++){for(O=0;O<g;O++){J=R[O];if(J[1]&&J[0]==F[P]){a++;if(a!=0){a=1}L=function(){if(O-1<0){return 0}K=0,A=R[O-1];function i(){if(J[K]==A[K]){K++;i()}}i();return K};M=L();o=function(){if(J[M+1]){H=0;q="";G=J.join("")+M;h="logo"+G;b=(M<E-1)?v:e;r=(M<E-1)?"block":"none";if(treeLabel.showCategoryCount=="Y"){for(C=0;C<g;C++){A=R[C];for(B=M;B>=0;B--){if(J[B]!=A[B]){break}if(J[B]==A[B]&&B==0){H+=parseInt(f[C]);q="("+H+")"}}}}w+="<div class='treeLabel_category'><span onclick='treeLabel.swap(\""+h+'","'+G+"\");'><a id='"+h+"' href='javascript:' style='margin-left:"+M*d+"px;'>"+b+"</a>";w+="<span class='treeLabel_catText'><a href='javascript:'> "+J[M]+" </a></span></span><span>"+q+"</span></div><div id='"+G+"' style='display:"+r+"'>";M++;o()}else{w+="<div class='treeLabel_label' style='margin-left:"+M*d+"px;'>"+N+" <a dir='"+D[O]+"' href='"+u[O]+"'><span dir='ltr'>"+J[M]+"</span></a> ("+f[O]+")</div>";A=R[O+1]||"";m="";s=function(){if(M-1>0){m+="</div>";if(!A){M--;s()}else{for(K=M;K>=1;K--){if(J[K-1]!=A[K-1]){K=2;break}if(J[K-1]==A[K-1]&&K==1){break}}if(K==1){m=m.replace("</div>","")}else{M--;s()}}}};s();w+=m}};o()}}if(a==1){w+=I+"</div>";a=0}}l("treeLabel_main").innerHTML=w;t="<a href='javascript:treeLabel.toggle(1);'>"+v+"</a><span class='treeLabel_catText'><a href='javascript:treeLabel.toggle(1);'>"+treeLabel.openText+"</a></span>　";t+="<a href='javascript:treeLabel.toggle(0);'>"+e+"</a><span class='treeLabel_catText'><a href='javascript:treeLabel.toggle(0);'>"+treeLabel.closeText+"</a></span> ";if(navigator.userAgent.indexOf("MSIE")<0){t+=Q}l("treeLabel_toggle").innerHTML=t})();
//]]>
</script>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Source from: wfublog