jquery-notify/example.html at master · sujeetkv/jquery-notify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="src/notify.js"></script>
<script type="text/javascript">
// example
$(function(){
	$.notify.setup({
		'app_title': 'Demo App',
		'app_icon': 'info.png',
		'verbose_mode': true,
		//'position': {'ver': 'top', 'hor': 'left'},
		//'z_index': '2048',
		'service_worker_path': 'src/service-worker.js' // to make system notification more compatible on mobile devices
	});

        // request system notification permission (optional)
        $.notify.system.onPermissionGranted = function () {console.log('granted callback');};
        $.notify.system.onPermissionDenied = function () {console.log('denied callback');};
	$.notify.system.requestPermission();

	var info1 = null;
	$('#info').click(function(){
		info1 = $.notify.info('info message', 4); // auto-close
	});
	$('#close_info').click(function(){
		if(info1) info1.remove();
	});

	var success1 = null;
	$('#success').click(function(){
		success1 = $.notify.success('success message', false); // persistent
	});
	$('#close_success').click(function(){
		if(success1) success1.remove();
	});

	var warning1 = null;
	$('#warning').click(function(){
		warning1 = $.notify.warning('warning message');
	});
	$('#close_warning').click(function(){
		if(warning1) warning1.remove();
	});

	var error1 = null;
	$('#error').click(function(){
		error1 = $.notify.error('error message');
	});
	$('#close_error').click(function(){
		if(error1) error1.remove();
	});

	$('#clear').click(function(){
		$.notify.clear();
	});

	$('#system_info').click(function(){
		$.notify.system.info('This is demo info. This is demo info. This is demo info. This is demo info.');
	});

	$('#system_success').click(function(){
		$.notify.system.success('success message', false); // persistent (require interaction to close)
	});
	$('#system_warning').click(function(){
		$.notify.system.warning('warning message', 2); // auto-close
	});
	$('#system_error').click(function(){
		$.notify.system.error('error message', true, 'Custom Title', 'logo.jpg');
	});

	$('#system_clear').click(function(){
		$.notify.system.clear();
	});
});
</script>
</head>

<body>
<h1>Demo</h1>
<button id="info">info</button><button id="close_info">close_info</button>
<button id="success">success</button><button id="close_success">close_success</button>
<button id="warning">warning</button><button id="close_warning">close_warning</button>
<button id="error">error</button><button id="close_error">close_error</button>
<br />
<button id="clear">clear</button>

<hr />

<button id="system_info">system_info</button>
<button id="system_success">system_success</button>
<button id="system_warning">system_warning</button>
<button id="system_error">system_error</button>
<br />
<button id="system_clear">system_clear</button>
</body>
</html>