cumulus(浑天仪)使用手册
b. <script type="text/javascript" src="XXX/yourjavascript.js" ></script>
i. 注: 也可以将js写在html页面中
i. 此<div>是用来js向其中添加数据的,所以id必须声明
1) 例:<div id="tags"></div>
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
}
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();
}
response.setHeader("Cache-Control", "no-cache");
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}