jQuery提示插件alertify使用指南
1.alertify插件功能
主要實現(xiàn)提示功能,用于代替js中的alert,confirm,prompt,顯示友好的提示框
2.alertify使用方法
1.使用的文件
主要使用三個文件,兩個css(alertify.core.css,alertify.default.css),用于設(shè)置提示框的樣式。一個js(alertify.min.js或alertify.js),用于實現(xiàn)提示框的功能。
2.實現(xiàn)提示框代碼
alertify使用非常簡單,主要步驟為:初始化(初始化alertify)-》綁定(綁定事件)
如實現(xiàn)簡單的提示框、確認框和提示框
var $ = function (id) { return document.getElementById(id); }, //初始化操作 reset = function () { alertify.set({ labels : { ok : "確認", cancel : "取消" }, delay : 5000, buttonReverse : false, buttonFocus : "ok" }); }; //綁定 $("alert").onclick = function () { reset(); alertify.alert("提示框"); return false; }; //綁定 $("confirm").onclick = function () { reset(); alertify.confirm("確認框", function (e) { if (e) { alertify.success("點擊確認"); } else { alertify.error("點擊取消"); } }); return false; }; //綁定 $("prompt").onclick = function () { reset(); alertify.prompt("提示輸入框", function (e, str) { if (e) { alertify.success("點擊確認,輸入內(nèi)容為: " + str); } else { alertify.error("點擊取消"); } }, "默認值"); return false; };
顯示結(jié)果(輸入提示框):
4.alertify修改樣式
主要是修改兩個css文件(alertify.core.css,alertify.default.css),也可以覆蓋使用。如在頁面中加入
.alertify{ width:350px; margin-left: -205px; border:2px solid #4ba9e6; background:#f3faff; border-radius:0; }
修改后顯示結(jié)果:
alertify使用說明
alertify是由html5+css3開發(fā)的插件,所以完美的支持html5+css3的瀏覽器。在測試過程過,alertify在chrome與火狐瀏覽器中顯示效果是完美的,但是在ie8一下,顯示效果有所不同,如圓角框、陰影、動畫特效等不會顯示。
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- JQuery的Alert消息框插件使用介紹
- 自編jQuery插件實現(xiàn)模擬alert和confirm
- jquery.alert 彈出式復選框?qū)崿F(xiàn)代碼
- jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
- jquery SweetAlert插件實現(xiàn)響應(yīng)式提示框
- jQuery彈出(alert)select選擇的值
- 使用jQuery實現(xiàn)更改默認alert框體
- 基于jquery ui的alert,confirm方案(支持換膚)
- jquery模擬alert的彈窗插件
- jquery插件hiAlert實現(xiàn)網(wǎng)頁對話框美化
- jQuery基于函數(shù)重載實現(xiàn)自定義Alert函數(shù)樣式的方法
相關(guān)文章
jqPaginator結(jié)合express實現(xiàn)分頁展示內(nèi)容效果
這篇文章主要為大家詳細介紹了jqPaginator結(jié)合express實現(xiàn)分頁展示內(nèi)容效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04jQuery拋物線運動實現(xiàn)方法(附完整demo源碼下載)
這篇文章主要介紹了jQuery拋物線運動實現(xiàn)方法,以完整實例形式分析了jQuery物體運動的實現(xiàn)技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01jquery判斷RadioButtonList和RadioButton中是否有選中項示例
用jquery判斷RadioButtonList和RadioButton中是否有選中項,下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09jQuery點擊改變class并toggle及toggleClass()方法定義用法
這篇文章主要介紹了jQuery點擊改變class并toggle及toggleClass()方法定義用法的相關(guān)資料,需要的朋友可以參考下2015-12-12