cumulus(浑天仪)使用手册

最新推荐文章于 2024-09-05 08:25:01 发布

ylfighter

最新推荐文章于 2024-09-05 08:25:01 发布

阅读量551

点赞数

分类专栏： Other 文章标签： XML HTML 浏览器 Flash 数据结构

本文链接：https://blog.csdn.net/ylfighter/article/details/83734868

版权

Other 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

[*]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. 或者在页面写链接调用

完整示例:

[b]tagcloud.html[/b]


<!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>

[b]tagCloud.js[/b]


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中对中文部分进行二次编码: [b]encodeURI(encodeURI(tagName))[/b]
显示有乱码: 网上有有网友修改好的支持中文的swf文件, 可自行下载
最后在action中传数据之前将相应设置,即
[quote]response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
[/quote]

ylfighter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cumulus(浑天仪)使用手册

[*]1. 准备工作: 下载: tagcloud.swf,swfobject.js(从附件中下载)(确保你的浏览器支持flash)[*] 2. 在你的html显示页面加入 a. b. i. 注: 也可以将js写在html页面中[*] 3. 编写你的html: a. 在页面中声明一个, i. 此是用来js向其中添加数据的,所以id必须声明 1)...
复制链接

扫一扫

专栏目录