ID #6564

Jquery弹出层插件Thickbox使用心得

前段时间在建设银行项目上用EXT完整做了个单页系统,太赶了,没有记录下任何东西, 现在都忘了,怪可惜的。这次项目用JQuery做js的东西。主要用了个弹出层控件thickbox, 自己也扩展和修改了一下。这里就记下来,也提供大家下载,希望对大家有用吧。

thickbox官方网站(上面有例子和基本的使用方法): http://jquery.com/demo/thickbox/

就我使用过程中,thickbox常见问题:

1 。跨iframe的弹出层。

症状:每次thickbox都只在frame中弹出,而不会整个屏幕覆 盖

原因和解决方法:

thickbox使用tb_show()函数在body后面加入弹出层。可 以使用window.top.tb_show()把弹出层加到页面上。我的tihickbox插件中修改如下:在 tb_init()中把tb_show(t,a,g)替换如下

if(a.indexOf ('TB_iniframe') != -1)
{
window.top.tb_show(t,a,g);
}
else
{
tb_show(t,a,g);
}

这样只只要在原来的链接 上加入TB_iniframe=true即可,如div.aspx? height=180&width=400&TB_iframe=true&TB_iniframe=true&modal=true

2.thickbox只支持一层弹出,不可支持多层弹出。

修改过的控件已经支持(不 足:ie6下失效弹出层失效了,占时没解决,哈哈)

3. 弹出层关闭后,文本框无法聚 焦。

症状:关闭弹出层后,原来页面上的文本框无法聚焦

原因和解决方法: 这个的原因不好说,很多人都认为是ie本身的bug。是由于iframe没有移除,即使移除了。内 存上也么有清除造成的。这也是我猜的。哈哈。解决方法是在tb_remove()中先手动移除 iframe然后,在强制做垃圾回收,至少我是可以啦。哈哈。代码如下:

1function tb_remove() {
2    var seq=PopSeq();
3      $("#TB_imageOff"+seq).unbind("click");
4     $("#TB_closeWindowButton" + seq).unbind("click");
5
6     $("#TB_window" + seq).fadeOut("fast", function() {
7         /**////手动移除ifrmae,IE的一个bug
8          $('#TB_iframeContent' + seq).remove();
9         $('#TB_window' + seq + ',#TB_overlay' + seq + ',#TB_HideSelect' + seq).trigger("unload").unbind().remove ();
10        /**////自己调用垃圾回收,强制清楚iframe内存,解决文本框 无法输入问题。
11         CollectGarbage();
12     });
13    if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
14        $("body","html").css ({height: "auto", width: "auto"});
15        $("html").css("overflow","");
16    }
17    document.onkeydown = "";
18    document.onkeyup = "";
19    return false;
20}

4.在asp.net中如何 动态设置需要的参数和关闭弹出层。

症状:thickbox提供的例子都是需要在input后a 的class加thickbox,而且参数什么都是固定的。 而我们传递的参数一般需要动态。

解决方法,使用asp.net ajax,不多说了。直接看代码吧。

封装一个popup类:

1public class Popup
2{
3    /**//// <summary>
4    /// show the pop up div
5    /// </summary>
6    /// <param name="panel">container the button</param>
7     /// <param name="url"></param>
8    public static void ShowPopup(UpdatePanel panel, string url)
9    {
10         ScriptManager.RegisterClientScriptBlock(panel, panel.GetType(), "ShowPopup", "ShowPopup('" + url + "')", true);
11    }
12
13    /**//// <summary>
14     ///
15    /// </summary>
16    /// <param name="panel"></param>
17    /// <param name="page">request page</param>
18    public static void ClosePopup(UpdatePanel panel)
19    {
20
21        string js = " self.parent.tb_remove();";
22
23       ScriptManager.RegisterClientScriptBlock(panel, panel.GetType (),"closepopup", js, true);
24    }
25}

需要 的js

1function ShowPopup(url) {
2    window.top.tb_show(null, url, false);
3
4}

页面上例子

1/**////add按钮需 要放在updatepanel里面  
2 protected void btnAdd_Click(object sender, EventArgs e)
3    {
4/**////自己组参数
5        string url = "aa.aspx? height=180&width=400&Type="+ddlType.SelectedItem.Value;
6         url += "&TB_iframe=true&TB_iniframe=true&modal=true";
7         Popup.ShowPopup(this.upButtons, url);
8    }

不足: 由于现在我的不需要支持ie6。所以我也一直没把我的插件改到支持ie6.如果有那个朋友修改 好了麻烦共享一下。


2011-07-01 18:55
阅读:
I'm VC , Just U know Y
本站部分文章来源于互联网,版权归原作者所有。

延伸阅读:

一次JQuery性能优化实战

jquery中使用表单元素选择器

JQuery的扩展接口简单示例

jquery使用attr访问自定义属性,减少javascript脚本中

jquery使用属性相等选择器