[原创]整合greyBox和asp.net2.0,实现lightBox效果

        最终效果如图所示:

        除了弹出的链接的颜色是正常显示,原窗口的被灰色的背景所蒙盖,有点windows关机的时候的感觉。
并且,被灰色覆盖的原画面不能再进行操作,只能关闭新弹出的画面才能再次激活。

        对于这个效果的实现,翻了很多资料,基本都是说建立两个层,根据z-index来确定其层次,灰色覆盖层足够大来覆盖整个页面,最顶层的窗口用来显示需要显示的东西。这样在灰色层的覆盖下,原始的画面不能被进行操作。
基于这个道理,我们可以利用javascript和dom对象对其进行操作。

       但是,由于本人太懒,并且javascript是个二把刀,所以,我决定采用开源的东西来填补。
一般来说,实现这个效果的js代码,主要集中在基于 jQuery的产品ThickboxGreyBox Redux,基于 prototype的Lightbox with moo.fxxilinusMulti-faceted LIghtbox,经过多个实验,我决定采用GreyBox这个产品。
        主要原因是,他支持网页和图片两种连接方式,并且实现的效果完全封装和参数化,并且可以有效地和asp.net结合,在保证功能的情况下,size也不大,20k,最关键的,界面非常的好看,符合web2.0的UI风格。

        首先,我上他们的官网http://orangoo.com/labs/GreyBox/ down了一个开发包。
得到如下内容:

        包里面拥有实现其效果的js脚本,也有关于这个脚本的说明、开发实例、普通开始、高级开发等文档。当然也有关于版权的说明。
        我仔细的结合examples.html查看了一下greybox文件夹中的AJS.js,AJS_fx.js,gb_scripts.js,gb_styles.css四个文件,然后再整理浏览他的文件。得到如下结论:
1。页面中GB_ROOT_DIR这个变量不能丢,它是js文件用来判断pic和js路径的变量;
2。必须在页面中导入greybox中AJS.js,AJS_fx.js,gb_scripts.js,gb_styles.css四个文件,缺一不可,特别值得注意的是gb_styles.css是用来展示执行效果样式的图片,如果没有这个文件,会使我们的画面一片空白不能产生任何效果。
3。在调用的时候,js已经自动将参数帮你设置完备了,你只需要一句简单的调用就可以了。

我看到这里,感觉很兴奋,因为如果是这样,那么实现这个功能太简单了,就像拖一个控件一样。

首先,我在.cs文件中导入这些js文件
如下:
    protected void Page_Init(object sender, EventArgs e)
    {
      
        ClientScriptManager csm = Page.ClientScript;
        csm.RegisterClientScriptInclude("2", "greybox/AJS.js");
        csm.RegisterClientScriptInclude("3", "greybox/AJS_fx.js");
        csm.RegisterClientScriptInclude("4", "greybox/gb_scripts.js");
        csm.RegisterClientScriptInclude("5", "static_files/help.js");
    }
然后在页面中添加
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

这样,就可以保证客户端的页面可以访问这四个js类库和css类。

然后,添加我们的链接:
方式1:普通的方式
<a href="http://baidu.com/" title="Baidu" rel="gb_page_center[640, 480]">Launch baidu.com</a>
其中<titile>表示新窗口的title,<rel>表示需要什么样的效果,这里需要的是弹出一个640px*480px的窗口
这样,我们就可以预览,并可以实现我们需要的效果。
方式2:高级的方式与cs代码融合
首先在cs代码中,添加如下代码,注册一个js事件委托

    protected void Page_Load(object sender, EventArgs e)
    {
        HyperLink1.Attributes.Add("onclick", "return GB_show('Google', this.href)");
    }

然后前台的代码如下:

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl ="http://www.colorstreet.cn">色彩街</asp:HyperLink>

这样,f5,我们就可以实现在页面的中央显示我们新页面的效果。

怎么样,是不是很简单?
如果你想实现更多的效果,以及实现picture的现实效果,不要着急
在examples.html里面已经帮你将所有的效果显现出来里,你只需要查看效果,然后看看代码,就可以轻松实现。

posted @ 2007-07-25 19:14 灯火阑珊²ºº7 阅读(...) 评论(...) 编辑 收藏