一个轻量级的、动态的、支持AJAX的jQuery标签云插件，它提供了一种显示与您的网站相关的关键词和主题列表的好方法

有了这个插件，您可以通过在HTML代码中的所需位置嵌入一些简单的标记，轻松快速地将标记云添加到任何网页

如何使用它:

1.为标签云创建一个空容器。

<div id="tagcloud">
  
</div>

2.下载插件并加载jquery.tagcloud.js查询在jQuery之后。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.tagcloud.js"></script>

3.在对象数组中定义您的标记列表，如下所示。

var tags = [
    {
      tag: "jQuery",
      count: 56
    },{
      tag: "mobile",
      count :12
    },{
      tag: "JavaScript",
      count :24
    },{
      tag: "CSS",
      count :38
    },{
      tag: "HTML",
      count :44
    },{
      tag: "Ruby",
      count :9
    },{
      tag: "Python",
      count :23
    },{
      tag: "Com",
      count :12
    }
];

4.初始化插件以生成默认的标签云。

$("#tagcloud").tagCloud(tags,{
  // options here
});

5.将您自己的CSS样式应用于标签链接。

.tagcloudlink {
  /* ... */
}

6.通过AJAX请求获取您的标签列表。

$.ajax('/path/to/tag/list/').done(function(response)) {
  $("#tagcloud").tagCloud(response.tags, {
    // options here
  });
});

7.处理点击事件。

$("#tagcloud").tagCloud(tags,{
  click: function(tag) {
    // do something
  },
});

8.自定义标签排序功能。

$("#tagcloud").tagCloud(tags,{
  sort: function (a, b) {return a.tag < b.tag ? -1 : (a.tag == b.tag ? 0 : 1)},
});

9.覆盖默认标签模板。默认值：false。

$("#tagcloud").tagCloud(tags,{
  template: '<a href="{href}" class="tagcloudlink" style="font-size: {size}em">{tag}<\/a>'
});

10.设置最大字体大小（em）。默认值：4米。

$("#tagcloud").tagCloud(tags,{
  maxFontSize: 2,
});

11.设置最小/最大计数值。

$("#tagcloud").tagCloud(tags,{
  min: -1,
  max: -1,
});

预览截图

启用动态AJAX 标记云插件 jquery.tagcloud.js