技术笔记
js消息提醒插件notiflix
 moons   2020-07-14 09:24:00   204
专栏分类: javascript
javascript
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js消息通知框、对话框、确认框和Loading插件</title>

<!--默认设置,可无视-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />

<!--布局,可无视-->
<link rel="stylesheet" type="text/css" href="css/demo.css">

<!--核心插件样式-->
<link rel="stylesheet" href="css/notiflix-1.3.0.min.css">

</head>
<body>

<div class="demo" style="width:900px; margin: 0 auto">
	<h3>消息通知</h3>
	<a href="#" id="msg-success">成功消息</a>
	<a href="#" id="msg-error">错误消息</a>
	<a href="#" id="msg-warning">警告消息</a>
	<a href="#" id="msg-info">info消息</a>
	<h3>对话框</h3>
	<a href="#" id="dialog-success">打开成功对话框</a>
	<a href="#" id="dialog-error">打开失败对话框</a>
	<a href="#" id="dialog-warning">打开警告对话框</a>
	<a href="#" id="dialog-info">打开info对话框</a>
	<h3>确认框</h3>
	<a href="#" id="confirm">打开确认框</a>
	<h3>Loading</h3>
	<a href="#" id="loading">Loading</a>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/notiflix-1.3.0.min.js" type="text/javascript"></script>
<script>
	$(function(){
		Notiflix.Notify.Init();
		Notiflix.Report.Init();
		Notiflix.Confirm.Init();
		Notiflix.Loading.Init({
			clickToClose:true
		});
		$('#msg-success').click(function(){
			Notiflix.Notify.Success('Sol lucet omnibus');
		})
		$('#msg-error').click(function(){
			Notiflix.Notify.Failure('Qui timide rogat docet negare');
		})
		$('#msg-warning').click(function(){
			Notiflix.Notify.Warning('Memento te hominem esse');
		})
		$('#msg-info').click(function(){
			Notiflix.Notify.Info('Cogito ergo sum');
		})
		$('#dialog-success').click(function(){
			 Notiflix.Report.Success( 'Notiflix Success', '"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein', 'Click' ); 
		})
		$('#dialog-error').click(function(){
			  Notiflix.Report.Failure( 'Notiflix Failure', '"Failure is simply the opportunity to begin again, this time more intelligently." <br><br>- Henry Ford', 'Click' ); 
		})
		$('#dialog-warning').click(function(){
			  Notiflix.Report.Warning( 'Notiflix Warning', '"The peoples who want to live comfortably without producing and fatigue; they are doomed to lose their dignity, then liberty, and then independence and destiny." <br><br>- Mustafa Kemal Ataturk', 'Click' ); 
		})
		$('#dialog-info').click(function(){
			  Notiflix.Report.Info( 'Notiflix Info', '"Knowledge rests not upon truth alone, but upon error also." <br><br>- Carl Gustav Jung', 'Click' ); 
		})
		$('#confirm').click(function(){
			   Notiflix.Confirm.Show( 'Notiflix Confirm', 'Do you agree with me?', 'Yes', 'No', function(){ alert('Thank you.'); } ); 
		})
		$('#loading').click(function(){
			   Notiflix.Loading.Standard();
		})
	})
</script>

</body>
</html>
Copyright © mos360.cn By Moons Soft Studio 百度统计