BlogJava-shishaomeng-文章分类-我的实验室http://www.blogjava.net/shishaomeng/category/39226.html让一切触手可及！zh-cnFri, 24 Apr 2009 22:51:44 GMTFri, 24 Apr 2009 22:51:44 GMT60lightwindow2.0的使用教程http://www.blogjava.net/shishaomeng/articles/267369.html时邵猛时邵猛Fri, 24 Apr 2009 07:23:00 GMThttp://www.blogjava.net/shishaomeng/articles/267369.htmlhttp://www.blogjava.net/shishaomeng/comments/267369.htmlhttp://www.blogjava.net/shishaomeng/articles/267369.html#Feedback0http://www.blogjava.net/shishaomeng/comments/commentRss/267369.htmlhttp://www.blogjava.net/shishaomeng/services/trackbacks/267369.htmlLight 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        // 在一个画廊里一次性要展示的图片的数量,默认是 1, 这很方便声明不管你是在设置前还是在设置后
lightwindow_top                // 设置窗口距顶部的整数距离
lightwindow_left               // 设置窗口距左边的整数距离
lightwindow_type               // 指定窗口要指定的数据类型, external, image, media, inline
lightwindow_loading_animation // Set to false to opt to not fade out the Loading Cover（缓冲条动画的相关设置）
lightwindow_iframe_embed       // 嵌入一个媒体到框架内，而不是嵌入到一个div标签内
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">    
    myLightWindow.createWindow('sample-link');
</script>

创建生成一个窗口，使用javascript
在使用作者创建的myLightWindow对象下，你可以使用activateWindow函数
myLightWindow.activateWindow({
    href:'http://stickmanlabs.com/images/kevin_vegas.jpg',
    title:'Waiting for the show to start in Las Vegas',
    author:'Jazzmatt',
    caption:'Mmmmm Margaritas! And yes , this is me...',
    left: 300
});
你也可以设置更多的选项，如下：
href              //窗口链接的位置
title             //窗口的标题
author            //窗口的作者
caption           //窗口的说明文字
rel               //设置rel标签
top               //窗口的顶部位置
left              //窗口的左边位置
type              //窗口要展现的媒体类型
showImages        //图片的数量
height            //窗口的高度
width             //窗口的宽度
loadingAnimation //缓冲动画设置
iframeEmbed       //嵌入媒体到一个框架内而不是一个div内
form              //表单的名称


Local Page
这个页面会自适应内容的大小，除非你设置的窗口的大小不足够大或者你在属性里设置了不同的大小。
<a href="blank.html" class="lightwindow">链接名称</a>

Inline Content
正在加载的library将会寻找一个容器，隐藏它只是引用它的内容到新窗口。
<a href="#id-of-container" class="lightwindow" >链接名称</a>

Forms
表单有一些麻烦，我们需要先创建一个本地页面
<a href="blank.html" class="lightwindow" > 链接名称</a>
现在在那个表单页，提交按钮需要定义一个动作。

Submit form Button Sample
下面为你展示了如何表单创建一个提交按钮
<a href="hello.php" params="lightwindow_form=sample-form" class="lightwindow_action" rel="submitForm"><button>Submit</button></a>

Close Button Sample
下面为你展示了如何创建一个取消按钮。
<a href="#" class="lightwindow_action" rel="deactivate">Cancel</a>

Iframe Calls
Iframe calls非常通用，你所作的就是在函数调用之前加入以下代码：
<a href="http://www.stickmanlabs.com" class="lightwindow_iframe_link" ><strong>Open a LightWindow from an iframe!</strong></a>
<script type="text/javascript">     var links = $$('.lightwindow_iframe_link');     links.each(function(link) {         Event.observe(link, 'click', function() {parent.myLightWindow.activate(null, link);}, false);         link.onclick = function() {return false;};     });        
</script>


开始！Actions的学习
Configuration Options（设置选项）
下面是一些你可能设置的选项，以及它们可能的默认值如下：
//The resize speed 0-10
resizeSpeed : 8,
contentOffset: {
    height:20,
    width :20
},
//Default sizes for each type
dimensions :{
    image: {height:250, width:250},
    page : {height:250, width:250},
    inline:{height:250, width:250},
    media:{height:250, width:250},
    external:{height:250, width:250},
    titleHeight:25
},
//The class names to look for to create a LightWindow or an action
classNames:{
   standard : 'lightwindow',
   action: 'lightwindow_action'
},
//The file types resepctive to their actions
fileTypes:{
page : ['asp', 'aspx', 'cgi', 'htm', 'html', 'pl', 'php4', 'php3', 'php', 'php5', 'phtml', 'rhtml', 'shtml', 'txt', 'vbs', 'rb'],    
media : ['aif', 'aiff', 'asf', 'avi', 'divx', 'm1v', 'm2a', 'm2v', 'm3u', 'mid', 'midi', 'mov', 'moov', 'movie', 'mp2', 'mp3', 'mpa', 'mpa', 'mpe', 'mpeg', 'mpg', 'mpg', 'mpga', 'pps', 'qt', 'rm', 'ram', 'swf', 'viv', 'vivo', 'wav'],    
image : ['bmp', 'gif', 'jpg', 'png', 'tiff']
},
//Mime types for the file types
mimeTypes:{
avi:'video/avi',
aif:'audio/aiff',
aiff : 'audio/aiff',    
gif : 'image/gif',    
bmp : 'image/bmp',    
jpeg : 'image/jpeg',    
m1v : 'video/mpeg',    
m2a : 'audio/mpeg',    
m2v : 'video/mpeg',    
m3u : 'audio/x-mpequrl',    
mid : 'audio/x-midi',    
midi : 'audio/x-midi',    
mjpg : 'video/x-motion-jpeg',    
moov : 'video/quicktime',    
mov : 'video/quicktime',    
movie : 'video/x-sgi-movie',    
mp2 : 'audio/mpeg',    
mp3 : 'audio/mpeg3',    
mpa : 'audio/mpeg',    
mpa : 'video/mpeg',    
mpe : 'video/mpeg',    
mpeg : 'video/mpeg',    
mpg : 'audio/mpeg',    
mpg : 'video/mpeg',    
mpga : 'audio/mpeg',    
pdf : 'application/pdf',      
png : 'image/png',    
pps : 'application/mspowerpoint',    
qt : 'video/quicktime',    
ram : 'audio/x-pn-realaudio-plugin',    
rm : 'application/vnd.rn-realmedia',  

swf    : 'application/x-shockwave-flash',    
tiff : 'image/tiff',    
viv : 'video/vivo',    
vivo : 'video/vivo',  
wav : 'audio/wav',
wmv : 'video/x-ms-wmv'        
},
//ActiveX Classids for file types
classids:{
mov : 'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',    
swf : 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000',    
wmv : 'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6'
},
//The plugin sources for the file types
codebases:{
mov : 'http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0',    
swf : 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',    
wmv : 'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715'
},
// The default padding for the viewport when a window is to fit the browser
viewportPadding : 10,
// What files types should the EOLAS Fix be applied to
EOLASFix : 'swf,wmv,fla,flv',
// What are our overlay images and default opacity, the preset has to be prebuilt for firefox as we cannot use an opacity setting
overlay : {    
opacity : 0.7,    
image : 'images/black.png',    
presetImage : 'images/black-70.png'
},

Re:lightwindow2.0的使用教程
// The default skin and associate markup, the id's and class are required
skin :     {
main:'<div id="lightwindow_container" >'+            
         '<div id="lightwindow_title_bar" >'+                    
           '<div id="lightwindow_title_bar_inner" >'+          
               '<span id="lightwindow_title_bar_title"></span>'+    
                    '<a id="lightwindow_title_bar_close_link" >close</a>'+
                    '</div>'+                 '</div>'+                 '<div id="lightwindow_stage" >'+                                          '<div id="lightwindow_contents" >'+                    
                      '</div>'+                    
                        '<div id="lightwindow_navigation" >'+
                         '<a href="#" id="lightwindow_previous" >'+
                             '<span id="lightwindow_previous_title"></span>'+
                            '</a>'+
                             '<a href="#" id="lightwindow_next" >'+
                             '<span id="lightwindow_next_title"></span>'+
                            '</a>'+
                            '<iframe name="lightwindow_navigation_shim" id="lightwindow_navigation_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>'+
                        '</div>'+
                       '<div id="lightwindow_galleries">'+
                        '<div id="lightwindow_galleries_tab_container" >'+
                            '<a href="#" id="lightwindow_galleries_tab" >'+
                                '<span id="lightwindow_galleries_tab_span" class="up" >Galleries</span>'+                                                    '</a>'+                        
                                 '</div>'+
                                 '<div id="lightwindow_galleries_list" >'+
                                  '</div>'+
                                       '</div>'+
                                           '</div>'+  
                                               '<div id="lightwindow_data_slide" >'+
                                          '<div id="lightwindow_data_slide_inner" >'+
                                       '<div id="lightwindow_data_details" >'+
                                      '<div id="lightwindow_data_gallery_container" >'+
                                '<span id="lightwindow_data_gallery_current"></span>'+
                                ' of '+                                
                                  '<span id="lightwindow_data_gallery_total"></span>'+
                               '</div>'+
                            '<div id="lightwindow_data_author_container" >'+
                               'by <span id="lightwindow_data_author"></span>'+
                            '</div>'+
                        '</div>'+
                         '<div id="lightwindow_data_caption" >'+
                     '</div>'+                    
               '</div>'+                
        '</div>'+
'</div>',    
loading:'<div id="lightwindow_loading" >'+                    
        '<img src="images/ajax-loading.gif" alt="loading" />'+                    
        '<span>Loading or <a href="javascript: myLightWindow.deactivate();">Cancel</a></span>'+                    
        '<iframe name="lightwindow_loading_shim" id="lightwindow_loading_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>'+                  
'</div>',
iframe:'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'+                 '<html xmlns="http://www.w3.org/1999/xhtml">'+                    
'<body>'+                        
'{body_replace}'+                    
'</body>'+                
'</html>',
gallery : {
        top :     '<div class="lightwindow_galleries_list">'+                         '<h1>{gallery_title_replace}</h1>'+                         '<ul>',
        middle :      '<li>'+                                 '{gallery_link_replace}'+                             '</li>',          bottom :     '</ul>'+                    '</div>'    
           }
},
//What form method should be used
formMethod:'get',
//should flash objects be hidden on the page when the window opens
hideFlash:false,
//Hide the gallery tab
hideGalleryTab:false,
//Show the gallery count when viewing a gallery
showGalleryCount :true,
//Define your own handlers here,see the 'How to Theme Section'
animationHeandler:false,
navigationHandler:false,
transitionHandler:false,
finalanimationHandler:false,
formHandler:false,
galleryAnimationHandler:false


时邵猛 2009-04-24 15:23 发表评论
]]>