Tag Cloud for ASP.NET by jQuery

Ниже я раскажу как написать простенький компонент для отображения облака тэгов в ASP.NET. Пост содержит много кода. Для начала нам потребуется jQuery, который нужно где-нить подключиться на странице. Если Вы не знаете, что такое jQuery - то в поиск. Далее на странице, где у нас будет облако тэгов, а их может быть несколько, подключаем CSS и JS:
Copy Source | Copy HTML
  1. <%@ Register TagPrefix="lsv" TagName="TagCloud" Src="~\Components\_\TagCloud.ascx" %>
  2. <link rel="stylesheet" type="text/css" href="App_Themes/Basic/tagcloud/tagcloud.css" />
  3. <script type="text/javascript" src="App_Themes/Basic/tagcloud/tagcloud.js" charset="windows-1251"></script>

Где JS файл содержит следующий код:
Copy Source | Copy HTML
  1. function fontSize(freq, font_min, font_max,total_min,total_max) {
  2.     var size = (freq - total_min)*(font_max - font_min);
  3.     if(total_max-total_min>0){
  4.         size /= (total_max - total_min);
  5.     }
  6.     size += font_min;
  7.     if (size > font_max) size = font_max;
  8.     else {
  9.         if (size < font_min) size = font_min;
  10.     }
  11.     return size + "em";
  12. }
  13.  
  14. var iTagCloud = {
  15.     init: function(divName, data) {
  16.         $(document.createElement('ul')).attr("id", "list" + divName).attr("class", "tagList").appendTo("#" + divName);
  17.         //create tags
  18.         $.each(data.tags, function(i, val) {
  19.             //create item
  20.         var li = $(document.createElement('li'));
  21.             //create link
  22.             $(document.createElement('a')).css("font-size",
  23.                  fontSize(val.freq, 0.5, 2, data.min,data.max)
  24.             ).text(val.tag).attr({ title: val.freq + " упоминаний",
  25.                 target: "_blank",
  26.                 href: "http://blogs.yandex.ru/search.xml?text=" + val.tag
  27.             }).appendTo(li);
  28.             //add to list
  29.             li.appendTo("#list" + divName);
  30.         });
  31.     }
  32. };

Файл стилей на ваше успотрение раставляет цвета, например:
Copy Source | Copy HTML
  1. div.TagCloud { width:90%; background-color:#ffffff;
  2.                            text-align:center; padding:0px; overflow:auto; font-size:100%; font-family:arial; }
  3. ul.tagList { margin:0; padding:0; }
  4. ul.tagList li { list-style-type:none; float:left; margin:0 3px; height:35px; }
  5. ul.tagList li a { text-decoration:none; color:#0000FF; }
  6. ul.tagList li a:hover { text-decoration:underline; color:Red }


Теперь можно перейти к содержимому самого компонента TagCloud.aspx, основная задача которого просто заполнить текст в метку Content:
Copy Source | Copy HTML
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7.  
  8. public partial class Components__TagCloud : System.Web.UI.UserControl
  9. {
  10.     #region Переменные
  11.  
  12.     DataSet _wordsdata = null;
  13.     String _title = String.Empty;
  14.  
  15.     #endregion
  16.  
  17.     #region Свойства
  18.  
  19.     public DataSet WordsData
  20.     {
  21.         set
  22.         {
  23.             _wordsdata = value;
  24.         }
  25.         get
  26.         {
  27.             return _wordsdata;
  28.         }
  29.     }
  30.  
  31.     public String Title
  32.     {
  33.         set
  34.         {
  35.             _title = value;
  36.         }
  37.         get
  38.         {
  39.             return _title;
  40.         }
  41.     }
  42.  
  43.     #endregion
  44.  
  45.     /// <summary>
  46.     /// Пошла загрузка
  47.     /// </summary>
  48.     /// <param name="sender"></param>
  49.     /// <param name="e"></param>
  50.     protected void Page_Load(object sender, EventArgs e)
  51.     {
  52.         Content.Text = "<div id=\"tagCloud"+this.ID+"\" class=\"TagCloud\">";
  53.         if(!String.IsNullOrEmpty(this.Title)){
  54.             Content.Text += "<h3>"+this.Title+"</h3>";
  55.         }
  56.         Content.Text += "</div><br/>";
  57.         if (WordsData != null && WordsData.Tables.Count > 0
  58.             && WordsData.Tables[0].Rows.Count > 0)
  59.         {
  60.             Content.Text += "<script type=\"text/javascript\">";
  61.             Content.Text += "$(function() {   " +
  62.            "iTagCloud.init('tagCloud"+this.ID+"', {tags:[";
  63.             int Min = int.MaxValue;
  64.             int Max = int.MinValue;
  65.  
  66.             //пройдемся по всем данным.
  67.             foreach(DataRow dr in WordsData.Tables[0].Rows){
  68.                 // $json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";   
  69.                 Content.Text += "{tag:'" + dr[0].ToString()+"',freq:'"+ dr[1].ToString()+"'},";
  70.                 int freq;
  71.                 if(int.TryParse(dr[1].ToString(),out freq)){
  72.                     if (freq < Min)
  73.                     {
  74.                         Min = freq;
  75.                     }
  76.                     else if(freq > Max)
  77.                     {
  78.                         Max = freq;
  79.                     }
  80.                 }
  81.             }
  82.             Content.Text = Content.Text.TrimEnd(',')
  83.                 + "],min:'"+Min.ToString()+"',max:'"+Max.ToString()+"'})});"; //закрытие объекта
  84.             Content.Text += "</script>";
  85.         }else{
  86.             Content.Text += "-- недостаточно данных для построения облака слов --";
  87.         }
  88.  
  89.     }
  90. }
  91.  
  92.  
  93.  

Вот и все, теперь задав DataSet у объекта TagCloud мы получим полноченное облако тэгов. При желании можете написать виджет для замены унылого облака тэгов которое есть в BlogEngine =).

Метки:   Категории:BlogEngine | Code


blog comments powered by Disqus

Добавить комментарий

Кто я?

Программист. Я слежу за блогосферой и знаю, как будет развиваться интернет. Когда у меня есть время я даже прилагаю для этого усилия. Подробнее

Последние комментарии

Не отображать

Topbot at FeedsBurner

Мои Твиты

Twitter января 17, 13:37
программа instagramliker обновлена 2018г http://dlvr.it/QBbVpV

Twitter января 16, 16:22
Разбор Звездные войны: Последние джедаи http://dlvr.it/QBSdwN https://twitter.com/f1ashr/status/953301465962921985/photo/1

Twitter января 14, 19:00
8 японок основали поп-группу для пропаганды криптовалют http://dlvr.it/QBC3cw https://twitter.com/f1ashr/status/952616326605938688/photo/1

Twitter января 7, 10:12
Белый шум защищен авторским правом на youtube http://dlvr.it/Q9DFXS

Twitter января 1, 20:52
Новогодние белки http://dlvr.it/Q8SyPZ https://twitter.com/f1ashr/status/947933468222152704/photo/1

Twitter января 1, 16:43
Популярные блогеры и посты за 2017 год http://dlvr.it/Q8RpTj https://twitter.com/f1ashr/status/947870931896082433/photo/1

Twitter января 1, 15:37
@true_policy @nickolas_vs @KremlinRussia @iremeslo Но Путин делает все, чтобы выборная система в глазах аборигенов стала нелегитимной.

Twitter января 1, 11:32
@true_policy @nickolas_vs @KremlinRussia @iremeslo Нужен не новый президент, а другой система. От демократии к респ… https://twitter.com/i/web/status/947792574697431040

Twitter декабря 31, 21:11
Самоуправляемые ездящие картошки http://dlvr.it/Q8MGMd

Twitter декабря 31, 13:34
Разбор сериала Медичи: Повелители Флоренции http://dlvr.it/Q8KDRt https://twitter.com/f1ashr/status/947460855972601857/photo/1

Twitter декабря 31, 11:32
Папа Римский выступил на TED http://dlvr.it/Q8Jjb5

Twitter декабря 31, 10:25
коломенский кремль: альтернативная история 2 http://dlvr.it/Q8JRYv https://twitter.com/f1ashr/status/947413453701971968/photo/1

Twitter декабря 31, 10:25
Суперлайки в Перископе http://dlvr.it/Q8JRYr

Twitter декабря 30, 15:16
Peace, Death! (Пиз Дец) http://dlvr.it/Q8Cv1S https://twitter.com/f1ashr/status/947124264259395584/photo/1

Twitter декабря 30, 15:16
Итоги 2016 года в Живом Журнале http://dlvr.it/Q8Ctw6 https://twitter.com/f1ashr/status/947124257149956096/photo/1

Twitter декабря 30, 13:39
Разбор сериала "Молодой папа" (теория общего знания, часть 22) http://dlvr.it/Q8CP7P https://twitter.com/f1ashr/status/947099721675370496/photo/1

Twitter декабря 30, 13:05
Механического медведя не починить - пятая песня FNAF http://dlvr.it/Q8CDG8 https://twitter.com/f1ashr/status/947091170844278784/photo/1

Twitter декабря 30, 10:55
Skype and Baidu links http://dlvr.it/Q8Bf03

Twitter декабря 30, 10:23
Яндекс атаковал Израиль http://dlvr.it/Q8BWKR

Twitter декабря 30, 10:23
По случаю 8 марта погасили статую свободы http://dlvr.it/Q8BW9V https://twitter.com/f1ashr/status/947050399160156161/photo/1

Мой твиттер

Копирайт

Все мысли, высказанные в блоге, являются моим мнением и за это мнение меня никто не забанит! Кроме того, никто не имеет право копировать материалы блога без использования ctrl+C/V!

© Copyright 2008