编程爱好者之家

jq插件 标签云 jqcloud

2018-07-25 185

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

效果图如下

image.png

用法

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的高度,默认是原来的高度
centerobjectword在相对于cloud元素的x、y坐标,默认是cloud元素的中心。如 {x: 300, y: 150}
afterCloudRender“”在cloud呈现之后的回调函数
delayedModetrue是否用延时模式。如果设置为true,word会一个一个加载,每个之间会有微小的延时。当word超过50个的时候,默认会是true
shapeellipticcloud的形状。支持 elliptic(椭圆形) 和 rectangular (矩形)默认是elliptic
removeOverflowingtrue如果设置为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
    });
});


同类文章

您的赞赏是对小编最大的支持!