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

Thickbox官方网站(上面有比如和根本的运用办法):http://jQuery.com/demo/Thickbox/

jQuery弹出层插件Thickbox运用心得  Thickbox jQuery 第1张

就我运用过程中,Thickbox常见问题:

1。跨iframe的弹出层。

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

原因和处理办法:

thickbox运用tb_show()函数在body后边参加弹出层。能够运用window.top.tb_show()把弹出层加到页面上。我的tihickbox插件中修正如下:在tb_init()中把tb_show(t,a,g)替换如下

  1. if(a.indexOf('TB_iniframe')!=-1)
  2. {
  3. window.top.tb_show(t,a,g);
  4. }
  5. else
  6. {
  7. tb_show(t,a,g);
  8. }

这样只只要在本来的链接上参加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然后,在强制做废物收回,至少我是能够啦。哈哈。代码如下:


1functiontb_remove(){
2varseq=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内存,处理文本框无法输入问题。
11CollectGarbage();
12});
13if(typeofdocument.body.style.maxHeight=="undefined"){//ifIE6
14$("body","html").css({height:"auto",width:"auto"});
15$("html").css("overflow","");
16}
17document.onkeydown="";
18document.onkeyup="";
19returnfalse;
20}

4.在asp.net中怎么动态设置需求的参数和封闭弹出层。

症状:thickbox供给的比如都是需求在input后a的class加thickbox,并且参数什么都是固定的。而咱们传递的参数一般需求动态。

处理办法,运用asp.netajax,不多说了。直接看代码吧。

封装一个popup类,

1publicclassPopup
2{
3/**////<summary>
4///showthepopupdiv
5///</summary>
6///<paramname="panel">containerthebutton</param>
7///<paramname="url"></param>
8publicstaticvoidShowPopup(UpdatePanelpanel,stringurl)
9{
10ScriptManager.RegisterClientScriptBlock(panel,panel.GetType(),"ShowPopup","ShowPopup('"+url+"')",true);
11}
12
13/**////<summary>
14///
15///</summary>
16///<paramname="panel"></param>
17///<paramname="page">requestpage</param>
18publicstaticvoidClosePopup(UpdatePanelpanel)
19{
20
21stringjs="self.parent.tb_remove();";
22
23ScriptManager.RegisterClientScriptBlock(panel,panel.GetType(),"closepopup",js,true);
24}
25}

需求的js

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

页面上比如

1/**////add按钮需求放在updatepanel里边
2protectedvoidbtnAdd_Click(objectsender,EventArgse)
3{
4/**////自己组参数
5stringurl="aa.aspx?height=180&width=400&Type="+ddlType.SelectedItem.Value;
6url+="&TB_iframe=true&TB_iniframe=true&modal=true";
7Popup.ShowPopup(this.upButtons,url);
8}

缺乏:因为现在我的不需求支撑ie6。所以我也一向没把我的插件改到支撑ie6.如果有那个朋友修正好了费事同享一下。

【修改引荐】

  1. jQuery调用WCF服务传递JSON目标
  2. 学习jQuery有必要知道的几种常用办法
  3. 用XML+XSLT+CSS+JQuery组成ASP.NET网站
  4. 运用jQuery和PHP构建一个受Ajax驱动的Web页面
  5. 运用 jQuery 简化 Ajax 开发
转载请说明出处
知优网 » jQuery弹出层插件Thickbox运用心得

发表评论

您需要后才能发表评论