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
轉載請注明出處
