cumulus(浑天仪)使用手册

阅读更多

1. 准备工作: 下载: tagcloud.swf,swfobject.js(从附件中下载)(确保你的浏览器支持flash)

2. 在你的html显示页面加入

a.
b.
i. 注: 也可以将js写在html页面中

3. 编写你的html:

a. 在页面中声明一个

,
i. 此

是用来js向其中添加数据的,所以id必须声明
1) 例:

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", 
				"
					Tag one
					Tag two
				"
				//也可为每个标签单独制定属性,例
				//Tag name
				
			);
			so.write("tags");//注意该字符串对应html界面中div的id
			
		}

5. 设置所需要的调用方式:

a. window.onload()
b. 或者在页面写链接调用


完整示例:

tagcloud.html

tagCloud.js

function getMyTagCloud(){

	var tagcloud = "";
	tagcloud += "
	Tag one
	Tag two
	";
	Tagcloud += “”;
	
	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();
}

• tagcloud.rar (7.7 KB)
• 下载次数: 53