为web站点中开发 热门Tag(TagsCloud) 控件 --更好的展现文章
CSDN有个CSDN Tag版块, 主要是用来索引带标签的文章, 并以Tag的流行程度显示每个Tag的大小级别. CSDN Tag可以智能的提取文章中的摘要, 并进行归档 索引, 以便以后的查询. 在Blog中这种应用很广泛. 我们要实现的就是热门Tag功能. 指定Tag数据源, 以Tag字体的大小代表具有该tag文章数的多少, 用来反映Tag的流行程度, 从而更好的展现数据.
这个功能主要是通过具有tag文章数量的多少,显示tag的字体大小级别,效果如图:
原理是对一个数字序列, 找一个衡量尺度, 用来计算每个Tag的字体大小.
例如:
字体的级别:
ScaleUnitBase: 最小数量Tag的count
ScaleUnitLength: 级别分段的长度
算出的scaleValue就是对应的FontSpecs中字体的大小.
http://www.codeplex.com/datatagscloud 已经为我们实现了TagsCloud, 可以直接拿来使用.
只需要我们的数据库表中有以下3个基本字段
Text: Tag的名字
URL : Tag的URL
Count: Tag的数量
并可以为TagsCloud指定对应字段, url格式及css样式
demo代码如下:
这个功能主要是通过具有tag文章数量的多少,显示tag的字体大小级别,效果如图:
原理是对一个数字序列, 找一个衡量尺度, 用来计算每个Tag的字体大小.
例如:
字体的级别:
private static readonly string[] FontSpecs = new string[] {
"xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large" };
"xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large" };
scaleValue = (int)Math.Truncate((item.Count - this.ScaleUnitBase) / this.ScaleUnitLength);
item.Count: 某个tag的数量ScaleUnitBase: 最小数量Tag的count
ScaleUnitLength: 级别分段的长度
算出的scaleValue就是对应的FontSpecs中字体的大小.
http://www.codeplex.com/datatagscloud 已经为我们实现了TagsCloud, 可以直接拿来使用.
只需要我们的数据库表中有以下3个基本字段
Text: Tag的名字
URL : Tag的URL
Count: Tag的数量
并可以为TagsCloud指定对应字段, url格式及css样式
demo代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="Artem.DataTagsCloud" namespace="Artem.Web.UI.Controls" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.TagClouds a:hover
{
background-color:#20B2AA;
text-decoration : none;
}
.TagClouds a:link
{
color:#000000;
text-decoration : underline;
}
.TagClouds a:visited
{
color:#000000;
text-decoration : underline;
}
.TagClouds a:active
{
color:#000000;
text-decoration : underline;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
</style>
<body>
<form id="form1" runat="server">
<div style="width:300px">
<cc1:TagCloud ID="TagCloud1" CssClass="TagClouds" runat="server" DataSourceID="SqlDataSource1">
</cc1:TagCloud>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Data Source=JECRAY.YANG;Initial Catalog=test;Persist Security Info=True;User ID=sa;Password=sa"
SelectCommand="SELECT * FROM TagClouds">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
<%@ Register assembly="Artem.DataTagsCloud" namespace="Artem.Web.UI.Controls" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.TagClouds a:hover
{
background-color:#20B2AA;
text-decoration : none;
}
.TagClouds a:link
{
color:#000000;
text-decoration : underline;
}
.TagClouds a:visited
{
color:#000000;
text-decoration : underline;
}
.TagClouds a:active
{
color:#000000;
text-decoration : underline;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
</head>
</style>
<body>
<form id="form1" runat="server">
<div style="width:300px">
<cc1:TagCloud ID="TagCloud1" CssClass="TagClouds" runat="server" DataSourceID="SqlDataSource1">
</cc1:TagCloud>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Data Source=JECRAY.YANG;Initial Catalog=test;Persist Security Info=True;User ID=sa;Password=sa"
SelectCommand="SELECT * FROM TagClouds">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>