alertify提示外掛使用方式簡單介紹
這是一款由jQuery實現的彈出視窗式提示外掛,非常的好用和人性化。
下面就對它作用和使用方式做一下簡單介紹。
一.lertify外掛功能:
實現了彈出式提示框效果。
用於代替原生js中的alert,confirm,prompt,顯示友好的提示框。
二.alertify使用方法:
(1).使用的檔案:
主要使用三個檔案。
兩個css(alertify.core.css,alertify.default.css),用於設定提示框的樣式。
一個js(alertify.min.js或alertify.js),用於實現提示框的功能。
(2).實現提示框程式碼
alertify使用非常簡單,主要步驟為:初始化(初始化alertify)-》繫結(繫結事件)
如實現簡單的提示框、確認框和提示框。
[JavaScript] 純文字檢視 複製程式碼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("點選確認,輸入內容為: " + str); } else { alertify.error("點選取消"); } }, "預設值"); return false; };
顯示結果(輸入提示框):
三.alertify修改樣式:
主要是修改兩個css檔案(alertify.core.css,alertify.default.css),也可以覆蓋使用。如在頁面中加入:
[CSS] 純文字檢視 複製程式碼.alertify{ width:350px; margin-left: -205px; border:2px solid #4ba9e6; background:#f3faff; border-radius:0; }
修改後顯示結果:
瀏覽器相容性:
alertify是由html5+css3開發的外掛,所以完美的支援html5+css3的瀏覽器。
alertify在chrome與火狐瀏覽器中顯示效果是完美的.
在ie8以下,顯示效果有所不同,如圓角框、陰影、動畫特效等不會顯示。
相關文章
- jquery.cookie外掛使用簡單介紹jQueryCookie
- YprogressBar進度條外掛使用簡單介紹
- jQuery外掛Tmpl使用方法簡單介紹jQuery
- 自定義jquery外掛簡單介紹jQuery
- jQuery自定義外掛簡單介紹jQuery
- jQuery外掛製作簡單介紹jQuery
- zTree外掛常鍵用法簡單介紹
- jQuery外掛開發流程簡單介紹jQuery
- jcrop+Fileapi圖片上傳裁剪外掛使用簡單介紹API
- jquery.lazyload.js外掛用法簡單介紹jQueryJS
- cluetip關鍵詞連結外掛用法簡單介紹
- Lightbox_me彈出層外掛使用說明簡單介紹
- jquery自定義事件的使用方式簡單介紹jQuery事件
- chatgpt~外掛介紹ChatGPT
- javascript函式呼叫方式簡單介紹JavaScript函式
- 網頁中使用css的幾種方式簡單介紹網頁CSS
- rematch常用外掛介紹REM
- 3.03 模組外掛介紹
- Maven Assembly外掛介紹Maven
- javascript呼叫函式的方式簡單介紹JavaScript函式
- javascript實現繼承方式簡單介紹JavaScript繼承
- 網址url相關引數獲取處理外掛簡單介紹
- logstash常用外掛介紹
- MySQL審計外掛介紹MySql
- 【轉】jenkins外掛pipeline使用介紹Jenkins
- 簡單介紹redis加鎖常用幾種方式Redis
- js清除閉包的通常方式簡單介紹JS
- javascript訪問物件屬性方式簡單介紹JavaScript物件
- 簡單介紹nginx 變數使用Nginx變數
- webstorm簡單介紹,webstrom基本使用WebORM
- Oracle中的外連線簡單介紹(轉)Oracle
- jquery實現的元素居中外掛簡單介紹jQuery
- MySQL連線控制外掛介紹MySql
- 常用Maven外掛介紹(轉載)Maven
- 簡單介紹Go語言常用的打log方式Go
- css引入外部css檔案的方式簡單介紹CSS
- javascript函式宣告兩種主要方式簡單介紹JavaScript函式
- js宣告陣列的幾種方式簡單介紹JS陣列