标签云的实现(使用jQuery插件jqcloud)
jqcloud 是jQuery的一个插件,用于生成标签云。
github地址:https://github.com/lucaong/jQCloud
用法
1.确保引入jQuery
2.引入js和css
<link href="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>
3.在需要显示的地方写一个空的DIV
<div id="cloud"></div>
4.JS
生成方法为$("#cloud").jQCloud(array)
其中array为形式如下的数组,其中text
为要显示的标签的文字,weight
为权重。weight
可以是任意数字,此插件会根据权重确定字的大小及颜色。
var array = [{text: "标签1", weight: 13},{text: "标签2", weight: 10.5},{text: "日常", weight: 9.4}
];
参数列表
参数 | 默认值 | 作用 |
---|---|---|
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元素的大小,则自动剔除 |
用法如下
$("#cloud").jQCloud(array, {removeOverflowing: true,shape: "elliptic",height: 200});
5.关于数据
array
中的每一项都是一个对象。可以通过设置对象属性来填充数据。
obj.text = "标签";//obj为对象obj.weight = 100;array.push(obj);//array为数组
另外可以设置
html : 设置html属性,如 obj.html = {class: "customclass", title: "A title"};
link : 设置链接,如 obj.link = {"http://blog.wange21.top"};
afterWordRender:设置这个词在渲染后调用的函数。
handlers : 一个指定将绑定到单词的事件处理程序的对象,如 obj.handlers = {click: function() { alert(“it works!”); } };
6.样式
如果对样式不满意可以在自己的css中覆盖原样式,共有w1 ~ w10。
div.jqcloud span.w10 { font-size: 550%; }
div.jqcloud span.w10 { color: #0cf; }
也可以下载未压缩版的jqcloud.css 直接修改。
7.应用
异步加载标签云
$.get("/getAllLabel", function (json) {var res = $.parseJSON(json);var i;var obj;var array = new Array();for (i = 0; i < res.length; i++) {obj = new Object();obj.text = res[i].text;obj.weight = res[i].weight;obj.link = "/search?search=" + res[i].text+"&isLabel=1";array.push(obj);}$("#cloud").jQCloud(array, {removeOverflowing: true,shape: "elliptic",height: 200});
});
标签云的实现(使用jQuery插件jqcloud)相关推荐
- 基于HTML5 SVG可互动的3D标签云jQuery插件
svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件.该3D标签云插件不需要额外的CSS样式,可使用鼠标与标签进行互动,并提供很多参数来控制标签云的外观. 效果演示 ...
- [jQuery]3D效果的标签云
刚才看了篇园友关于如何自定义标签云的文章,心痒痒自己也想弄一个,其实原理非常简单,就是动态load标签页里的标签,按需要的格式重新动态生成DOM结构,再通过第三方的js插件(他们用的是Google V ...
- JavaScript(23) 创建元素标签和属性在body中(jQuery插件)
效果图: 代码:(注意引入jQuery插件!!) <!DOCTYPE html> <html><head lang="en"><meta ...
- 自定义添加关键词Tag标签jquery插件
下载地址 一款点击添加关键词Tag标签jquery插件,此款jquery插件不仅可以自定义输入关键词标签,还可以展开选择已有关键词标签,当关键词标签内容比较多时可以点击换一换来切换下一页 dd:
- Python jquery标签云
很多知名博主都喜欢弄个标签云.今天特地看了下源码.把标签云的方法单独扣了出来.这里做一下记录 html页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- 非插件修改 WordPress 标签云样式
对于 WordPress 常见的一种修改标签云字体样式的办法,是直接修改 wp-includes 目录下面的 category-template.php 文件,不过这种做法不推荐使用,毕竟是系统文件, ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 30+ 新鲜惊奇的 jQuery 插件与教程
在网络发展领域,由于 jQuery 简单易学,易于使用和易于扩展的特点,因此正慢慢变得无处不在.以下是从一些 jQuery 相关文章中整理出来的 30+ 新鲜与惊奇的 jQuery 插件与教程.如果你 ...
最新文章
- 演讲实录丨周斌:人工智能推动新基建和数据中心的技术革新
- 成功解决ValueError: row index was 65536, not allowed by .xls format
- 为什么现在腿会抽筋了?
- 图像梯度处理MATLAB代码
- 列字段通用excel导入修改版
- GPU Gems2 - 11 近似的双向纹理函数(Approximate Bidirectional Texture Functions)
- java DOM4J 读取XML
- BZOJ 1968: [Ahoi2005]COMMON 约数研究 水题
- 和方舟rust一样的手游_偶像梦幻祭2新活动 ES手游全新开服
- 操作手册模板_挂蓝悬臂浇筑箱梁施工技术操作手册
- pandas dataframe遍历_Pandas循环提速7万多倍!Python数据分析攻略!
- ASP.NET动态网站开发培训-26.在线编辑器FreeTextBox的使用
- React脚手架开发
- Neusoft机房改善计划
- chrome 自动操纵谷歌小恐龙
- sublime清除html里面的空白行,Sublime Text批量删除空白行和注释代码
- 腾讯AI加速器招募再启,AI开放既是工具箱也是方法库?
- 华东之旅--西塘第二天
- android 带箭头提示框,三种带箭头提示框总结实例
- linux系统调用:exit()与_exit()函数详解【转】