厭煩了IE瀏覽器的警告窗,伴隨著“咚”恐懼的一聲,讓人感覺好像有一種壞事情即將來臨。而如今各瀏覽器對網(wǎng)頁的彈出警告框(alert)、確認對話框(confirm)、輸入框(prompt)顯示效果不一,本文借助hiAlert插件來為您統(tǒng)一網(wǎng)頁的對話框風格。
hiAlert插件是根據(jù) jquery.alerts 改進得來,包括了常用的幾種提示框,還提供了漸變提示條效果,彈出網(wǎng)頁層效果,它目前兼容各主流瀏覽器。
使用方法
hiAlert提供了五種方法可以使用:
1、hiAlert
hiAlert(content,title,callback);
hiAlert方法提供3個參數(shù),content:內(nèi)容,title:對話框標題,callback:回調(diào)函數(shù),若無則不寫,如:
hiAlert("歡迎來到helloweba.com","提示"); 2、hiConfirm
hiConfirm(content,title,callback);
hiConfirm方法提供3個參數(shù),content:內(nèi)容,title:對話框標題,callback:回調(diào)函數(shù),若無則不寫,如:
hiConfirm('你確認此操作嗎?','確認框',function(r){ hiOverAlert('你的反饋是: ' + r); }); 3、hiPrompt
hiPrompt(content,deinput,title,callback);
hiConfirm方法提供4個參數(shù),content:內(nèi)容,deinput:輸入框的默認值,title:對話框標題,callback:回調(diào)函數(shù),若無則不寫,如:
hiPrompt('請?zhí)顚?','默認值','輸入框',function(r){ if(r) hiOverAlert('你填入的內(nèi)容是“' + r+'”'); }); 4、hiBox
hiBox(obj,title,w,h,submit,cancel,callback)
hiBox方法提供7個參數(shù),obj: 被指定打開的對象(對象唯一),即對話框中展示的內(nèi)容關(guān)聯(lián)的對象,title:標題,w:寬度,h:高度,submit:可設(shè)置內(nèi)容中的對象為"submit",如果有callback,點此返回callback行為,cancel:對話框中的取消或關(guān)閉按鈕對象,callback:回調(diào)函數(shù),如:
hiBox('#showbox', '標題',400,'','','.a_close'); 5、hiOverAlert
hiOverAlert(content,timeout);
hiOverAlert用來展示信息提示條效果,類似本站文章中的效果,它提供了兩個參數(shù),content:提示內(nèi)容,timeout:提示時間,默認為3000,即3秒。如:
hiOverAlert('操作提示條信息',1500); 在使用時一定記得加載jQuery庫和hiAlert插件,以及對應(yīng)的css樣式。您也可以修改CSS來進一步美化對話框。此外,如果需要拖動對話框效果,則需要載入jquery.ui.draggable.js,可以到了解詳情。
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
新聞熱點
疑難解答