jquery插件(一):JQCloud
来源:互联网 发布:手机会员软件 编辑:程序博客网 时间:2024/05/16 04:55
jqcloud是一个标签云的插件,先看例子,再看用法
一、简单的示例
1、截图
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>
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"/>
<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}
];
{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)中准备的数据
// word_list就是(1)中准备的数据
(3)参数
以下是jQCloud的参数
参数 默认值 作用 width “” 设置cloud的宽度,默认是原来的宽度 height “” 设置cloud的高度,默认是原来的高度centerobjectword在相对于cloud元素的x、y坐标,默认是cloud元素的中心。如 {x: 300, y: 150}afterCloudRender“”在cloud呈现之后的回调函数delayedModetrue是否用延时模式。
如果设置为true,word会一个一个加载,每个之间会有微小的延时。
当word超过50个的时候,默认会是trueshapeellipticcloud的形状。支持 elliptic(椭圆形) 和 rectangular (矩形)
默认是ellipticremoveOverflowingtrue如果设置为true, 如果一个word超出了cloud元素的大小,则自动剔除
参数示例
$("#my_words").jQCloud(word_list,{
removeOverflowing: true,
width: 500,
height: 500,
shape :"rectangular",
});
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; }
div.jqcloud span.w10 { color: #0cf; }
本文地址:http://ifxoxo.com/jquery-jqcloud.html
转载请注明出处
- jquery插件(一):JQCloud
- 标签云的实现(使用jQuery插件jqcloud)
- JQCloud
- jquery 插件(一) nivoslider
- Jquery插件开发(一)
- jQuery插件学习(一)
- 自定义jQuery插件(一)
- jquery插件介绍(一)
- jQuery :插件开发(一)
- jQuery插件开发(一)
- 联动下拉框 jquery 插件(一)
- jQuery插件知识详解(一)
- jquery.treeview插件简单示例(一)
- jQuery插件编写:基础篇(一)
- jQuery图表插件 Flot(一)
- JQuery插件 之 jqgrid(一)
- 一些jQuery插件的收集(一)
- jQuery插件手把手教会(一)
- 经典makefile例子
- jquery ui(六)拖动排序 sortable
- 西安客运网站
- http://blog.chinaunix.net/uid-25835268-id-3055356.html--makefile
- 编译gcc4.7.3 其他版本的应该也可以
- jquery插件(一):JQCloud
- User Story用户情景与用例规约
- ognl.InappropriateExpressionException: Inappropriate OGNL expression: 1
- 查找项目下的函数定义和使用
- 上班族必读:“五险一金”详解!!
- Qt编写端口扫描工具
- PSF 点扩散函数
- ListView的Item不能点击的解决方法
- xml写的界面无法在graphical layout中显示