自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

jQuery彈出層插件Thickbox使用心得

開(kāi)發(fā) 后端
前段時(shí)間在建設(shè)銀行項(xiàng)目上用EXT完整做了個(gè)單頁(yè)系統(tǒng),太趕了,沒(méi)有記錄下任何東西,現(xiàn)在都忘了,怪可惜的。這次項(xiàng)目用JQuery做js的東西。主要用了個(gè)彈出層控件thickbox,自己也擴(kuò)展和修改了一下。這里就記下來(lái),希望對(duì)大家有用吧。

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

就我使用過(guò)程中,Thickbox常見(jiàn)問(wèn)題:

1。跨iframe的彈出層。

癥狀:每次thickbox都只在frame中彈出,而不會(huì)整個(gè)屏幕覆蓋

原因和解決方法:

thickbox使用tb_show()函數(shù)在body后面加入彈出層??梢允褂脀indow.top.tb_show()把彈出層加到頁(yè)面上。我的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);  

這樣只只要在原來(lái)的鏈接上加入TB_iniframe=true即可,如div.aspx?height=180&width=400&TB_iframe=true&TB_iniframe=true&modal=true

2.thickbox只支持一層彈出,不可支持多層彈出。

修改過(guò)的控件已經(jīng)支持(不足:ie6下失效彈出層失效了,占時(shí)沒(méi)解決,哈哈)

3.彈出層關(guān)閉后,文本框無(wú)法聚焦。

癥狀:關(guān)閉彈出層后,原來(lái)頁(yè)面上的文本框無(wú)法聚焦

原因和解決方法:這個(gè)的原因不好說(shuō),很多人都認(rèn)為是ie本身的bug。是由于iframe沒(méi)有移除,即使移除了。內(nèi)存上也么有清除造成的。這也是我猜的。哈哈。解決方法是在tb_remove()中先手動(dòng)移除iframe然后,在強(qiáng)制做垃圾回收,至少我是可以啦。哈哈。代碼如下:


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/**////手動(dòng)移除ifrmae,IE的一個(gè)bug
8$('#TB_iframeContent'+seq).remove();
9$('#TB_window'+seq+',#TB_overlay'+seq+',#TB_HideSelect'+seq).trigger("unload").unbind().remove();
10/**////自己調(diào)用垃圾回收,強(qiáng)制清楚iframe內(nèi)存,解決文本框無(wú)法輸入問(wèn)題。
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中如何動(dòng)態(tài)設(shè)置需要的參數(shù)和關(guān)閉彈出層。

癥狀:thickbox提供的例子都是需要在input后a的class加thickbox,而且參數(shù)什么都是固定的。而我們傳遞的參數(shù)一般需要?jiǎng)討B(tài)。

解決方法,使用asp.netajax,不多說(shuō)了。直接看代碼吧。

封裝一個(gè)popup類(lèi),

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);  

頁(yè)面上例子

1/**////add按鈕需要放在updatepanel里面
2protectedvoidbtnAdd_Click(objectsender,EventArgse)
3{
4/**////自己組參數(shù)
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}

不足:由于現(xiàn)在我的不需要支持ie6。所以我也一直沒(méi)把我的插件改到支持ie6.如果有那個(gè)朋友修改好了麻煩共享一下。

【編輯推薦】

  1. jQuery調(diào)用WCF服務(wù)傳遞JSON對(duì)象
  2. 學(xué)習(xí)jQuery必須知道的幾種常用方法
  3. 用XML+XSLT+CSS+JQuery組建ASP.NET網(wǎng)站
  4. 使用jQuery和PHP構(gòu)建一個(gè)受Ajax驅(qū)動(dòng)的Web頁(yè)面
  5. 使用 jQuery 簡(jiǎn)化 Ajax 開(kāi)發(fā)
責(zé)任編輯:彭凡 來(lái)源: IT專(zhuān)家網(wǎng)
相關(guān)推薦

2011-09-01 10:16:43

JQuery Mobi

2011-01-19 14:57:09

Thunderbird

2009-06-19 11:09:27

Spring AOP

2022-06-27 19:16:53

Obsidian工具

2011-01-07 11:14:17

Nginx負(fù)載均衡負(fù)載均衡

2010-02-01 10:15:07

C++ TinyXML

2009-08-28 10:08:15

C# using語(yǔ)句

2010-03-02 17:33:49

Android 2.0

2009-08-31 10:00:07

C#靜態(tài)變量

2009-08-11 11:42:50

Ruby使用心得

2011-03-15 11:05:03

2011-04-20 13:59:28

愛(ài)普生V100掃描儀

2010-06-01 13:42:37

TortoiseSVN

2010-08-06 11:12:38

FlexCairngorm框架

2009-08-26 13:31:21

JavaScript使

2012-06-07 15:14:52

jQuery

2011-03-30 14:33:57

jQueryJavaScript

2009-07-31 18:37:45

ASP.NET MVC

2020-03-16 08:13:58

SQL性能問(wèn)題

2016-10-07 15:45:59

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)