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