Functional Demos

云标签控件的使用

日志操作


一、基本说明:

云标签控件可以使多个关键字以云方式显示出来,即很多博客系统里的热门关键字等Tag效果,此控件来自于 http://www.codeproject.com/KB/aspnet/cloud.aspx

二、属性说明:
  • Items:云标签项集合
  • DataTextField:设置/获取要绑定字段的名称,For Text属性
  • DataTextFormatString:设置/获取 绑定字段显示的格式,即格式化输出的字段,For text属性的显示,{0} 将会替换成DataTextField属性的值
  • DataHrefField:设置/获取要绑定字段的名称,For Href属性
  • DataHrefFormatString:设置/获取 绑定字段显示的格式,即格式化输出的字段,For href属性的显示,{0} 将会替换成DataHrefField属性的值
  • DataTitleField:设置/获取要绑定字段的名称,For Title属性
  • DataTitleFormatString:设置/获取 绑定字段显示的格式,即格式化输出的字段,For title属性的显示,{0} 将会替换成DataTitleField属性的值
  • DataWeightField:设置/获取要绑定字段的名称,For Weight属性
  • ItemCssClassPrefix:设置/获取 CSS名称的前缀,如要设置此项,必须先定义好7个CSS,如前缀名为 CloudStyle ,那么对应实际的CSS应该有以下7个: CloudStyle1 CloudStyle2 CloudStyle3 ... CloudStyle7,将分别对应7种不同大小的字体
三、使用说明:
1.设置数据源:

要使用TagCloud,必须需为此控件指定数据源,然后绑定,与Gridview等数据源和绑定方法都是一样的,代码如下:

Test test = new Test();
TagCloud1.DataTextField = "Name";
TagCloud1.DataTitleField = "Age";
TagCloud1.DataTitleFormatString = "{0} artilces on the subject";
TagCloud1.DataWeightField = "Age";
TagCloud1.DataSource = test.GetList(null);
TagCloud1.DataBind();
这里要说明一点的是,对应的数据源的字段,必须要有与CloudItem相对应的属性,其中Weight是代表此标签的数量或者点击等,是必须要有的,以上我只是使用Test库里的Age代替,就不再另行创建表来演示了

2.添加Items项:

另可以直接为TagCloud添加Item,有以下2种方法:
前台HTML里添加:

<TagCloud:Cloud ID="TagCloud1"  runat="server" OnItemClick="TagCloud1_ItemClick" >
<Items>
    <TagCloud:CloudItem 
        Text="深圳博客网" 
        Href="http://www.szblogs.com" 
        Weight="100" />
    <TagCloud:CloudItem 
        Text="Winson.Framework" 
        Title="Test" 
        Href="http://bbs.szblogs.com" 
        Weight="50" />
    <TagCloud:CloudItem 
        Text="SqlPager" 
        Title="Test" 
        Href="SqlPager.aspx" 
        Weight="5" />
    <TagCloud:CloudItem 
        Text="Popup" 
        Title="Test" 
        Href="Popup.aspx" 
        Weight="11" />
    <TagCloud:CloudItem 
        Text="添加数据" 
        Title="Test" 
        Href="Data_add.aspx" 
        Weight="88" />
</Items>
后台服务器端添加:

TagCloud1.Items.Add(new CloudItem("Test",20,"www.szblogs.com","测试");
四、效果演示:
1.直接调用:


深圳博客网 Winson.Framework SqlPager Popup 添加数据 Test 5555 Test Test Test Test Test Test Test a w w w w w w w w w w w w      yy                           5 rf                
前台HTML:

<TagCloud:Cloud ID="TagCloud1"  runat="server" OnItemClick="TagCloud1_ItemClick" >
<Items>
    <TagCloud:CloudItem 
        Text="深圳博客网" 
        Href="http://www.szblogs.com" 
        Weight="100" />
    <TagCloud:CloudItem 
        Text="Winson.Framework" 
        Title="Test" 
        Href="http://bbs.szblogs.com" 
        Weight="50" />
    <TagCloud:CloudItem 
        Text="SqlPager" 
        Title="Test" 
        Href="SqlPager.aspx" 
        Weight="5" />
    <TagCloud:CloudItem 
        Text="Popup" 
        Title="Test" 
        Href="Popup.aspx" 
        Weight="11" />
    <TagCloud:CloudItem 
        Text="添加数据" 
        Title="Test" 
        Href="Data_add.aspx" 
        Weight="88" />
</Items>

后台服务器端

Test test = new Test();
TagCloud1.DataTextField = "Name";
TagCloud1.DataTitleField = "Age";
TagCloud1.DataTitleFormatString = "{0} artilces on the subject";
TagCloud1.DataWeightField = "Age";
TagCloud1.DataSource = test.GetList(null);
TagCloud1.DataBind();
为了防止点击item后页面post导致云标签失效,因此以上数据源设置的代码要放到 if(!IsPostBack) 之外