Ourmessage的个人空间

BlogJava 首页 新随笔 联系 聚合 管理
  13 Posts :: 0 Stories :: 16 Comments :: 0 Trackbacks

我的JavaScript学的很差,搞Ajax的东东搞不出来,没办法只有用别人的组件罗,GreyBox是我在www.open-open.com上面看到的一个组件,它运行以后可以产生还不错的界面。

效果看上去还不错吧!这只是其中一个演示,还有很多。
那么现在就分享一下自己的经验:
 1.进入GreyBox的网站(英文的):
http://orangoo.com/labs/GreyBox/
然后下载GreyBox
2.解压
先把这些包下的文件全部拷过来。

3.新建一个html页面,叫index.html
以下为代码:

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
 3<html>
 4    <head>
 5        <title>ddd</title>
 6        <script type="text/javascript">
 7        var GB_ROOT_DIR = "./greybox/";
 8        </script>
 9        <script type="text/javascript" src="greybox/AJS.js"></script>
10<script type="text/javascript" src="greybox/AJS_fx.js"></script>
11<script type="text/javascript" src="greybox/gb_scripts.js"></script>
12<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
13
14    </head>
15    
16
17    <body>
18
19
20<h4>Example rendered:</h4>
21<a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">Salt flats</a>
22<a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">Night valley</a>
23    </body>
24</html>

那个var GB_ROOT_DIR="./greybox/";这个是指向你本机的greybox的相对目录。
接下来还有三个JavaScript文件和一个CSS,它是要用的要加进来。
第21行到22行,这两句是用来加入两张图片,以便切换,这样你就可以看到开始的那个Ajax的效果了。
不过使用这个的时候要注意第一行的代码不要忘记写。如果那样你就会发现窗体不会以符合你浏览器的大小来显示了。

<a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">Salt flats</a>

href=""里面写的是你图片的路径,当然可以是网上的图片。rel是调用Js里面的方法(这个在它的官网上写的很详细的)title是显示在框架上的标题,A标签里面的内容就不用说了,它指的是标题。
如果还想用其它的效果,可以点Documentation进去看看,而且还有很详细的例子和语法范例,很简单的,相信一看就会明白。

另一个效果:

 

 

 

 

 

 

posted on 2007-07-09 00:02 夜一 阅读(2320) 评论(4)  编辑  收藏 所属分类: Java组件使用

Feedback

# re: GreyBox_v5_5(Java开源组件初探) 2007-07-09 09:12 Jarod
晕,这还叫“Java开源组件”。。。  回复  更多评论
  

# re: GreyBox_v5_5(Java开源组件初探) 2007-07-09 16:15 夜一
恩,谢谢!不好意思,我马上把名字改掉!
谢谢你的帮助啊!  回复  更多评论
  

# re: GreyBox_v5_5(Js组件初探)[未登录] 2007-11-09 18:18 aaa
试过打开的页面与父页面进行交互吗?wyongzhi#gmail.com  回复  更多评论
  

# re: GreyBox_v5_5(Js组件初探) 2007-11-11 15:14 夜一
@aaa
没有试过!  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: