jqcloud 是jQuery的一个插件,用于生成标签云。
github地址:https://github.com/lucaong/jQCloud
<link href="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>
<div id="cloud"></div>
生成方法为$("#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元素的大小,则自动剔除 |
用法如下
$("#cloud").jQCloud(array, {
removeOverflowing: true,
shape: "elliptic",
height: 200
});
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!”); } };
如果对样式不满意可以在自己的css中覆盖原样式,共有w1 ~ w10。
div.jqcloud span.w10 { font-size: 550%; }
div.jqcloud span.w10 { color: #0cf; }
也可以下载未压缩版的jqcloud.css 直接修改。
异步加载标签云
$.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
});
});