快速开始
通过 RawGit
<-- 标准版 -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/alertify.js"></script>
<-- angular模块 -->
<script src="https://cdn.rawgit.com/alertifyjs/alertify.js/v1.0.10/dist/js/ngAlertify.js"></script>
通过 Bower
bower install --save alertifyjs
通过 NPM
npm install --save alertifyjs
禁用默认 CSS
如果不想使用默认的CSS,只需要在引入javascript文件之前插入自己的样式文件(任意id="alertifyCSS"
的
style
或 link
元素):
<link rel="stylesheet" href="/path/to/custom/styles.css" id="alertifyCSS">
<script src="/path/to/alertify.js"></script>
注意
我们会在主要的CDN上发布最新版本,在此之前,您也可以在GitHub上下载,或者通过NPM或Bower进行安装。
如果您通过Bower或NPM进行安装,则需要在HTML中引入“dist”文件夹中的文件,以便插件能正常使用。
还需要注意的是,CSS默认是JS动态生成的,不需要通过单独引入样式文件的方式来使用主题。由于CSS会被JS插入到<link>
元素或<style>
元素的前面,所以您也可以使用自己的样式来覆盖它。
Angular JS
此插件也有AngularJS的版本。它的名称是“ngAlertify.js”,如果您正在构建AngularJS应用的话可以考虑使用它。
如果您想查看通过ngAlertify实现日志消息的在线示例, 请点击这里 。
初始化 ngAlertify
// 请确保已经引入了ngAlertify.js文件
angular
.module("myApp", ["ngAlertify"])
.controller("myController", function($scope, alertify) {
alertify.success("欢迎使用alertify!");
});
性能
Alertify是基于高性能,轻量级的原则来设计的(这也就意味着它不像其他插件那样有丰富的功能,我们也不打算增加更多的功能,实际上这也是我们的初衷),所以对于各种网站和用户来说,它是一个不错的选择。
目前,整个库的JavaScript和CSS只有2.29KB(gzip压缩后),并且以后会越来越小。考虑到它仅有一个HTTP请求,且不需要其他依赖,所以更值得选择。
Angular模块只有2.32KB,所以也很轻量级!
使用方法
对话框
Alert 对话框
对话框显示文本,需要用户知晓消息内容
代码示例
alertify.alert("消息");
Confirm 对话框
代码示例
// confirm 对话框
alertify.confirm("消息", function () {
// 用户点击"ok"按钮
}, function() {
// 用户点击"cancel"按钮
});
Prompt 对话框
代码示例
alertify
.defaultValue("默认值")
.prompt("这是一个Prompt对话框",
function (val, ev) {
// The click event is in the event variable, so you can use it here.
ev.preventDefault();
// The value entered is availble in the val variable.
alertify.success("您单击了OK,类型为:" + val);
}, function(ev) {
// The click event is in the event variable, so you can use it here.
ev.preventDefault();
alertify.error("您单击了Cancel");
});
自定义标签
您也可以轻松设定自己的按钮标签(文字),并不一定要使用"Ok"和"Cancel"。
代码示例
alertify
.okBtn("同意")
.cancelBtn("拒绝")
.confirm("自定义按钮标签的Confirm对话框", function (ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.success("您单击了OK");
}, function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.error("您单击了Cancel");
});
Ajax - 多个对话框
代码示例
alertify.confirm("确认?", function (ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.alert("AJAX成功以后OK");
}, function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.alert("AJAX成功以后Cancel");
});
Promise Aware
如果您的浏览器支持promises,您可以使用它们来代替回调函数
代码示例
if ("function" !== typeof Promise) {
alertify.alert("您的浏览器不支持promises");
return;
}
alertify.confirm("确认?").then(function (resolvedValue) {
// "resolvedValue" is an object with the following keys:
// buttonClicked
// inputValue (only for prompts)
// event
// The click event is in
// resolvedValue, so you can use
// it here.
resolvedValue.event.preventDefault();
alertify.alert("您单击了" + resolvedValue.buttonClicked + "按钮!");
});
日志消息
位置设置
代码示例
alertify.delay(1000); // 快速的显示
alertify.log("默认在左下角的位置显示");
setTimeout(function() {
alertify.logPosition("左上角");
alertify.log("左上角");
}, 1500);
setTimeout(function() {
alertify.logPosition("右上角");
alertify.log("右上角");
}, 3000);
setTimeout(function() {
alertify.logPosition("右下角");
alertify.log("右下角");
}, 4500);
setTimeout(function() {
alertify.reset(); // 重置
alertify.log("默认位置");
}, 6000);
设置父元素
可以设置一个父元素,将Alertify添加到该DOM节点中
代码示例
// Alertify 默认被添加在document.body中。
// 您可以轻松改变它,比如:
var elem = document.getElementById("my-element");
alertify.parent(elem);
标准日志
代码示例
alertify.log("标准日志消息");
带HTML的标准日志
HTML片段也可以在日志消息正常显示
代码示例
var msg = "<img src='https://placehold.it/256x128'>" +
"<h3>这里是HTML内容</h3>" +
"<p>看起来不错,不是吗?</p>";
alertify.log(msg);
带回调函数标准日志
请注意,设置了回调函数以后,单击日志消息并不会自动关闭,这与之前有所不同。这也就意味着如果用户多次点击,会多次调用回调函数。如果您的回调函数只能执行一次,那么您需要分开跟踪回调函数(If you're callback is an action that must be completed only once, you'll need to keep track of that separately)。
代码示例
alertify.log("带回调函数标准日志消息", function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.log("您单击了通知");
});
成功日志
代码示例
alertify.success("成功日志消息");
带回调函数的成功日志
代码示例
alertify.success("带回调函数的成功日志消息", function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.success("您单击了通知");
});
错误日志
代码示例
alertify.error("错误日志消息");
带回调函数的错误日志
代码示例
alertify.error("带回调函数的错误日志消息", function(ev) {
// The click event is in the
// event variable, so you can use
// it here.
ev.preventDefault();
alertify.error("您单击了通知");
});
单击关闭日志
代码示例
alertify
.closeLogOnClick(true)
.log("单击关闭");
禁用日志的click事件
默认情况下,单击关闭日志消息功能是被禁用的,但如果您已经启用了它,并需要将其重置为禁用的话,也是非常方便的。
为什么默认要禁用单击关闭呢,主要是为了日志消息中所包含的HTML(包括链接)能被操作。
代码示例
alertify
.closeLogOnClick(true)
.log("单击关闭")
.closeLogOnClick(false)
.log("不能通过单击关闭");
10 秒后隐藏
代码示例
alertify.delay(10000).log("10秒后隐藏");
持续显示的日志
持续显示日志消息一直可见,直到单击(如果设置了closeLogOnClick(true)),或者当消息数量超过maxLogItems设置时移除。
代码示例
alertify.delay(0).log("一直显示直到被单击");
日志消息最大数量
您可以设置日志/成功/错误消息的最大显示数量,默认为两个。
代码示例
alertify
.maxLogItems(1)
.log("这是第一个消息");
// The timeout is just for visual effect.
setTimeout(function() {
alertify.log("第二条消息显示会关闭第一条消息");
}, 1000);
设置日志模板
可以为所有的日志设置模板
代码示例
alertify
.setLogTemplate(function (input) { return '日志消息:' + input; })
.log("这是一条消息");
其他配置项
重置默认值
您可以改变按钮标签、延时、默认提示或者占位符等的值,同时也可以轻松重置为默认值。
代码示例
// Notice the okay button is not the custom value, it was reset.
alertify
.okBtn("前往")
.reset()
.alert("自定义值已被重置!");
---- 最后更新于:2017/06/19 01:26