博客园标签云

来源：http://www.cnblogs.com/lauyee/archive/2010/06/17/1759390.html

可以替换导航栏的标签列表。

     效果在右侧Tags，就不截图了。

     使用方法如下：

 1、  在管理->设置->"通过CSS定制页面风格"文本框内, 添加:

 

#tagCloud {   
 padding:2em;  
 text-align:center;
}
div#taglist{   
  display:none;
}

 

 

2、  在"页脚Html代码"文本框内, 添加:

 

 

<B>Tags</B>
<hr><br>
<div id="myTagList" style="width:270;height:300"></div>
<div id="myTag" style="width:270;display:none"></div>
<br><hr>

 

<%--先添加两个div用作标签的容器和临时容器--%>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script><script type="text/javascript" src="http://www.google.com/jsapi"></script><link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript">

             (function() {


             if ($("#taglist").length > 0) return;
                $("#myTag").load("http://www.cnblogs.com/lauyee/tag/ #taglist");
                //在http://www.cnblogs.com/lauyee/tag/ "页面读取#taglist对象，并加载到我们先前创建的myTag对象内。
                 google.load("visualization", "1");
                 google.setOnLoadCallback(draw);
             })();


             function draw() {
                 data = new google.visualization.DataTable();
                 data.addColumn('string', 'Label');
                 data.addColumn('number', 'Value');
                 data.addColumn('string', 'Link');

                 var tags = $("#myTag td").has("a").has("span");
                 var tagLength = tags.length;
                 data.addRows(tagLength);

                 tags.each(function(i, x) {
                     var tagLabel = $("a", this).text();
                     var tagValue = parseInt($("span", this).text().replace(/[)(]/g, ""));
                     var tagLink = "http://www.cnblogs.com/dabaopku/tag/" + tagLabel + "/";

                     data.setValue(i, 0, tagLabel);
                     data.setValue(i, 1, tagValue);
                     data.setValue(i, 2, tagLink);

                     //console.log({"label":tagLabel, "value": tagValue, "link": tagLink});
                 });
                 $("<div id='tagCloud'>").appendTo("div#myTagList");
                 //从myTag Td内提取连接，以及名称放入'tagCloud'，并追加到myTagList。
                 var tc = new TermCloud($("#tagCloud")[0]);
                 tc.draw(data, null);
                
             }
</script>

      在使用的时候记得把我的链接换成你的。

      以上代码大部分来自于K#朋友的 TagCloud Improved 我增加了跨域的代码，使它能用于每个页面的公告栏里。没有学过jQuery，知识需要用就临时改改。有不妥的地方还希望大家指正。

评论: 9　查看评论　发表评论