cnblogs TagCloud基于jquery的實現(xiàn)代碼
更新時間：2010年06月11日 14:39:29 作者：
自創(chuàng)"山寨版"的"博客園"TagCloud!...
1. 進(jìn)入"管理 >> 配置"面板
2. 在"通過CSS定制頁面風(fēng)格"文本框內(nèi), 添加:
/***********tag cloud css****************/
#tagCloud {
text-align:center;
overflow:hidden;
}
#tagCloud a{
padding: 0 5px;
line-height:1.5em;
display:inline-block;
}
3. 在"頁腳Html代碼"文本框內(nèi), 添加:
<script>
/***********tag cloud script****************/
if($("#taglist").length>0)
{
var dict = {};
$("#taglist td").has("a").has("span").each(function(i, x){
dict[$("a", this).text()] = $("span", this).text().replace(/[)(]/g, "");
});
$("<div>").attr("id", "tagCloud").appendTo("div#mainContent");
for(var k in dict)
{
var sz = (dict[k] * 4) + 12;
$("<a>")
.attr("href", "http://www.cnblogs.com/k-sharp/tag/"+escape(k)+"/")
.attr("title", dict[k])
.css("font-size", sz + "px")
.text(k)
.appendTo("#tagCloud");
}
$("#taglist").remove();
}
</script>
2. 在"通過CSS定制頁面風(fēng)格"文本框內(nèi), 添加:
復(fù)制代碼 代碼如下:
/***********tag cloud css****************/
#tagCloud {
text-align:center;
overflow:hidden;
}
#tagCloud a{
padding: 0 5px;
line-height:1.5em;
display:inline-block;
}
3. 在"頁腳Html代碼"文本框內(nèi), 添加:
復(fù)制代碼 代碼如下:
<script>
/***********tag cloud script****************/
if($("#taglist").length>0)
{
var dict = {};
$("#taglist td").has("a").has("span").each(function(i, x){
dict[$("a", this).text()] = $("span", this).text().replace(/[)(]/g, "");
});
$("<div>").attr("id", "tagCloud").appendTo("div#mainContent");
for(var k in dict)
{
var sz = (dict[k] * 4) + 12;
$("<a>")
.attr("href", "http://www.cnblogs.com/k-sharp/tag/"+escape(k)+"/")
.attr("title", dict[k])
.css("font-size", sz + "px")
.text(k)
.appendTo("#tagCloud");
}
$("#taglist").remove();
}
</script>
相關(guān)文章
精選的10款用于構(gòu)建良好易用性網(wǎng)站的jQuery插件
這篇隨筆收集了10款非常給力的jquery 插件，幫助你構(gòu)建易用性良好的網(wǎng)站，希望對你有用！2011-01-01
主要是為了往后的項目中方便實現(xiàn)這類型的功能，在之前做問卷調(diào)查那個應(yīng)用中，就用到這個來顯示結(jié)果，但當(dāng)時開發(fā)時并不用是插件的，一大堆代碼，看也煩，用起來很麻煩2012-09-09
這篇文章主要介紹了jquery實現(xiàn)的帶有索引按鈕且自動輪播切換特效，圖片簡單大方，感興趣的小伙伴可以參考下。2015-09-09
這篇文章主要介紹了jquery選擇checked在ie8普通模式下的問題,需要的朋友可以參考下2014-02-02
這篇文章主要給大家詳細(xì)介紹了jQuery.each使用方法及源碼分析的相關(guān)資料,需要的朋友可以參考下2015-07-07
jQuery擴(kuò)展實現(xiàn)text提示還能輸入多少字節(jié)的方法
這篇文章主要介紹了jQuery擴(kuò)展實現(xiàn)text提示還能輸入多少字節(jié)的方法,涉及jQuery擴(kuò)展及字符串操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
jQuery分頁插件jquery.pagination.js使用方法解析
這篇文章主要為大家詳細(xì)解析了jQuery分頁插件jquery.pagination使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
我們通常在執(zhí)行一次ajax請求過后，需要更新界面上的某些內(nèi)容，一般通過動態(tài)插入dom元素。2010-10-10
這篇文章主要為大家詳細(xì)介紹了jquery插件實現(xiàn)掃雷游戲第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了jQuery采用連綴寫法實現(xiàn)的折疊菜單效果,通過jQuery的連綴寫法(又稱鏈?zhǔn)讲僮?實現(xiàn)菜單折疊的顯示效果,非常簡單實用,需要的朋友可以參考下2015-09-09