jQuery提示插件alertify

2017-5-26 liuweibo JavaScript

1.alertify插件功能

主要实现提示功能，用于代替js中的alert,confirm,prompt，显示友好的提示框.

2.alertify使用方法

1.使用的文件
主要使用三个文件，两个css（alertify.core.css，alertify.default.css），用于设置提示框的样式。一个js（alertify.min.js或alertify.js），用于实现提示框的功能。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/alertify.js/0.3.11/alertify.core.css">
	<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/alertify.js/0.3.11/alertify.default.css">
	<script type="text/javascript" src="http://apps.bdimg.com/libs/alertify.js/0.3.11/alertify.js"></script>
	<style type="text/css">
		.alertify{
		  width:350px;
		  margin-left: -205px;
		  border:2px solid #4ba9e6;

		  background:#f3faff;
		  border-radius:5px;
		}
	</style>
</head>
<body>
	<button id="alert">alert</button>
	<button id="confirm">confirm</button>
	<button id="prompt">prompt</button>
	<script type="text/javascript">
		var
		$ = function (id) {
		  return document.getElementById(id);
		},
		//初始化操作
		reset = function () {
		  alertify.set({
		    labels : {
		      ok   : "确认",
		      cancel : "取消"
		    },
		    delay : 5000,
		    buttonReverse : true,
		    buttonFocus  : "ok"
		  });
		};
		//绑定
		$("alert").onclick = function () {
		   reset();
		   alertify.alert("提示框");
		   //可以修改右下角的提示
		   //alertify.custom = alertify.extend( "custom" );
		   //alertify.custom( "message" )
		  // alertify.log("message")

		   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;
		};
	</script>
</body>
</html>

分享到： QQ空间新浪微博腾讯微博微信更多

jQuery提示插件alertify

日历

存档

最新评论

链接

搜索