blogger 3.0:超酷的ajax标签显示(已修正在IE下支持中文标签名）

已经修正在IE下支持中文，感谢中国平江非官方门户站点的作者进行的修正。如果你非常喜欢这种形式的标签，现在终于可以正式使用了。

上次跟原作者Deepak讨论，目前Deepak正在做更好的ajax标签功能，估计还要一个星期。
这个标签的脚本太大有50K，个人不推荐。目前还有同样位印度人的Aditya制作的无需prototype.js脚本的ajax标签，速度更快，没有bug，欢迎使用。

首先感谢作者Deepak。
这个hack /扩展 的作用就是当你点击一个标签，就会显示这个标签下的你自己设定文章数的标题和摘要。
原理就是你点击标签以后，通过js脚本读取了你的标签rss摘要，然后显示在你的博客上。
要看例子请看我的测试博客，点击这里。

安装方法：

1。在你的xml模板里的</head>上方，]]<>/b:skin>下边，放上以下脚本程序：

<script src='http://www.sxuzone.com/gg/prototype.js' type='text/javascript'/>

2。紧接着刚才的脚本程序，放上以下代码：

<!-- Begin AJAX Categories -->
<style type='text/css'>
/* SEARCH/CATEGORY STYLES
----------------------------------------------- */
#indicator {
position: absolute;
z-index: 10000;
padding: 15px 0;
top: 22em;
background-color: #FFFFFF;
border: 1px solid #AAAAAA;
width: 176px;
left: 50%;
margin-left: -88px;
text-align: center;
}

#search-result {
  border: 1px solid #AAAAAA;
  padding: 10px;
  padding-bottom:30px;
  font-size:85%;
}
.search-result-meta {
  background: #EFEFEF;
  padding: 2px;
}
.search-result-meta img {
  border-width:0;
  vertical-align:text-bottom;
}
.search-title {
  font-size:1em;
  padding-bottom:3px;
  font-weight:bold;
  text-align:left;
  text-decoration:underline;
}
.search-cat {
  display:block;
  padding:3px;
  font-size:1em;
  margin-top:5px;
  margin-bottom:5px;
  border-bottom:1px solid #C0C0C0;
  font-weight:bold;
}
.search-close {
  color:silver;
  float:right;
  border:1px solid #F5F5F5;
  margin-top:10px;
  cursor:pointer;
} 
</style>
<script type='text/javascript'>
//<![CDATA[
var gCat;
function getCat(cat) {
   var url= '/feeds/posts/summary/-/' + cat + '?max-results=10&alt=json';
   var pars = '';
   gCat = cat;
   
   new Ajax.Request(
       url,
       {
          method: 'get',
          parameters: pars,
          onLoading: function(){Element.show('indicator')},
          onSuccess: showCat,
          onFailure: showFail
       });
}

function showCat(output){
   Element.hide('indicator');
   Element.show('search-result');
   $('search-result').innerHTML="";
   var main = string2JSON(output.responseText);
   var xtitle, xcat, xcontent;
   
   var meta = document.createElement('div');
   meta.className="search-result-meta";
   
   var link = document.createElement('a');
   link.href="/feeds/posts/summary/-/"+gCat;
   link.innerHTML = "<img src=\"http://i15.photobucket.com/albums/a355/deepakr/feed-icon.gif\" title=\"Subscribe to this category\" /> 订阅此标签RSS " + gCat;
   meta.appendChild(link);
   
   $('search-result').appendChild(meta);
   
   for (i=0; main.feed.entry[i]; i++) {
      xentry = main.feed.entry[i];
      catdisplay = "<div class=\"search-cat\"><span style=\"color:silver;\"> 标签:<\/span> ";
      for (var j=0;xentry.category[j];j++) {
      catdisplay = catdisplay + xentry.category[j].term;
         if(j<xentry.category.length-1)
            catdisplay = catdisplay + " , ";
      }
      xtitle=xentry.title.$t;
      xcontent=xentry.summary.$t;
      xlink=xentry.link[0].href;
      $('search-result').innerHTML = $('search-result').innerHTML + "<h3 class=\"search-title\"><a href=" + xlink + ">" + xtitle + "<\/a><\/h3>";
      $('search-result').innerHTML = $('search-result').innerHTML +  xcontent + "...";
      $('search-result').innerHTML = $('search-result').innerHTML + catdisplay + "<\/div>";
   }
   $('search-result').innerHTML = $('search-result').innerHTML + "<div class=\"search-close\" onclick=\"javascript:Element.hide('search-result')\">关闭<\/div>";
   $('search-result').style.display="block";
}

function string2JSON(str){
   var n;
   //We have to do exception handling here because eval might not work in all cases
   try {
      eval("n="+str);
   }
   catch (e) {
      n= null;
   }
   return n;
}

function showFail(){
   Element.hide('indicator');
   $('search-result').innerHTML="Sorry! The page cannot be loaded.";
   $('search-result').style.display="block"
}

//--------把中文字符转换成Utf8编码------------------------//
function EncodeUtf8(xstr){
var retS = "";
var s = xstr;
var slist=s.split("");
for(var i = 0; i < slist.length; i ++)
{
ustr=escape(slist[i]);
if(ustr.substring(0,2) == "%u"){
retS+=Hex2Utf8(Str2Hex(ustr.substring(2,6)));

}
else retS+=slist[i];
}
return retS;

}
function EncodeUtf(s1)
{
var s = escape(s1);
var sa = s.split("%");
var retV ="";
if(sa[0] != "")
{
retV = sa[0];
}
for(var i = 1; i < sa.length; i ++)
{
if(sa[i].substring(0,1) == "u")
{
retV += Hex2Utf8(Str2Hex(sa[i].substring(1,5)));

}
else retV += "%" + sa[i];
}

return retV;
}
function Str2Hex(s)
{
var c = "";
var n;
var ss = "0123456789ABCDEF";
var digS = "";
for(var i = 0; i < s.length; i ++)
{
c = s.charAt(i);
n = ss.indexOf(c);
digS += Dec2Dig(eval(n));

}
//return value;
return digS;
}
function Dec2Dig(n1)
{
var s = "";
var n2 = 0;
for(var i = 0; i < 4; i++)
{
n2 = Math.pow(2,3 - i);
if(n1 >= n2)
{
s += '1';
n1 = n1 - n2;
}
else
s += '0';

}
return s;

}
function Dig2Dec(s)
{
var retV = 0;
if(s.length == 4)
{
for(var i = 0; i < 4; i ++)
{
retV += eval(s.charAt(i)) * Math.pow(2, 3 - i);
}
return retV;
}
return -1;
}
function Hex2Utf8(s)
{
var retS = "";
var tempS = "";
var ss = "";
if(s.length == 16)
{
tempS = "1110" + s.substring(0, 4);
tempS += "10" + s.substring(4, 10);
tempS += "10" + s.substring(10,16);
var sss = "0123456789ABCDEF";
for(var i = 0; i < 3; i ++)
{
retS += "%";
ss = tempS.substring(i * 8, (eval(i)+1)*8);



retS += sss.charAt(Dig2Dec(ss.substring(0,4)));
retS += sss.charAt(Dig2Dec(ss.substring(4,8)));
}
return retS;
}
return "";
}
//]]>
</script>
<!-- End AJAX Categories -->


注意上面代码很多地方可以自定义，如：
max-results=5 这里的5是定义显示5条标签文章，你可以改成任何数字，只不过太大一不美观，二会增加读取时间。

CSS部分的几个自定义要点：
#indicator 是定义读取条的样式.

#search-result 是定义出现结果的方框样式.

.search-result-meta 是最上方的rss订阅的长条样式.

.search-title 标题样式.

.search-cat 是其他部分的种类样式.

.search-close 是最低下的关闭按钮的样式.

3。切换到模板页面元素项目，添加一个标签页面元素和一个html/js 页面元素，并且在html/js的页面元素内添加如下代码：

<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://ggpi.008.net/indicator.gif"/> 读取中/Loading...
</div>
<div id="search-result" style="display:none"></div>

4。切换回模板，修改html项目，打开 扩展窗口小部件模板 ，然后找到你刚刚添加的标签页面元素的代码：

<b:widget id='Label1' locked='false' title='标签' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


把上面的红色部分替换成下面这段代码：

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

保存，完工了~~~很简单吧~~~

最后感谢一下一笑已经风云过为大家提供脚本存放空间，感谢大家长期以来的支持。

更新:Shalafi Vos 给出了显示标签文章的同时隐藏原来的文章，关闭后又会恢复的方法。