javascript|jquery插件(一）（JQCloud） jquery插件|jQuery

jqcloud是一个标签云的插件，先看例子，再看用法
一、简单的示例 1、截图
jqcloud示例 — ifxoxo.com/jquery-jqcloud.html
2、具体代码
= "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 ) ;
} ) ;

jQCloud Example
--from http : //ifxoxo.com/jquery-jqcloud.html

二、具体用法 1、下载所需的资源
（1）jquery （2）jqcloud插件下载地址：https://github.com/lucaong/jQCloud
解压之后在/jqcloud/文件夹下面找到jqcloud.css 和 jqcloud-1.0.4.js
//加载的时候注意文件的路径
= "text/javascript" src = "https://www.it610.com/article/jquery.min.js" >
= "text/javascript" src = "https://www.it610.com/article/jqcloud-1.0.4.js" >
2、所需的html
需要一个用来展示jqcloud的元素(div ,span等)，元素如果不指定宽和高，则需要在js中增加参数

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; } 【javascript|jquery插件(一）（JQCloud）】 本文地址：http://ifxoxo.com/jquery-jqcloud.html
转载请注明出处