alertify.js - 美化訊息視窗、取代瀏覽器原生訊息框的函式庫
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] alertify.js[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://fabien-d.github.io/alertify.js/[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 用來取代瀏覽器原生訊息框的 JS 函式庫
alertify.js 提供了 alert、confirm 以及 prompt 三個函數用來取代瀏覽器相對應的這三個功能，並且有比較美觀的介面。
[b][size=4][color=Indigo]引用[/color][/size][/b]
你可以直接從 [url=http://jsgears.com/thread-2308-1-1.html]cdnjs[/url] 引用 alertify.js 的 js 和 css 檔：
[code html]
<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>
[/code].
[b][size=4][color=Indigo]範例 1[/color][/size][/b]
取代瀏覽器的訊息框、確認框及輸入框：
[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]
相對應的程式碼如下：
[code js]
alertify.alert('Hi! 這是訊息框，請按下 ok!');
[/code]
[code js]
alertify.confirm('這是確認框，你有兩個選擇：', function (e) {
if (e) {
alertify.log('你按下了 ok');
} else {
alertify.log('你按下了 cancel');
}
});
[/code]
[code js]
alertify.prompt("請留下你的意見：", function (e, str) {
if (e) {
alertify.log('你的意見：' + str);
} else {
alertify.log('你按下了 cancel');
}
}, "這個網站棒透了！");
[/code].
[b][size=4][color=Indigo]範例 2[/color][/size][/b]
除了上面看到的三個功能外，還有類似 [url=http://jsgears.com/thread-208-1-2.html]jGrowl[/url] 的訊息通知，請玩玩看下面的範例：
[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]
相對應的程式如下：
[code js]
alertify.log('Hi! 這是標準的訊息通知！');
[/code]
[code js]
alertify.success('Hi! 這是成功的訊息通知！');
[/code]
[code js]
alertify.error('Hi! 這是錯誤的訊息通知！');
[/code].
[b][size=4][color=Indigo]更詳細的範例及佈景主題[/color][/size][/b]
alertify.js 的用法相當簡單，如果覺得上面的基本範例還不夠用，官方網站有更多範例提供更多參數來呈現訊息。此外還可以有其他樣式可選，比如說類似 Bootstrap v2 風格的視窗及按鈕等等。
官方網站：[url]http://fabien-d.github.io/alertify.js/[/url]
頁:
[1]