-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtoastr.php
116 lines (102 loc) · 3.98 KB
/
toastr.php
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<style>
body {
margin: 5em;
}
li {
font-size: 18px;
padding: 4px;
}
#toast-container > .toast {
background-image: none !important;
}
#toast-container > .toast:before {
position: fixed;
font-family: FontAwesome;
font-size: 24px;
line-height: 18px;
float: left;
color: #FFF;
padding-right: 0.5em;
margin: auto 0.5em auto -1.5em;
}
#toast-container > .toast-warning:before {
content: "\f003";
}
#toast-container > .toast-error:before {
content: "\f001";
}
#toast-container > .toast-info:before {
content: "\f005";
}
#toast-container > .toast-success:before {
content: "\f002";
}
</style>
</head>
<body>
<h1>Toastr with FontAwesome Icons</h1>
<ul class="icons-ul">
<li><i class="icon-li icon-ok"></i>Embedded icon using the <i> tag</li>
<li><i class="icon-li icon-ok"></i>Doesn't work with background-image</li>
<li><i class="icon-li icon-ok"></i>We can use the :before psuedo class</li>
<li><i class="icon-li icon-ok"></i>Works in IE8+, FireFox 21+, Chrome 26+, Safari 5.1+, most mobile browsers</li>
<li><i class="icon-li icon-ok"></i>See <a href="http://caniuse.com/#search=before">CanIUse.com</a> for browser support</li>
</ul>
<button class="btn btn-primary" id="tryMe">Try Me</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
$(function() {
function Toast(type, css, msg) {
this.type = type;
this.css = css;
this.msg = 'This is positioned in the ' + msg + '. You can also style the icon any way you like.';
}
var toasts = [
new Toast('error', 'toast-bottom-full-width', 'This is positioned in the bottom full width. You can also style the icon any way you like.'),
new Toast('info', 'toast-top-full-width', 'top full width'),
new Toast('warning', 'toast-top-left', 'This is positioned in the top left. You can also style the icon any way you like.'),
new Toast('success', 'toast-top-right', 'top right'),
new Toast('warning', 'toast-bottom-right', 'bottom right'),
new Toast('error', 'toast-bottom-left', 'bottom left')
];
toastr.options.positionClass = 'toast-top-full-width';
toastr.options.extendedTimeOut = 0; //1000;
toastr.options.timeOut = 1000;
toastr.options.fadeOut = 250;
toastr.options.fadeIn = 250;
var i = 0;
$('#tryMe').click(function () {
$('#tryMe').prop('disabled', true);
delayToasts();
});
function delayToasts() {
if (i === toasts.length) { return; }
var delay = i === 0 ? 0 : 2100;
window.setTimeout(function () { showToast(); }, delay);
// re-enable the button
if (i === toasts.length-1) {
window.setTimeout(function () {
$('#tryMe').prop('disabled', false);
i = 0;
}, delay + 1000);
}
}
function showToast() {
var t = toasts[i];
toastr.options.positionClass = t.css;
toastr[t.type](t.msg);
i++;
delayToasts();
}
})
</script>
</body>
</html>