jq插件 标签云 jqcloud

今天看到一个效果标签云，用到了jquery插件jqcloud，于是就简单整理了下，希望对大家有帮助

效果图如下

用法

1.确保引入jQuery

<script src="http://www.codelovers.cn/Public/Home/js/jq1.9.js"></script>

2.引入js和css

<link href="http://www.codelovers.cn/Public/Home/js/jqcloud/jqcloud.css" rel="stylesheet">

<script src="http://www.codelovers.cn/Public/Home/js/jqcloud/jqcloud-1.0.4.min.js"></script>

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

<div id="cloud"></div>

4.JS

生成方法为$("#cloud").jQCloud(array)

其中array为形式如下的数组，其中text为要显示的标签的文字，weight为权重。weight可以是任意数字，此插件会根据权重确定字的大小及颜色。

var array = [
    {text: "编程爱好者之家", weight: 13},
    {text: "codelovers.cn", weight: 10.5},
    {text: "codelover", weight: 9.4},
    {text: "欢迎关注本站", weight: 5.2}
];

参数列表

参数	默认值	作用
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
    });123456

5.关于数据

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

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

另外可以设置

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; }123

也可以下载未压缩版的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
    });
});