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 ) ;
  } ) ;

     <h1 >jQCloud Example h1 >
      <h3 >--from http : //ifxoxo.com/jquery-jqcloud.html
     <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 type = "text/javascript" src = "jqcloud-1.0.4.js" >
     <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 
转载请注明出处

你可能感兴趣的:(javascript,jQuery,jquery插件)