`
yl.fighter
  • 浏览: 257754 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

cumulus(浑天仪)使用手册

阅读更多
  • 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();
    }
    分享到:
    评论
    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多少,能进一步说话吗?谢谢。

    相关推荐

      cumulus-linux-4.4.0-vx-amd64-qemu.zip

      6. **QEMU虚拟化**:通过使用“cumulus-linux-4.4.0-vx-amd64-qemu.qcow2”镜像,用户可以在本地或者云环境中快速搭建一个Cumulus Linux的仿真环境,进行功能测试、学习或开发验证,而无需物理硬件。 7. **EVE环境*...

      wp-cumulus(支持中文标签)

      通过使用`wp-cumulus`,用户可以以三维旋转的方式展示其博客的标签,使得标签更加生动有趣,同时也提高了用户的浏览体验。 ### 主要功能 1. **三维动态展示**:`wp-cumulus`的核心特点就是它能够将传统的静态标签...

      wp-cumulus

      5. **优化性能**:"wp-cumulus" 使用高效的脚本处理大量标签,不会对网站加载速度造成过大影响。 在使用过程中,确保你的网站已经安装了Flash插件,因为"wp-cumulus" 在运行时需要依赖Flash支持。不过,随着HTML5...

      wp-cumulus_3D云标签

      使用wp-cumulus 3D云标签可以提升用户在网站的浏览体验,使他们更愿意花时间探索网站内容。然而,需要注意的是,由于插件依赖Flash技术,可能在某些不支持Flash的设备或浏览器上无法正常显示。因此,在部署时,应...

      Cumulus:一个基于网络编码的分布式文件系统.pdf

      【 Cumulus:基于网络编码的分布式文件系统 】 在分布式计算领域,分布式文件系统是支撑大规模数据处理和存储的关键技术之一。Cumulus 是一个创新性的分布式文件系统,它利用网络编码理论来优化系统的容错能力和...

      cumulus:Cumulus框架+ Cumulus API

      积云框架 :open_book: 文献资料 最新文档。 文档。 更多信息 有关此项目的更多信息,以及有关NASA的地球观测系统数据和信息系统(EOSDIS)及其云工作的更多信息,请联系或访问 。...这是用于Cumulus开

      Mellanox Cumulus 培训资源

      Mellanox Cumulus学习,基本使用,培训资源

      wp-cumulus.rar_TagCloud._TagCloud.as_flex cumul_wp cumulus_wp cu

      【标题】"wp-cumulus.rar" 是一个与WordPress相关的压缩包,其中包含"TagCloud._TagCloud.as",这表明它与创建和展示WordPress标签云的插件有关。"flex cumul_wp cumulus_wp cu"暗示这个插件可能是用Adobe Flex技术...

      3D标签云单机中文版 WP-CUMULUS 1.23

      大名鼎鼎的WP-CUMULUS 3D标签云,已经改成支持中文标签,可在.htm自行添加标签链接,可以单机玩耍测试,不需要安装WordPress然后装插件~~ 主要是有些童鞋只是想要3D标签云动画,所以就提取重要文件出来稍作修改下.

      Python库 | cumulus-1.1.0.tar.gz

      当开发者在项目中选择使用cumulus库时,需要确保其与项目的其他依赖库兼容,并且满足项目的需求。 标签中提到的“开发语言”和“Python库”表明cumulus是用Python编写的,并设计为其他Python开发者使用。Python以其...

      cumulus-linux-cookbook:用于管理积云开关的手册

      这本食谱在 vanilla Debian 上创建了一个交换机覆盖,并且还部署在 Cumulus 路由器/交换机上。 要求 测试 访问 Debian Wheezy 盒子 生产 访问 Cumulus HCL [1] 开关(Accton AS6701_32X,这就是这本食谱最初的目的)...

      cumulus-integration-tests:Cumulus工作流的集成测试[已弃用]

      Cumulus集成测试项目[已弃用] 注意:此存储库不再维护。 该存储库的内容已移至。 什么是积云? Cumulus是NASA未来地球科学数据流的基于云的数据提取,存档,分发和管理原型。 阅读 安装 nvm use npm install 在...

      Cumulus:Cumulus是一个简单,功能强大且功能强大的快速Cocoa HTTP + REST客户端,可轻松创建基于云的应用程序

      人们从头开始设想了Cumulus会使用Grand Central Dispatch(CGD),从而实现大规模并发-可以进行的速度和宽度不受硬件和系统的限制。 和别人一起玩 根据设计,Cumulus只会做一件事情,而一件事情做得很好:与REST资源...

      Flex P2P 音视频流客户端(Cumulus支持)

      使用Cumulus,开发者可以创建具有音视频流功能的应用程序,例如视频会议、在线教育平台、多人游戏等。Cumulus库不仅实现了OpenRTMFP协议,还提供了一套灵活的API,使得开发者能够方便地控制和管理P2P连接。 在...

      OpenRTMFP Cumulus Primer()入门介绍与部署CumulusServer.pdf

      《OpenRTMFP Cumulus Primer 入门与CumulusServer部署》 OpenRTMFP (Real Time Media Flow Protocol) 是一种技术,...深入了解和熟练掌握OpenRTMFP/Cumulus的使用,能够极大地提升C++应用在实时领域的性能和可扩展性。

      drupal -cumulus

      与 Tagadelic 不同,Cumulus 强调了视觉效果,它使用 JavaScript 来创建动态的、3D 效果的标签云。Cumulus 的设计灵感来源于同名的云朵形状,它为网站带来了现代感和互动性。同样,Cumulus 也支持汉化,使得非英文...

      Cumulus官网视频会议样例代码

      这里给出了cumulus/OpenRTMFP的git官网提到的视频会话样例的AS3代码,包括服务器端和客户端两部分,我已经在&lt;使用Cumulus和Flash Player搭建视频会议示例&gt;http://blog.csdn.net/tao_627/article/details/18041473中给...

      cumulus-dashboard:积云 A​​PI 仪表板

      用于为 Cumulus API 生成和部署仪表板的代码。 文档 其他页面: 配置 仪表板由从 Cumulus API 检索到的数据填充。 在构建和部署仪表板之前,必须预先确定和设置 Cumulus API 的环境。 配置仪表板所需的信息可在app/...

      docs:Cumulus Networks文档库

      NVIDIA(英伟达)这是Cumulus Networks文档的源存储库,位于docs.cumulusnetworks.com。 该站点使用静态站点生成器 。 安装文档并运行本地服务器 Hugo包含一个本地开发服务器,用于构建和查看仓库的实时更改。 要...

    Global site tag (gtag.js) - Google Analytics