厭煩了IE瀏覽器的警告窗，伴隨著“咚”恐懼的一聲，讓人感覺(jué)好像有一種壞事情即將來(lái)臨。而如今各瀏覽器對(duì)網(wǎng)頁(yè)的彈出警告框(alert)、確認(rèn)對(duì)話(huà)框(confirm)、輸入框(prompt)顯示效果不一，本文借助hiAlert插件來(lái)為您統(tǒng)一網(wǎng)頁(yè)的對(duì)話(huà)框風(fēng)格。

hiAlert插件是根據(jù) jquery.alerts 改進(jìn)得來(lái)，包括了常用的幾種提示框，還提供了漸變提示條效果，彈出網(wǎng)頁(yè)層效果，它目前兼容各主流瀏覽器。

使用方法

hiAlert提供了五種方法可以使用：

1、hiAlert

hiAlert(content,title,callback);
hiAlert方法提供3個(gè)參數(shù)，content：內(nèi)容，title：對(duì)話(huà)框標(biāo)題，callback：回調(diào)函數(shù)，若無(wú)則不寫(xiě)，如：

hiAlert("歡迎來(lái)到helloweba.com","提示"); 

2、hiConfirm

hiConfirm(content,title,callback);
hiConfirm方法提供3個(gè)參數(shù)，content：內(nèi)容，title：對(duì)話(huà)框標(biāo)題，callback：回調(diào)函數(shù)，若無(wú)則不寫(xiě)，如：

hiConfirm('你確認(rèn)此操作嗎?','確認(rèn)框',function(r){ 
  hiOverAlert('你的反饋是: ' + r); 
}); 

3、hiPrompt

hiPrompt(content,deinput,title,callback);
hiConfirm方法提供4個(gè)參數(shù)，content：內(nèi)容，deinput：輸入框的默認(rèn)值，title：對(duì)話(huà)框標(biāo)題，callback：回調(diào)函數(shù)，若無(wú)則不寫(xiě)，如：

hiPrompt('請(qǐng)?zhí)顚?xiě):','默認(rèn)值','輸入框',function(r){ 
  if(r) hiOverAlert('你填入的內(nèi)容是“' + r+'”'); 
}); 

4、hiBox

hiBox(obj,title,w,h,submit,cancel,callback)
hiBox方法提供7個(gè)參數(shù)，obj: 被指定打開(kāi)的對(duì)象（對(duì)象唯一），即對(duì)話(huà)框中展示的內(nèi)容關(guān)聯(lián)的對(duì)象，title：標(biāo)題，w：寬度，h：高度，submit：可設(shè)置內(nèi)容中的對(duì)象為"submit"，如果有callback，點(diǎn)此返回callback行為，cancel：對(duì)話(huà)框中的取消或關(guān)閉按鈕對(duì)象，callback：回調(diào)函數(shù)，如：

hiBox('#showbox', '標(biāo)題',400,'','','.a_close'); 

5、hiOverAlert

hiOverAlert(content,timeout);
hiOverAlert用來(lái)展示信息提示條效果，類(lèi)似本站文章中的效果，它提供了兩個(gè)參數(shù)，content：提示內(nèi)容，timeout：提示時(shí)間，默認(rèn)為3000，即3秒。如：

hiOverAlert('操作提示條信息',1500); 

在使用時(shí)一定記得加載jQuery庫(kù)和hiAlert插件，以及對(duì)應(yīng)的css樣式。您也可以修改CSS來(lái)進(jìn)一步美化對(duì)話(huà)框。此外，如果需要拖動(dòng)對(duì)話(huà)框效果，則需要載入jquery.ui.draggable.js，可以到了解詳情。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

最新評(píng)論