jquery插件hiAlert實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)話框美化
厭煩了IE瀏覽器的警告窗,伴隨著“咚”恐懼的一聲,讓人感覺(jué)好像有一種壞事情即將來(lái)臨。而如今各瀏覽器對(duì)網(wǎng)頁(yè)的彈出警告框(alert)、確認(rèn)對(duì)話框(confirm)、輸入框(prompt)顯示效果不一,本文借助hiAlert插件來(lái)為您統(tǒng)一網(wǎng)頁(yè)的對(duì)話框風(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ì)話框標(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ì)話框標(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ì)話框標(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ì)話框中展示的內(nèi)容關(guān)聯(lián)的對(duì)象,title:標(biāo)題,w:寬度,h:高度,submit:可設(shè)置內(nèi)容中的對(duì)象為"submit",如果有callback,點(diǎn)此返回callback行為,cancel:對(duì)話框中的取消或關(guān)閉按鈕對(duì)象,callback:回調(diào)函數(shù),如:
hiBox('#showbox', '標(biāo)題',400,'','','.a_close');
5、hiOverAlert
hiOverAlert(content,timeout);
hiOverAlert用來(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ì)話框。此外,如果需要拖動(dòng)對(duì)話框效果,則需要載入jquery.ui.draggable.js,可以到了解詳情。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- jQuery validate+artdialog+jquery form實(shí)現(xiàn)彈出表單思路詳解
- 分享2個(gè)jQuery插件--jquery.fileupload與artdialog
- 用jquery中插件dialog實(shí)現(xiàn)彈框效果實(shí)例代碼
- jquery插件之信息彈出框showInfoDialog(成功/錯(cuò)誤/警告/通知/背景遮罩)
- 修改jquery里的dialog對(duì)話框插件為框架頁(yè)(iframe) 的方法
- jQuery Dialog 彈出層對(duì)話框插件
- 學(xué)習(xí)從實(shí)踐開(kāi)始之jQuery插件開(kāi)發(fā) 對(duì)話框插件開(kāi)發(fā)
- jBox 2.3基于jquery的最新多功能對(duì)話框插件 常見(jiàn)使用問(wèn)題解答
- 非常強(qiáng)大的 jQuery.AsyncBox 彈出對(duì)話框插件
- 強(qiáng)大的jquery插件jqeuryUI做網(wǎng)頁(yè)對(duì)話框效果!簡(jiǎn)單
- 基于jQuery的彈出警告對(duì)話框美化插件(警告,確認(rèn)和提示)
- jQuery對(duì)話框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法
相關(guān)文章
web開(kāi)發(fā)人員學(xué)習(xí)jQuery的6大理由及jQuery的優(yōu)勢(shì)介紹
jQuery是一個(gè)用來(lái)簡(jiǎn)化HTML客戶端開(kāi)發(fā)的JS(JavaScrip)庫(kù),它支持HTML DOM處理,同時(shí)還融合了部分HTML和CSS2013-01-01
jQuery 中使用JSON的實(shí)現(xiàn)代碼
json 是 Ajax 中使用頻率最高的數(shù)據(jù)格式,在瀏覽器和服務(wù)器中之間的通訊可離不開(kāi)它2011-12-12
$("").click與onclick的區(qū)別示例介紹
onclick是綁定事件,click本身是方法作用是觸發(fā)onclick事件,只要執(zhí)行了元素的click()方法,下面有個(gè)示例,大家可以看看2014-09-09
jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
從后臺(tái)獲取json數(shù)據(jù),將內(nèi)容填充到下拉列表,頁(yè)面做如何處理,接下來(lái),通過(guò)本篇文章給大家實(shí)例講解jquery用ajax方式從后臺(tái)獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表,需要的朋友可以參考下2015-08-08
jQuery 檢查某個(gè)元素在頁(yè)面上是否存在實(shí)例代碼
這篇文章主要介紹了jQuery 檢查某個(gè)元素在頁(yè)面上是否存在實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
防止jQuery ajax Load使用緩存的方法小結(jié)
本篇文章主要是對(duì)防止jQuery ajax Load使用緩存的方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jQuery實(shí)現(xiàn)移動(dòng)端圖片上傳預(yù)覽組件的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)移動(dòng)端圖片上傳預(yù)覽組件的方法,結(jié)合實(shí)例形式分析了jQuery移動(dòng)端圖片上傳預(yù)覽組件的實(shí)現(xiàn)原理、核心代碼與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
簡(jiǎn)單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06

