ASP.NET 使用 Greybox 说明 greybox高级用法

ASP.NET 使用 Greybox 说明

 

ASP.NET 使用 Greybox 说明

最近很容易可以看到这个效果，也就是当您点选网页中的图片或连结时，背景会立即变暗并且出现 Loading… 然后跳出一个美美的方框显示图片或网页，这种效果就叫做 Lightbox。

Greybox除了可以用于图片和网页外、连 flash、影片都可以显示在 Lightbox 弹出的方框里面。

 

一、安装

下载程式(http://orangoo.com/labs/GreyBox/Download/)

解压缩放在网站根目录

二、使用方法

‘前其宣告

System.Web.HttpContext.Current.Response.Write("<script type=""text/javascript"">")

System.Web.HttpContext.Current.Response.Write("var GB_ROOT_DIR = ""greybox/"";")

System.Web.HttpContext.Current.Response.Write("</script>")

System.Web.HttpContext.Current.Response.Write("<script type=""text/javascript"" src=""greybox/AJS.js""></script>")

System.Web.HttpContext.Current.Response.Write("<script type=""text/javascript"" src=""greybox/AJS_fx.js""></script>")

System.Web.HttpContext.Current.Response.Write("<script type=""text/javascript"" src=""greybox/gb_scripts.js""></script>")

System.Web.HttpContext.Current.Response.Write("<link href=""greybox/gb_styles.css"" rel=""stylesheet"" type=""text/css"" />")

‘呼叫Founction(A Href方式)

‘范例1：秀出200*100网页，标题为”警告讯息”，导向到message.aspx

System.Web.HttpContext.Current.Response.Write("<a href=""message.aspx"" title=""警告讯息"" rel=""gb_page_center[200, 100]"" >秀200*100网页</a>")

‘范例2：开启个全版的Google网页

        System.Web.HttpContext.Current.Response.Write("<a href=""http://google.com/"" title=""Google"" rel=""gb_page_fs[]"">Launch google.com in fullscreen window</a>")

‘范例3：开启第一个图片

        System.Web.HttpContext.Current.Response.Write("<a href=""http://orangoo.com/labs/greybox/static_files/night_valley.jpg"" rel=""gb_imageset[nice_pics]"" title=""Page1""><img src=""http://orangoo.com/labs/greybox/static_files/night_valley_thumb.jpg"" /></a>")

‘开启第二张图片

System.Web.HttpContext.Current.Response.Write("<a href=""http://orangoo.com/labs/greybox/static_files/night_valley.jpg"" rel=""gb_imageset[nice_pics]"" title=""Page2""><img src=""http://orangoo.com/labs/greybox/static_files/night_valley_thumb.jpg"" /></a>")

‘呼叫Function(直接秀出)

System.Web.HttpContext.Current.Response.Write("<script>AJS.AEV(window, 'load', function() { GB_showCenter(""Hello world"",""../message.aspx"",200,200); });</script>")

三、问与答

原文地址

Q:我需要下载哪些档以使GreyBox工作?

你只需要解压后的GreyBox档夹中的GreyBox档夹即可。

Q:图片无法显示，或只在位于GreyBox档夹中才显示?

你的GB_ROOT_DIR没有设置正确。

Q:我怎样制作自己的关闭链结/按钮?

<a href="#" οnclick="parent.parent.GB_hide();">My Close Button</a>

Q:我怎样用GreyBox载入页面?

GreyBox用的是AJS库自带的页面载入命令
AJS.AEV(window, 'load', function() { GB_show("Hello world","http://google.com"); });

Q:怎样使GreyBox不出现载入页面?

标准的GB_show如下:

GB_show = function(caption, url, /* optional */ height, width, callback_fn) {
var options = {
caption: caption,
height: height || 500,
width: width || 500,
fullscreen: false,
callback_fn: callback_fn
}
var win = new GB_Window(options);
return win.show(url);
}

因为在greybox/base/base.js里，我们默认的参数是这样的:

init: function(options) {
this.type = "page";
this.overlay_click_close = false;
this.salt = 0;
this.root_dir = GB_ROOT_DIR;
this.callback_fns = [];
this.reload_on_close = false;
this.src_loader = this.root_dir + 'loader_frame.html';
this.show_loading = true;
AJS.update(this, options);
},

可以看到show_loading默认参数为true，所以我们可以新建一个函数(暂时命名为GB_myShow)

GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
var options = {
caption: caption,
height: height || 500,
width: width || 500,
fullscreen: false,
show_loading: false,
callback_fn: callback_fn
}
var win = new GB_Window(options);
return win.show(url);
}

注意里面的show_loading为false，接著引用这个函数即可

<a href="http://google.com/" οnclick="return GB_myShow('Google', this.href)">Visit Google</a>

同理，我们还可以对overlay_click_close进行修改，以实现点击关闭的效果。
Q:使用WordPress?
WordPress可以创建二级目录，所以请使用绝对路径

<script type="text/javascript" src="http://www.my-wordpress-site.com/greybox/AJS.js"></script><script type="text/javascript" src="http://www.my-wordpress-site.com/greybox/AJS_fx.js"></script><script type="text/javascript" src="http://www.my-wordpress-site.com/greybox/gb_scripts.js"></script><link href="http://www.my-wordpress-site.com/greybox/gb_styles.css" rel="stylesheet" type="text/css">

 

Q:使用Google Maps?

用Google API或到论坛寻求帮助。

Q:在用Dreamweaver制作的网页中无法使用?

从脚本中删去函数MM_imagePreloader，然后修改

<body οnlοad="...."> to just <body>

greybox高级用法

由于项目要用到弹出窗口，或者叫做模拟窗口，这段时间就研究了下，解决方案很多，比如，window.open();window.showDialog();用层模拟，框架+DIV+Javascript....
用window.open()；这种方法的缺点是，会被浏览器或者相关软件给屏蔽掉。用层模拟的话，如果想实现较复杂点的窗口，就比较困难，第三种方法是综合了所有的网页制作知识，可以提供个很好的解决方案。但是，第三种实现起来，对于Javascript知识不够的人来说，很难完成。前段时间在网上逛的时候，发现了个好的解决方案：GreyBox.经过反复研究，发现，GreyBox几乎可以完成所有的弹出窗口（但是，好像对框架中的框架不太支持）。为了方便使用，我把GreyBox封装为一个控件。现在把用法贴出来：
1.涉及到的文件:GreyBox.dll(动态库) greyboxloader.aspx,greyboxloader.aspx.cs (加载网页的框架),gb_styles.css(样式表)
2.添加文件:
   ① 添加引用GreyBox.dll 到Bin文件夹
   ② 添加greyboxloader.aspx,greyboxloader.aspx.cs到项目的根目录.
   ③ 添加gb_styles.css文件到imges/css/ 文件夹下
3.调用方法:
   ①引用控件：
     在页面顶部加入代码：<%@ Register Assembly="GreyBox" Namespace="GreyBox" TagPrefix="cc1" %>
     在<form></form>之间添加代码：<cc1:GreyBox id="Geybox1" runat="server"></cc1:GreyBox>
   ②加载CSS文件:
   HtmlLink myHtmlLink = new HtmlLink();
   myHtmlLink.Href = "images/css/gb_styles.css";
   myHtmlLink.Attributes.Add("rel", "stylesheet");
   myHtmlLink.Attributes.Add("type", "text/css");
   Page.Header.Controls.Add(myHtmlLink);  
   ③注册弹出新窗口事件(以Button为例):
   this.Button1.Attributes.Add("onclick", "return GB_showCenter('修改密码', 'echangepw.aspx',200,390)");
   GB_showCenter('title','url',height,width)方法的参数说明:
   title:弹出窗口的标题
   url:网址或者网页文件名
   height:弹出窗口的高度
   width:弹出窗口的宽度
   这样,点击Button1就可以弹出一个窗口了.
4.方法:
   关闭窗口:
   Response.Write("<script language=javascript>parent.parent.GB_hide();</script>");
   提交并关闭窗口:  
   有框架的情况(IFRAME)
   Response.Write("<script language=javascript>parent.parent.document.forms(0).submit();</script>");
   无框架的情况
   Response.Write("<script language=javascript>top.window.document.forms(0).submit();</script>");
原始的GreyBox文件下载：http://www.cnblogs.com/Files/coding1016/GreyBox_v5_5.rar
封装后的GreyBox文件下载：http://www.cnblogs.com/Files/coding1016/GreyBox(2005).zip
说明：Greybox的所有资源归其原作者所有，感兴趣的可以去其网站看。上面有详尽的介绍，当然，也可以和我讨论，我很愿意和大家分享。

http://hi.baidu.com/xiao%5Fwei2008/blog/item/9dd3b41b2d89c9ffaf513385.html