动手完善个性化弹出提示框的过程及乐趣
????? 申明：本人并不反對提倡用js框架的朋友以及觀點,同時本人有些東西都是從框架中學來的。
????? 個性化提示框圖例:
????? 1:純文本提示。
????
?????? 2:帶選擇按鈕的提示框。
?????? 源碼下載
????? 主旨：現今的js框架已經非常成熟，這是不爭的事實，但用起來多少也有些值得考慮的地方：
??????????1:好的js框架都不小，無論怎么優化，怎么壓縮，一般都有幾十K；
??????????2:要想應用js框架，首先你要去花一段時間去學習，了解它，往往這個過程還有點漫長，常?？吹接械呐笥褑栐谀衬晨蚣苤腥绾螌崿F某些功能。
??????????3:應用js框架，就說明你要依賴它，大多開發員只會應用框架本身提供的功能，沒有的功能就顯得有點吃力，除非你自己的js水平相當。
??
????? 我喜歡的做法：看到好的框架中提供了一些不錯的功能，我們可以學著從框架中提取你感興趣的部分，例如prototype在展示圖片的功能就相當不錯，是有動畫效果的，提取出來后放進你整理的js文件中，其它的冗余的js代碼你并不需要。
????? 整理后的所得：
??????? 1:js閱讀能力進一步加強。
??????? 2:知道動態注冊腳本的執行時間，可能發生在頁面沒并沒有完全加載的情況下。
??????? 3:在js中應用了委托。
??????? 4:知道了<script>標記中的defer含義及用法。
??????? 5:美化網頁，提高用戶體驗。
???? 更新:實現OnClientClick="return confirm('確認刪除嗎?')"功能。
????????????本來我的想法是這樣的：???OnClientClick="return IsDelete();",最后發現回調完后并不返回結果。
<script?language?="javascript"?type?="text/javascript">?//是否刪除?
var?_confirm=false;?
function?IsDelete()?
{?
alert(convert("確定刪除嗎?"),callback);?
return?_confirm;?
}?
function?callback(value)?
{?
if(value=="1")?
{_confirm=?true;}?
}?
</script>?
????
???? 解決方案：OnClientClick='return IsDelete(this.name);'利用__dopostback方法手動去觸發點擊按鈕事件。不知道大家有沒有更好的解決方案，這個方案還有一個問題，就是需要設置頁面屬性EnableEventValidation ="false",否則會報錯。
//是否刪除var?_confirm=false;
//要執行的事件
var?sName;
function?IsDelete(_sName)
{
???sName=_sName;
??alert(convert("確定刪除嗎?"),callback);
??return?_confirm;
}
//回調方法
function?callback(value)
{
??//alert(value);
??if(value=="1")
??{
????_confirm=?true;
????//觸發事件
????__doPostBack(sName?,null);
????
??}
??
}
????
????? 原因：這次我在作網頁時，老感覺windows自帶的那個alert功能太過簡陋，想到以前學習ajax時，有一個現成的例子，就想拿過來用。代碼全部加起來不過100行，用的時候發現如下問題:
????? 第一：只支持單行文本顯示。
????? 第二：只支持文本提示，不支持帶確認按鈕的功能，就相當于windows的confirm。
???? 于是從網上再搜索一個，發現以上兩點功能都解決了，但有一個重要問題，遮罩層以及html元素都是write出來的，造成不能屏蔽下拉框以及flash。對于這種情況如果不動手解決的話，很難實現你要的效果，除非用js框架。
???? 改造過程：
????? 第一：由于之前的版本很好的解決了下拉框以及flash的屏蔽問題，所有就選用它。
??????第二：解決只支持單行文本的限制。原方法的提示內容是放在一個p標記中，
???txt.style.margin="1em?0"
???txt.setAttribute("id","msgTxt");//設置id
???txt.innerHTML="<font?color=\"Black\">"+str+"</font>";//設置提示內容
?
????? 我改用div標記，然后對傳入的文本做一個約束，以\n為分隔符，程序中把所有的\n換成html的換行符<br/>。
//把文件中的換行符換成html的<br/>???while(str.indexOf("\n")>-1){?
??????str=str.replace("\n","<br\/>");?
????}?
var?txt=top.document.createElement("div");//顯示提示內容的容器
???txt.setAttribute('id','divJMAlertContent');
???txt.setAttribute("align","left");
???txt.style.width?=??"60%";
???txt.innerHTML=str;//設置提示內容
???top.document.getElementById("msgDiv").appendChild(txt);//添加提示內容
??????
?????? 發現問題：
????????? 1:換行后，文本間距過大，于是找同事幫忙終于發現了問題所在。原文中由于是顯示一行文本，所有有一個行間距的設置：????
???????? 修改后的代碼:????
//解決多行文件換行間距大的問題msgObj.style.lineHeight?=?"23px";
?????????? 2:當文本行數較多時，提示框顯示不全所有的文本，原代碼中設置了提示框的高度。????
msgh=100;//提示窗口的高度???????? 修改后的代碼：???????
//根據文本的行數改變消息框的高度????var?iHeight=(str.split('\n').length+1)*23;
????msgObj.style.height?=iHeight?+?"px";
???????
???? ?第三：當程序中動態注冊腳本后報錯，就是點擊一個服務器按鈕后，動態執行一段代碼：原代碼：?????
string?strmes;????????????strmes?=?"<script?language='javascript'>alter('aaa');</script>";
????????????Page.ClientScript.RegisterStartupScript(this.GetType(),?"alert",?strmes?);
??????
????????? 原因:在頁面沒有完全加載的情況下調用是document.body.appendChild。修改后的代碼如下：?就是在script標記中加上defer屬性，這個屬性要求這段代碼在頁面加載完成之后再執行。
string?strmes;????????????strmes?=?"<script?language='javascript'?defer?=\"defer\">firm();</script>";
????????????Page.ClientScript.RegisterStartupScript(this.GetType(),?"alert",?strmes?);
??????????
??????? 第四：增加確認和否定按鈕功能。如果只是彈出一個提示框，那么這種confirm還是那么難看，決定再改造下。
???????? 1:再提示文本div下面來增加一個相關按鈕的div。
???????? 2:增加一個確認按鈕，一個包含空格字符串的div(為了美化),一個否定按鈕。
???????? 3:對外設置一個全局變量用來表明按鈕的值，如點擊確認按鈕返回1,否定按鈕返回0。??????????
var?MB_value?=?-1;
???????? 4:設置一個委托，使用戶能根據返回值調用相應的回調方法。????????
?//委托方法var?MB_CALLBACK?=?null;
???????? 5:頁面調用代碼，需要寫一個回調方法。
//提示用戶是否需要登錄function?firm()
{
??????alert(convert("您是注冊用戶嗎？"),callback)
}
function?callback(value)
{
??if(value=="1")
??{
?????//中轉到登錄頁面
?????location.href="/Login.aspx?nextUrl="+escape(window.location.href?);
??}
}
????????
???????? 增加按鈕容器相關代碼如下：
var?btnDiv=top.document.createElement("div");//顯示相關按鈕的容器???btnDiv.setAttribute('id','divJMAlertBtn');
???btnDiv.setAttribute("align","left");
???btnDiv.style.width?=??"60%";
???top.document.getElementById("msgDiv").appendChild(btnDiv);//添加按鈕內容
???
???//添加提示按鈕
???//確定按鈕
???var?btnOK=top.document.createElement("input")
????btnOK.setAttribute("id","btnOK");
????//msgBoxTitle.classname="msgbox_title";??
????btnOK.setAttribute("type","button");
????btnOK.setAttribute("value","是");
????btnOK.style.width="30px";
????btnOK.onclick=function(){//單擊確認按鈕
????????
????????top.document.body.removeChild(bgObj);
????????top.document.getElementById("msgDiv").removeChild(title);
????????top.document.body.removeChild(msgObj);
????????showSelectBoxes();
????????showObjectFlash();
????????//按鈕賦值
????????MB_value=1;
????????if(MB_CALLBACK!=null)
????????{MB_CALLBACK(MB_value);}
????????
????????}
????????
????top.document.getElementById("divJMAlertBtn").appendChild(btnOK);//添加確認按鈕
????
????//中間加一些空格
????var?msgSpace=top.document.createElement("span")
????msgSpace.setAttribute("id","msgSpace");
????msgSpace.innerHTML=" ";
????top.document.getElementById("divJMAlertBtn").appendChild(msgSpace);
????
????//否按鈕
???var?btnNO=top.document.createElement("input")
????btnNO.setAttribute("id","btnNO");
????//msgBoxTitle.classname="msgbox_title";??
????btnNO.setAttribute("type","button");
????btnNO.setAttribute("value","否");
????btnNO.style.width="30px";
????btnNO.onclick=function(){//單擊否按鈕
????????
????????top.document.body.removeChild(bgObj);
????????top.document.getElementById("msgDiv").removeChild(title);
????????top.document.body.removeChild(msgObj);
????????showSelectBoxes();
????????showObjectFlash();
????????//按鈕賦值
????????MB_value=0;
????????if(MB_CALLBACK!=null)
????????{MB_CALLBACK(MB_value);}
????????
????????}
????????
????top.document.getElementById("divJMAlertBtn").appendChild(btnNO);//添加否按鈕
???
????????
????? 第五：判斷是純顯示提示文本呢，還是顯示一個帶確認的選擇提示框。上面的方法中總會顯示按鈕，我們可以根據第二個參數是否存在來做為判斷依據，如果沒有回調方法就認為是顯示文本，否則顯示按鈕和文本。
???
???{?
?????//判斷是否需要顯示確認按鈕
?????//如果沒有回高方法則認為不需要顯示按鈕
?????return;
???}
?
??????? 說明：本人js及美化都特別差，也只能稍微的修改下別人的作品，對界面要求高的朋友望見諒。
總結
以上是生活随笔為你收集整理的动手完善个性化弹出提示框的过程及乐趣的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL 5.1中IN查询不要用到NU
- 下一篇： 《青春飞扬》诗集出版历程与思考分享 之三