lightwindow2.0的使用教程
Light Window v2.0不错的web 2.0应用代码,可在当前窗口调用其他页面,包括注册,登录,搜索,flash,图片,视频等文件……
第一步:将三个js文件和一个css文件包含在你要实现的页面中。
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
第二步:在超链接<a>(hyperlink)标签里,你可以改变如下属性。
params="lightwindow_width=516,lightwindow_height=530,lightwindow_show_images=2"
可选属性如下:
lightwindow_width
lightwindow_height
lightwindow_show_images
lightwindow_top
lightwindow_left
lightwindow_type
lightwindow_loading_animation // Set to false to opt to not fade out the Loading Cover(缓冲条动画的相关设置)
lightwindow_iframe_embed
lightwindow_form
要实例化任何一个窗口,仅仅是在超链接内加入一个"lightwindow"类,再为这个类做一再相关的设置
例如:<a href="http://www.foo.com/bar.jpg class="lightwindow">foo da bar</a>
即在foo da bar这个超链接内加入了一个lightwindow类,使得通过点击它可以调出一个lightwindow来显示那幅jpg图片。
不同的媒体类型:
Movie
<a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lightwindow" params="lightwindow_width=640,lightwindow_height=290" >链接名称</a>
SWF
<a href="gallery/header.swf?You-could-put-a-GET-string-here-for-your-flashvars" class="lightwindow" params="lightwindow_width=800,lightwindow_height=345" title="Preview: Doesn't your masthead look perdy?" >链接名称</a>
PDF
<a href="http://www.ready.gov/business/_downloads/sampleplan.pdf" class="lightwindow">Link Name</a>
如果要使该媒体类型得到正常显示,你的电脑里要装有pdf阅读器。或者你可以使用Flash Paper代替。
External (i.e. A Website)
该类型是一个扩展类型,窗口显示的是一个网页,所以在属性中我们又加入了title和caption用来说明该网页。
<a href="http://www.rubyonrails.com/" class="lightwindow" title="Ruby on Rails" caption="One of my favorites, and really it should be one of yours.">链接名称</a>
Images
画廊用到了一个rel标签,格式为:画廊名[类名]。图片在页面中显示的位置会依此来判断。
single image
<a href="images/image-5.jpg" class="lightwindow" title="What is this Plant?" author="Unknown" caption="Whatever it is, it is still a pretty cool picture. .">链接名称</a>
a gallery
<a href="gallery/0-sushi.jpg" class="lightwindow" rel="/\\:;*?<>'”|&#[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
<a href="gallery/1-sushi.jpg" class="lightwindow" rel="/\\:;*?<>'”|&#[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a>
<a href="gallery/2-sushi.jpg" class="lightwindow" rel="/\\:;*?<>'”|&#[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>
下面是一个实例:
如果你只想实例化一个窗口,我们就可以使用函数createWindow(id)。
你可以使用作者创建的myLightWindow对象,当然你也可以使用你自己创建的对象。
代码如下:
<a href="http://stickmanlabs.com/images/kevin_vegas.jpg" id="sample-link">链接名称</a>
<script type="text/javascript">
</script>
创建生成一个窗口,使用javascript
在使用作者创建的myLightWindow对象下,你可以使用activateWindow函数
myLightWindow.activateWindow({
});
你也可以设置更多的选项,如下:
href
title
author
caption
rel
top
left
type
showImages
height