cumulus(浑天仪)使用手册

yl.fighter

浏览: 257560 次
性别:
来自: 北京

最近访客更多访客>>

LiYunpeng

c4795712

wsl764263152

zo1698

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Other

XML HTML 浏览器 Flash 数据结构

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:

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();
}

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

分享到：

[转载]判断字符串中是否含有中文，是否为 ... | opensocial应用使用容器的所有css属性的方 ...

2010-10-21 09:35
浏览 2545
评论(4)
分类:Web前端
查看更多

4 楼 0633bbs点com 2011-10-12

问题已经解决了，谢谢。

3 楼 yl.fighter 2011-10-11

0633bbs点com 写道

你好，我安装你的方法，怎么实现不了，程序不是wp不行吗？你的qq多少，能进一步说话吗？谢谢。

不好意思啊.. 我很长时间没登了. 最近在忙php的东西,, 这个我是用在java中的. 总结的比较早, 你有什么问题了加我QQ : 164641505

2 楼 0633bbs点com 2011-10-10

急用，求解？

1 楼 0633bbs点com 2011-10-10

你好，我安装你的方法，怎么实现不了，程序不是wp不行吗？你的qq多少，能进一步说话吗？谢谢。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论