alertify.js
http://fabien-d.github.io/alertify.js/
用來取代瀏覽器原生訊息框的 JS 函式庫
alertify.js 提供了 alert、confirm 以及 prompt 三個函數用來取代瀏覽器相對應的這三個功能,並且有比較美觀的介面。
引用
你可以直接從 cdnjs 引用 alertify.js 的 js 和 css 檔:
<link href="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.core.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.default.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.min.js"></script>
.
範例 1
取代瀏覽器的訊息框、確認框及輸入框:
相對應的程式碼如下:
alertify.alert('Hi! 這是訊息框,請按下 ok!');
alertify.confirm('這是確認框,你有兩個選擇:', function (e) {
if (e) {
alertify.log('你按下了 ok');
} else {
alertify.log('你按下了 cancel');
}
});
alertify.prompt("請留下你的意見:", function (e, str) {
if (e) {
alertify.log('你的意見:' + str);
} else {
alertify.log('你按下了 cancel');
}
}, "這個網站棒透了!");
.
範例 2
除了上面看到的三個功能外,還有類似 jGrowl 的訊息通知,請玩玩看下面的範例:
相對應的程式如下:
alertify.log('Hi! 這是標準的訊息通知!');
alertify.success('Hi! 這是成功的訊息通知!');
alertify.error('Hi! 這是錯誤的訊息通知!');
.
更詳細的範例及佈景主題
alertify.js 的用法相當簡單,如果覺得上面的基本範例還不夠用,官方網站有更多範例提供更多參數來呈現訊息。此外還可以有其他樣式可選,比如說類似 Bootstrap v2 風格的視窗及按鈕等等。
官方網站:http://fabien-d.github.io/alertify.js/ |