jquery插件(一）：JQCloud
jqcloud是一个标签云的插件，先看例子，再看用法
一、简单的示例
1、截图
jqcloud示例 — ifxoxo.com/jquery-jqcloud.html
2、具体代码
<script type="text/javascript">
var word_list =[
{text:"ifxoxo.com", weight:13,link:"http://ifxoxo.com/jquery-jqcloud.html"},
{text:"520xmn.com", weight:10.5}，
{text:"jquery", weight:9.4},
{text:"jqcloud", weight:8},
{text:"ifxoxo1", weight:6.2},
{text:"ifxoxo2", weight:5},
{text:"ifxoxo3", weight:5},
{text:"Nam et", weight:5},
{text:"Sapien", weight:4},
{text:"Pellentesque", weight:3},
{text:"et malesuada", weight:3},
{text:"fames", weight:2},
{text:"sit amet", weight:2},
{text:"justo", weight:1},
{text:"dictum", weight:1},
{text:"Ut et leo", weight:1},
];
$(function(){
$("#my_words").jQCloud(word_list);
});
</script>
<h2>jQCloud Example</h2>
<h4>--from http://ifxoxo.com/jquery-jqcloud.html</h4>
<div id="my_words" style="width: 550px; height: 350px;">
</div>
二、具体用法
1、下载所需的资源
（1）jquery
（2）jqcloud插件
下载地址：https://github.com/lucaong/jQCloud
解压之后在/jqcloud/文件夹下面找到jqcloud.css 和 jqcloud-1.0.4.js
//加载的时候注意文件的路径
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqcloud-1.0.4.js"></script>
<linkrel="stylesheet"type="text/css"href="jqcloud.css"/>
2、所需的html
需要一个用来展示jqcloud的元素(div ,span等)， 元素如果不指定宽和高，则需要在js中增加参数
<div id="my_words" style="width: 550px; height: 350px;"></div>
3、js部分
（1）需要一个用json格式存的数据
至少需要指定每一项的text和weight，jqcloud会根据所有文字的权重，计算出合适的百分比。格式详见代码
text：展现的文字
weight：文字的权重
var word_list =[
{text:"ifxoxo.com", weight:13},
{text:"520xmn.com", weight:10.5},
{text:"jquery", weight:9.4},
{text:"jqcloud", weight:8},
{text:"ifxoxo1", weight:6.2}
];
（2）执行部分
调用jQCloud函数（注意大小写）
$("#my_words").jQCloud(word_list);
// word_list就是（1）中准备的数据
（3）参数
以下是jQCloud的参数
| 参数 | 默认值 | 作用 |
| 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元素的大小，则自动剔除 |
参数示例
$("#my_words").jQCloud(word_list,{
removeOverflowing:true,
width:500,
height:500,
shape :"rectangular",
});
4、json数据的其他用法
（1）可以指定一个超链接: link
{text: “ifxoxo.com”, weight: 13, link: {href: “http://ifxoxo.com/jquery-jqcloud.html”, target: “_blank”} }
（2）可以增加html属性: html
{text: “520xmn.com”, weight: 10,html: {title: “My Title”, “class”: “custom-class”}}
（3）增加js事件:handlers (比如click, mouseOver)
{text: “520xmn.com”, weight: 15, handlers: {click: function(){alert(“from –ifxoxo.com”)}} }
5、修改css文件
如果对颜色和字体打大小不满意，可以修改默认的css文件–jqcloud.css
根据自己的需要，修改font-size 和 color
div.jqcloud span.w10 { font-size:550%;}
div.jqcloud span.w10 { color:#0cf; }
本文地址：http://ifxoxo.com/jquery-jqcloud.html
转载请注明出处
