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>
    <h1>jQCloud Example</h1>
     <h3>--from http://ifxoxo.com/jquery-jqcloud.html</h3>
    <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 
转载请注明出处