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然后,在强制做垃圾回收,至少我是可以啦。哈哈。代码如下:

  function tb_remove() {
     var seq=PopSeq();
      $("#TB_imageOff"+seq).unbind("click");
     $("#TB_closeWindowButton" + seq).unbind("click");

 
     $("#TB_window" + seq).fadeOut("fast", function() {
 
         ///手动移除ifrmae,IE的一个bug
          $('#TB_iframeContent' + seq).remove();
         $('#TB_window' + seq + ',#TB_overlay' + seq + ',#TB_HideSelect' + seq).trigger("unload").unbind().remove();
        ///自己调用垃圾回收,强制清楚iframe内存,解决文本框无法输入问题。
         CollectGarbage();
     }
);
    if (typeof document.body.style.maxHeight == "undefined"{//if IE 6
        $("body","html").css({height: "auto", width: "auto"});
        $("html").css("overflow","");
    }

    document.onkeydown = "";
    document.onkeyup = "";
    return false;
}

 

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

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

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

封装一个popup类, public class Popup
{
    /// <summary>
     /// show the pop up div
    /// </summary>
    /// <param name="panel">container the button</param>
    /// <param name="url"></param>

     public static void ShowPopup(UpdatePanel panel, string url)
 
    {
        ScriptManager.RegisterClientScriptBlock(panel, panel.GetType(), "ShowPopup""ShowPopup('" + url + "')"true);
    }


    /// <summary>
    /// 
    /// </summary>
    /// <param name="panel"></param>
    /// <param name="page">request page</param>

    public static void ClosePopup(UpdatePanel panel)
    {

        string js = " self.parent.tb_remove();";

       ScriptManager.RegisterClientScriptBlock(panel, panel.GetType(),"closepopup", js, true);
    }

}

 需要的js

function ShowPopup(url) {
    window.top.tb_show(null, url, false);
}

 页面上例子

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

原文地址:http://www.diyflash.net/article.asp?id=1492
300*300
 文章首页关于迷茫时代关于我写意人生
版权所有:迷茫时代 All rights reserved   
执行时间:0.00533 秒