RELATEED CONSULTING
相關咨詢
選擇下列産品馬上(shàng)在線溝通(tōng)
服務時(shí)間(jiān):9:00-18:00
你(nǐ)可(kě)能遇到了下面的問題
關閉右側工具欄
hiAlert:美化的網頁對話(huà)框
  • 作(zuò)者:admin
  • 發表時(shí)間(jiān):2013-07-02 14:17:11
  • 來(lái)源:未知

厭煩了IE浏覽器(qì)的警告窗,伴随着“咚”恐懼的一聲,讓人(rén)感覺好像有(yǒu)一種壞事情即将來(lái)臨。而如今各浏覽器(qì)對網頁的彈出警告框(alert)、确認對話(huà)框(confirm)、輸入框(prompt)顯示效果不一,本文借助hiAlert插件來(lái)為(wèi)您統一網頁的對話(huà)框風格。

查看演示DEMO 下載源碼

hiAlert插件是根據 jquery.alerts 改進得(de)來(lái),包括了常用的幾種提示框,還(hái)提供了漸變提示條效果,彈出網頁層效果,它目前兼容各主流浏覽器(qì)。

使用方法

hiAlert提供了五種方法可(kě)以使用:

1、hiAlert

hiAlert(content,title,callback);

hiAlert方法提供3個(gè)參數(shù),content:內(nèi)容,title:對話(huà)框标題,callback:回調函數(shù),若無則不寫,如:

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

2、hiConfirm

hiConfirm(content,title,callback);

hiConfirm方法提供3個(gè)參數(shù),content:內(nèi)容,title:對話(huà)框标題,callback:回調函數(shù),若無則不寫,如:

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

3、hiPrompt

hiPrompt(content,deinput,title,callback);

hiConfirm方法提供4個(gè)參數(shù),content:內(nèi)容,deinput:輸入框的默認值,title:對話(huà)框标題,callback:回調函數(shù),若無則不寫,如:

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

4、hiBox

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

hiBox方法提供7個(gè)參數(shù),obj: 被指定打開(kāi)的對象(對象唯一),即對話(huà)框中展示的內(nèi)容關聯的對象,title:标題,w:寬度,h:高(gāo)度,submit:可(kě)設置內(nèi)容中的對象為(wèi)"submit",如果有(yǒu)callback,點此返回callback行(xíng)為(wèi),cancel:對話(huà)框中的取消或關閉按鈕對象,callback:回調函數(shù),如:

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

5、hiOverAlert

hiOverAlert(content,timeout);

hiOverAlert用來(lái)展示信息提示條效果,類似本站(zhàn)文章jNotify:操作(zuò)結果信息提示條中的效果,它提供了兩個(gè)參數(shù),content:提示內(nèi)容,timeout:提示時(shí)間(jiān),默認為(wèi)3000,即3秒(miǎo)。如:

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

在使用時(shí)一定記得(de)加載jQuery庫和(hé)hiAlert插件,以及對應的css樣式。您也可(kě)以修改CSS來(lái)進一步美化對話(huà)框。