1. 准备工作: 下载: tagcloud.swf,swfobject.js(从附件中下载)(确保你的浏览器支持flash)
2. 在你的html显示页面加入
a. <script type="text/javascript" src="XXX/swfobject.js"></script>
b. <script type="text/javascript" src="XXX/yourjavascript.js" ></script>
i. 注: 也可以将js写在html页面中
3. 编写你的html:
a. 在页面中声明一个<div>,
i. 此<div>是用来js向其中添加数据的,所以id必须声明
1) 例:<div id="tags"></div>
4. 编写js:
a.
function getCumulus(){
var so = new SWFObject("tagcloud.swf", //swf文件(路径一定要能访问到)
"tagcloud", //id
"600", //宽度
"400", //高度
"7", //版本
"#336699" //北京色
);
so.addParam("wmode", "transparent"); //
//以下为相关的设置
//-----------以下列出的是常用的相关设置----------
//mode -->告诉该插件显示标签名称(tags),目录(cats),或者两者都显示(both)
//distr-->true : 标签分布在球表面
//tcolor-->默认标签颜色:例:0xff0000 红色
//tcolor2-->二级颜色, 插件会根据标签的属性,使用这个颜色(据个人测试,应该是根据字体的大小(大于10/小于10)分辨
//hicolor-->鼠标指在该标签上的颜色
//tpeed-->滚动速度 默认100
//tagcloud-->整个XML文件的字符串结构(该插件默认是从XML文件中读取信息显示的,所以也可使用xmlpath属性来制定xml文件此处默认是该XML文件的路径(http://XXX/tagcloud.xml) xml的文件名最好不要换)
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tcolor", "0xff0000");
so.addVariable("hicolor", "0x000000");
//该属性设定浑天仪中显示的文本及链接相关信息
//注意tagcloud数据的换行在浏览其中可能被解析为\n,所以尽可能写在一行
so.addVariable(
"tagcloud",
"<tags>
<a href='http://XXX' style='font-size: 12px;'>Tag one</a>
<a href='http://XXX style=' font-size: 12px;'>Tag two</a>
</tags>"
//也可为每个标签单独制定属性,例
//<a href="http://www.roytanck.com/tag1" style="font-size:9pt;" color="0xff0000" hicolor="0xffcc00" >Tag name<a>
);
so.write("tags");//注意该字符串对应html界面中div的id
}
5. 设置所需要的调用方式:
a. window.onload()
b. 或者在页面写链接调用
完整示例:
tagcloud.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tag Cloud</title>
<!-- 以下设置是为了测试的时候不影响结果-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel=stylesheet type=text/css href="/ilib/ilib/style/main.css" />
<script type="text/javascript" src="/js/cumulus/swfobject.js"></script>
<script type="text/javascript" src="/js/cumulus/tagCloud.js" ></script>
</head>
<body onload="getMyTagCloud()">
<div id="allTags"></div>
</body>
</html>
tagCloud.js
function getMyTagCloud(){
var tagcloud = "<?xml version='1.0' encoding='UTF-8'?><tags>";
tagcloud += "
<a href='http://localhost://XXX' style=' font-size: 12px;'>Tag one</a>
<a href='http://localhost://XXX' style=' font-size: 12px;'>Tag two</a>
";
Tagcloud += “</tags>”;
var so = new SWFObject("js/cumulus/tagcloud.swf", "tagcloud", "400", "350", "7", "#3366ff");
so.addParam("wmode", "transparent");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tcolor", "0x3366ff");
so.addVariable("tcolor2", "0x336699");
so.addVariable("hicolor", "0x4b6866");
so.addVariable("tspeed", "150");
so.addVariable("tagcloud", tagcloud);
so.write("allTags");
}
最后补充点乱码的问题:
1.链接中有中文:
在js中对中文部分进行二次编码:
encodeURI(encodeURI(tagName))
显示有乱码: 网上有有网友修改好的支持中文的swf文件, 可自行下载
最后在action中传数据之前将相应设置,即
引用
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
分享到：
相关推荐
cumulus4.4.0 镜像，可加载到EVE环境。测试好使。
积云框架 :open_book: 文献资料 最新文档。 文档。 更多信息 有关此项目的更多信息，以及有关NASA的地球观测系统数据和信息系统（EOSDIS）及其云工作的更多信息，请联系或访问 。...这是用于Cumulus开
Mellanox Cumulus学习，基本使用，培训资源
大名鼎鼎的WP-CUMULUS 3D标签云,已经改成支持中文标签,可在.htm自行添加标签链接,可以单机玩耍测试,不需要安装WordPress然后装插件~~ 主要是有些童鞋只是想要3D标签云动画,所以就提取重要文件出来稍作修改下.
包括swfobject.js和tagcolud.swf中文支持文件。
不错的标签云，喜欢立体效果的博客主或者网站主可以试试看哦！强力推荐
这本食谱在 vanilla Debian 上创建了一个交换机覆盖，并且还部署在 Cumulus 路由器/交换机上。 要求 测试 访问 Debian Wheezy 盒子 生产 访问 Cumulus HCL [1] 开关（Accton AS6701_32X，这就是这本食谱最初的目的）...
#资源达人分享计划#
Cumulus集成测试项目[已弃用] 注意：此存储库不再维护。 该存储库的内容已移至。 什么是积云？ Cumulus是NASA未来地球科学数据流的基于云的数据提取，存档，分发和管理原型。 阅读 安装 nvm use npm install 在...
人们从头开始设想了Cumulus会使用Grand Central Dispatch（CGD），从而实现大规模并发-可以进行的速度和宽度不受硬件和系统的限制。 和别人一起玩 根据设计，Cumulus只会做一件事情，而一件事情做得很好：与REST资源...
这里给出了cumulus/OpenRTMFP的git官网提到的视频会话样例的AS3代码,包括服务器端和客户端两部分,我已经在<使用Cumulus和Flash Player搭建视频会议示例>http://blog.csdn.net/tao_627/article/details/18041473中给...
完美支持中文wp-cumulus插件源码（无锯齿无抖动7K大小）
用于为 Cumulus API 生成和部署仪表板的代码。 文档 其他页面： 配置 仪表板由从 Cumulus API 检索到的数据填充。 在构建和部署仪表板之前，必须预先确定和设置 Cumulus API 的环境。 配置仪表板所需的信息可在app/...
NVIDIA（英伟达）这是Cumulus Networks文档的源存储库，位于docs.cumulusnetworks.com。 该站点使用静态站点生成器 。 安装文档并运行本地服务器 Hugo包含一个本地开发服务器，用于构建和查看仓库的实时更改。 要...
Flex P2P 音视频流客户端（Cumulus支持）
WORDPRESS用到的.wp-cumulus_3D云标签
openrtmfp又名Cumulus Server是一个完全开源和跨平台的可扩展的RTMFP服务器脚本。Cumulus Server在GPL 框架下遵循速度、优势、跨平台、轻量和高质量代码。Cumulus Server的每一个版本都是通过严格测试和审核的。可...
python库。 资源全名：cumulus-1.1.0.tar.gz
汉化的drupal标签云效果-tagadelic模块，cumulus模块