·jQuery弹出层插件Thickbox使用心得
来源:互联网 发布:sql的添加语句序列 编辑:程序博客网 时间:2024/06/07 00:21
前段时间在建设银行项目上用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然后,在强制做垃圾回收,至少我是可以啦。哈哈。代码如下:
1functiontb_remove(){2varseq=PopSeq();3$("#TB_imageOff"+seq).unbind("click");4$("#TB_closeWindowButton"+seq).unbind("click");56$("#TB_window"+seq).fadeOut("fast",function(){7/**////手动移除ifrmae,IE的一个bug8$('#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"){//ifIE614$("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类,
1publicclassPopup2{3/**////<summary>4///showthepopupdiv5///</summary>6///<paramname="panel">containerthebutton</param>7///<paramname="url"></param>8publicstaticvoidShowPopup(UpdatePanelpanel,stringurl)9{10ScriptManager.RegisterClientScriptBlock(panel,panel.GetType(),"ShowPopup","ShowPopup('"+url+"')",true);11}1213/**////<summary>14///15///</summary>16///<paramname="panel"></param>17///<paramname="page">requestpage</param>18publicstaticvoidClosePopup(UpdatePanelpanel)19{2021stringjs="self.parent.tb_remove();";2223ScriptManager.RegisterClientScriptBlock(panel,panel.GetType(),"closepopup",js,true);24}25}
需要的js
- functionShowPopup(url){
- window.top.tb_show(null,url,false);
- }
页面上例子
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.如果有那个朋友修改好了麻烦共享一下。
- Jquery弹出层插件Thickbox使用心得
- jQuery弹出层插件Thickbox使用心得
- ·jQuery弹出层插件Thickbox使用心得
- jQuery弹出插件thickbox使用心得
- jquery 弹出层(thickbox)使用
- jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等
- jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等
- Jquery插件Thickbox的使用
- thickbox 弹出层
- jquery 的 thickbox 弹出可拖动的div层
- jquery插件thickbox遮罩层的的使用
- jquery 弹出层 插件
- Jquery 弹出层插件
- jquery 弹出层插件
- jquery弹出层插件
- WordPress 教程:在 WordPress 后台使用 ThickBox 制作弹出层
- jquery插件thickbox
- jQuery插件ThickBox
- CKEditor和CKFinder整合实现上传下载功能
- BFS广度优先搜索
- Android 多线程下载源码实现详细注释
- 关于跨浏览器测试那点事(转载)
- ThinkPHP 自动验证及验证规则详解!
- ·jQuery弹出层插件Thickbox使用心得
- IPicture接口的使用例子
- 关于env的说明
- 关于__init、__initdata和__exit、__exitdata的学习笔记
- 自己编写的more命令
- android桌面显示图标修改.
- printf使用隐患
- 原来我一直理解错了css的position
- UIApplication深入研究