标签云的实现(使用jQuery插件jqcloud) javascript

jqcloud 是jQuery的一个插件，用于生成标签云。
github地址:https://github.com/lucaong/jQCloud
用法 1.确保引入jQuery
2.引入js和css

3.在需要显示的地方写一个空的DIV

4.JS
生成方法为$("#cloud").jQCloud(array)
其中array为形式如下的数组，其中text为要显示的标签的文字，weight为权重。weight可以是任意数字，此插件会根据权重确定字的大小及颜色。

var array = [ {text: "标签1", weight: 13}, {text: "标签2", weight: 10.5}, {text: "日常", weight: 9.4} ];

参数列表

参数	默认值	作用
width	“”	设置cloud的宽度，默认是原来的宽度
height	“”	设置cloud的高度，默认是原来的高度
center	object	word在相对于cloud元素的x、y坐标，默认是cloud元素的中心。如 {x: 300, y: 150}
afterCloudRender	“”	在cloud呈现之后的回调函数
delayedMode	true	是否用延时模式。如果设置为true，word会一个一个加载，每个之间会有微小的延时。当word超过50个的时候，默认会是true
shape	elliptic	cloud的形状。支持 elliptic（椭圆形）和 rectangular （矩形）默认是elliptic
removeOverflowing	true	如果设置为true, 如果一个word超出了cloud元素的大小，则自动剔除

【标签云的实现(使用jQuery插件jqcloud)】用法如下

$("#cloud").jQCloud(array, { removeOverflowing: true, shape: "elliptic", height: 200 });

5.关于数据
array中的每一项都是一个对象。可以通过设置对象属性来填充数据。

obj.text = "标签"；//obj为对象 obj.weight = 100; array.push(obj); //array为数组

另外可以设置 html : 设置html属性，如

obj.html = {class: "customclass", title: "A title"};

link : 设置链接，如

obj.link = {"http://blog.wange21.top"};

afterWordRender:设置这个词在渲染后调用的函数。
handlers : 一个指定将绑定到单词的事件处理程序的对象，如 obj.handlers = {click: function() { alert(“it works!”); } };
6.样式
如果对样式不满意可以在自己的css中覆盖原样式，共有w1 ~ w10。

div.jqcloud span.w10 { font-size: 550%; } div.jqcloud span.w10 { color: #0cf; }

也可以下载未压缩版的jqcloud.css 直接修改。
7.应用
异步加载标签云

$.get("/getAllLabel", function (json) { var res = $.parseJSON(json); var i; var obj; var array = new Array(); for (i = 0; i < res.length; i++) { obj = new Object(); obj.text = res[i].text; obj.weight = res[i].weight; obj.link = "/search?search=" + res[i].text+"&isLabel=1"; array.push(obj); } $("#cloud").jQCloud(array, { removeOverflowing: true, shape: "elliptic", height: 200 }); });