標題: alertify.js - 美化訊息視窗、取代瀏覽器原生訊息框的函式庫 [打印本頁]
作者: wmh 時間: 2013-8-4 21:42 標題: alertify.js - 美化訊息視窗、取代瀏覽器原生訊息框的函式庫
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
取代瀏覽器的訊息框、確認框及輸入框：
[jsg.example]
<link href="//jsgears.googlecode.com/svn/trunk/bootstrap-2.3.2/css.jsg/bootstrap.min.css" rel="stylesheet">
<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/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.min.js"></script>
<div class="jsg">
<input class="btn" type="button" value="訊息框" id="alert-btn">
<input class="btn" type="button" value="確認框" id="confirm-btn">
<input class="btn" type="button" value="輸入框" id="prompt-btn">
</div>
[/jsg.example]
相對應的程式碼如下：
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 的訊息通知，請玩玩看下面的範例：
[jsg.example]
<div class="jsg">
<input class="btn" type="button" value="標準訊息通知" id="log-btn">
<input class="btn" type="button" value="成功訊息通知" id="success-btn">
<input class="btn" type="button" value="錯誤訊息通知" id="error-btn">
</div>
<script>
$j = jQuery.noConflict()
$j(function () {
$j('#alert-btn').click(function () {
alertify.alert('Hi! 這是訊息框，請按下 ok!');
});
$j('#confirm-btn').click(function () {
alertify.confirm('這是確認框，你有兩個選擇：', function (e) {
if (e) {
alertify.log('你按下了 ok');
} else {
alertify.log('你按下了 cancel');
}
});
});
$j('#prompt-btn').click(function () {
alertify.prompt("請留下你的意見：", function (e, str) {
if (e) {
alertify.log('你的意見：' + str);
} else {
alertify.log('你按下了 cancel');
}
}, "這個網站棒透了！");
});
$j('#log-btn').click(function () {
alertify.log('Hi! 這是標準的訊息通知！');
});
$j('#success-btn').click(function () {
alertify.success('Hi! 這是成功的訊息通知！');
});
$j('#error-btn').click(function () {
alertify.error('Hi! 這是錯誤的訊息通知！');
});
});
</script>
[/jsg.example]
相對應的程式如下：
alertify.log('Hi! 這是標準的訊息通知！');
alertify.success('Hi! 這是成功的訊息通知！');
alertify.error('Hi! 這是錯誤的訊息通知！');
.
更詳細的範例及佈景主題
alertify.js 的用法相當簡單，如果覺得上面的基本範例還不夠用，官方網站有更多範例提供更多參數來呈現訊息。此外還可以有其他樣式可選，比如說類似 Bootstrap v2 風格的視窗及按鈕等等。
官方網站：http://fabien-d.github.io/alertify.js/
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|