jquery外掛程式hiAlert實現網頁對話方塊美化

jquery外掛程式hiAlert實現網頁對話方塊美化

 　　hiAlert是一款基於jQuery的資訊提示外掛程式，它支援操作成功、操作失敗和操作提醒三種資訊提示方式。hiAlert瀏覽器安全色性非常好，支援變更提示內容，支援定位提示框的位置，可配置外掛程式參數。

　　厭煩了IE瀏覽器的警告窗，伴隨著“咚”恐懼的一聲，讓人感覺好像有一種壞事情即將來臨。而如今各瀏覽器對網頁的彈出警告框(alert)、確認對話方塊(confirm)、輸入框(prompt)顯示效果不一，本文藉助hiAlert外掛程式來為您統一網頁的對話方塊風格。

　　hiAlert外掛程式是根據 jquery.alerts 改進得來，包括了常用的幾種提示框，還提供了漸層提示條效果，彈出網頁層效果，它目前相容各主流瀏覽器。

　　使用方法

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

　　1、hiAlert

　　hiAlert(content,title,callback);

　　hiAlert方法提供3個參數，content：內容，title：對話方塊標題，callback：回呼函數，若無則不寫，如：

　　?

1	hiAlert("歡迎來到helloweba.com","提示");

　　2、hiConfirm

　　hiConfirm(content,title,callback);

　　hiConfirm方法提供3個參數，content：內容，title：對話方塊標題，callback：回呼函數，若無則不寫，如：

　　?

1 2 3

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

　　3、hiPrompt

　　hiPrompt(content,deinput,title,callback);

　　hiConfirm方法提供4個參數，content：內容，deinput：輸入框的預設值，title：對話方塊標題，callback：回呼函數，若無則不寫，如：

　　?

1 2 3

hiPrompt('請填寫:','預設值','輸入框',function(r){    if(r) hiOverAlert('你填入的內容是“' + r+'”');  });

　　4、hiBox

　　hiBox(obj,title,w,h,submit,cancel,callback)

　　hiBox方法提供7個參數，obj: 被指定開啟的對象(對象唯一)，即對話方塊中展示的內容關聯的對象，title：標題，w：寬度，h：高度，submit：可設定內容中的對象為"submit"，如果有callback，點此返回callback行為，cancel：對話方塊中的取消或關閉按鈕對象，callback：回呼函數，如：

　　?

1	hiBox('#showbox', '標題',400,'','','.a_close');

　　5、hiOverAlert

　　hiOverAlert(content,timeout);

　　hiOverAlert用來展示資訊提示條效果，類似本站文章中的效果，它提供了兩個參數，content：提示內容，timeout：提示時間，預設為3000，即3秒。如：

　　?

1	hiOverAlert('操作提示條資訊',1500);

　　在使用時一定記得載入jQuery庫和hiAlert外掛程式，以及對應的css樣式。您也可以修改CSS來進一步美化對話方塊。此外，如果需要拖動對話方塊效果，則需要載入jquery.ui.draggable.js，可以到瞭解詳情。