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)文章
如果看過本文姊妹篇《jqPlot——基于jquery的圖表繪制工具》的朋友，應(yīng)該知道jqPlot大致的操作方法；如果還是不太清楚的話，可以參考jqPlot官方網(wǎng)站的使用方法介紹。2009-07-07
jQuery插件FusionCharts繪制2D雙折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D雙折線圖效果,結(jié)合實例形式分析了jQuery使用FusionCharts結(jié)合xml數(shù)據(jù)載入實現(xiàn)2D雙折線圖繪制的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了jquery自定義組件實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
jQuery實現(xiàn)個性翻牌效果導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實現(xiàn)個性翻牌效果導(dǎo)航菜單的方法,實例分析了jQuery操作animate、css及鼠標(biāo)事件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery中animate動畫第二次點擊事件沒反應(yīng)
這篇文章主要介紹了jQuery中animate動畫第二次點擊事件沒反應(yīng)的解決方法，非常的實用，有需要的小伙伴可以參考下2015-05-05
顯示和隱藏的效果想必大家都有見到過吧，其實很簡單，通過jquery便可輕松實現(xiàn)，下面為大家整理了4種方式，大家可以根據(jù)需求自由選擇2013-08-08
jQuery 常見學(xué)習(xí)網(wǎng)站與參考書
打算學(xué)習(xí)jquery的朋友可以參下如下網(wǎng)上，參考書嗎，可以看下 鋒利的jquery腳本之家提供電子版下載。2009-11-11
JQuery使用$.ajax和checkbox實現(xiàn)下次不在通知功能
這篇文章主要介紹了JQuery使用$.ajax和checkbox實現(xiàn)下次不在通知功能,本文給出HTML代碼、JS代碼、和后端JAVA代碼完整示例,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了jQuery實現(xiàn)的上拉刷新功能組件,涉及jQuery事件響應(yīng)與頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-05-05
easyui是一種基于jQuery的用戶界面插件集合。本文是小編自己遇到的一些有關(guān)easyui treegrid的問題記錄，特此分享腳本之家平臺供大家參考2016-04-04