GreyBox_v5_5（Js组件初探）

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

效果看上去还不错吧！这只是其中一个演示，还有很多。
那么现在就分享一下自己的经验：
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 " >
2

< 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

</ head >
15

< body >
18

< 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进去看看，而且还有很详细的例子和语法范例，很简单的，相信一看就会明白。

另一个效果：

GreyBox_v5_5（Js组件初探）

你可能感兴趣的:(GreyBox_v5_5（Js组件初探）)