jQuery提示插件alertify使用指南
1.alertify插件功能
主要實(shí)現(xiàn)提示功能,用于代替js中的alert,confirm,prompt,顯示友好的提示框
2.alertify使用方法
1.使用的文件
主要使用三個(gè)文件,兩個(gè)css(alertify.core.css,alertify.default.css),用于設(shè)置提示框的樣式。一個(gè)js(alertify.min.js或alertify.js),用于實(shí)現(xiàn)提示框的功能。
2.實(shí)現(xiàn)提示框代碼
alertify使用非常簡(jiǎn)單,主要步驟為:初始化(初始化alertify)-》綁定(綁定事件)
如實(shí)現(xiàn)簡(jiǎn)單的提示框、確認(rèn)框和提示框
var $ = function (id) { return document.getElementById(id); }, //初始化操作 reset = function () { alertify.set({ labels : { ok : "確認(rèn)", cancel : "取消" }, delay : 5000, buttonReverse : false, buttonFocus : "ok" }); }; //綁定 $("alert").onclick = function () { reset(); alertify.alert("提示框"); return false; }; //綁定 $("confirm").onclick = function () { reset(); alertify.confirm("確認(rèn)框", function (e) { if (e) { alertify.success("點(diǎn)擊確認(rèn)"); } else { alertify.error("點(diǎn)擊取消"); } }); return false; }; //綁定 $("prompt").onclick = function () { reset(); alertify.prompt("提示輸入框", function (e, str) { if (e) { alertify.success("點(diǎn)擊確認(rèn),輸入內(nèi)容為: " + str); } else { alertify.error("點(diǎn)擊取消"); } }, "默認(rèn)值"); return false; };
顯示結(jié)果(輸入提示框):
4.alertify修改樣式
主要是修改兩個(gè)css文件(alertify.core.css,alertify.default.css),也可以覆蓋使用。如在頁(yè)面中加入
.alertify{ width:350px; margin-left: -205px; border:2px solid #4ba9e6; background:#f3faff; border-radius:0; }
修改后顯示結(jié)果:
alertify使用說(shuō)明
alertify是由html5+css3開(kāi)發(fā)的插件,所以完美的支持html5+css3的瀏覽器。在測(cè)試過(guò)程過(guò),alertify在chrome與火狐瀏覽器中顯示效果是完美的,但是在ie8一下,顯示效果有所不同,如圓角框、陰影、動(dòng)畫(huà)特效等不會(huì)顯示。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- JQuery的Alert消息框插件使用介紹
- 自編jQuery插件實(shí)現(xiàn)模擬alert和confirm
- jquery.alert 彈出式復(fù)選框?qū)崿F(xiàn)代碼
- jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
- jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
- jQuery彈出(alert)select選擇的值
- 使用jQuery實(shí)現(xiàn)更改默認(rèn)alert框體
- 基于jquery ui的alert,confirm方案(支持換膚)
- jquery模擬alert的彈窗插件
- jquery插件hiAlert實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)話框美化
- jQuery基于函數(shù)重載實(shí)現(xiàn)自定義Alert函數(shù)樣式的方法
相關(guān)文章
jquery 最簡(jiǎn)單易用的表單驗(yàn)證插件
jquery 最簡(jiǎn)單易用的表單驗(yàn)證插件,不論是從應(yīng)用還是學(xué)習(xí)插件的寫(xiě)法都是值得一看的。2010-02-02jQuery實(shí)現(xiàn)平滑滾動(dòng)的標(biāo)簽分欄切換效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)平滑滾動(dòng)的標(biāo)簽分欄切換效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jquery中實(shí)現(xiàn)簡(jiǎn)單的tabs插件功能的代碼
jquery改變了程序員寫(xiě)javascript的方式。作為jquery的愛(ài)好者和新手,最近我學(xué)會(huì)了用寥寥幾句jquery代碼實(shí)現(xiàn)類似tabs插件的功能,相信此文能為許多剛?cè)腴T(mén)的jquery愛(ài)好者和想實(shí)現(xiàn)tabs插件功能的朋友帶來(lái)一些幫助。2011-03-03jQuery實(shí)現(xiàn)的支持IE的html滑動(dòng)條
本文給大家分享的是一段使用jQuery實(shí)現(xiàn)支持IE的html滑動(dòng)條代碼,效果非常不錯(cuò),這里推薦給大家,希望大家能夠喜歡。2015-03-03jQuery時(shí)間日期三級(jí)聯(lián)動(dòng)(推薦)
這篇文章主要介紹了jQuery時(shí)間日期三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)代碼,代碼簡(jiǎn)答易懂,非常實(shí)用,需要的朋友參考下吧2016-11-11jqPaginator結(jié)合express實(shí)現(xiàn)分頁(yè)展示內(nèi)容效果
這篇文章主要為大家詳細(xì)介紹了jqPaginator結(jié)合express實(shí)現(xiàn)分頁(yè)展示內(nèi)容效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04jQuery拋物線運(yùn)動(dòng)實(shí)現(xiàn)方法(附完整demo源碼下載)
這篇文章主要介紹了jQuery拋物線運(yùn)動(dòng)實(shí)現(xiàn)方法,以完整實(shí)例形式分析了jQuery物體運(yùn)動(dòng)的實(shí)現(xiàn)技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01jquery判斷RadioButtonList和RadioButton中是否有選中項(xiàng)示例
用jquery判斷RadioButtonList和RadioButton中是否有選中項(xiàng),下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-09-09jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法
這篇文章主要介紹了jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法的相關(guān)資料,需要的朋友可以參考下2015-12-12