中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

GreyBox框架基本使用 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > 其他框架 > GreyBox框架基本使用

GreyBox框架基本使用

2008-06-18    文章来源:互联网    浏览次数:

GreyBox是www.open-open.com开发的一个遮罩层的组件,它运行以后可以产生不错的界面。类似于thinkbox,lightbox等。

下面我们先来看下效果吧

效果看上去还不错吧!这只是其中一个演示,还有很多。

那么现在就分享一下自己的经验:

1.进入GreyBox的网站(英文的):

http://orangoo.com/labs/GreyBox/

然后下载GreyBox

2.解压

先把这些包下的文件全部拷过来。

3.新建一个html页面,叫index.html

以下为代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ddd</title>
<script type="text/javascript">
 var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<h4>Example rendered:</h4>
<a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">Salt flats</a>
<a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">Night valley</a>
</body>
</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进去看看,而且还有很详细的例子和语法范例,很简单的,相信一看就会明白。

  • 上一篇:没有了
  • 下一篇:Atlas:微软的Ajax
  • 文章评论(查看全部)

    看不清楚?单击换一张。
    loading.. 评论加载中....
    关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部