首页  ·  知识 ·  云计算
整合greyBox和asp.net2.0,实现lightBox效果
edidu  http://www.cnblogs.com/edidu/  综合  编辑:dezai  图片来源:网络
最终效果如图所示: 除了

最终效果如图所示:

 

 

除了弹出的链接的颜色是正常显示,原窗口的被灰色的背景所蒙盖,有点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");
    }
然后在页面中添加


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

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

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

然后前台的代码如下:

http://www.colorstreet.cn">色彩街

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

本文作者:edidu 来源:http://www.cnblogs.com/edidu/
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读