-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
executable file
·132 lines (112 loc) · 4.25 KB
/
index.html
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html lang="en">
<head>
<title>notifyME v1.2.0</title>
<link rel="stylesheet" type="text/css" href="assets/css/base.css" />
<link rel="stylesheet" type="text/css" href="assets/css/notifyme.css" />
<!-- Meta Tags -->
<meta name="viewport" content="width= device-width, initial-scale= 1">
<meta name="robots" content="index,follow">
<meta name="description" content="notifyMe, is a simple js plugin for notifications in pages." />
</head>
<body>
<section class="topbar">
<div class="container">
<a target="_blank" href="https://github.com/itbruno/notifyme/archive/master.zip" class="top-items" title="Download notifyMe"><i class="fa fa-download"></i> Download v1.2.0</a>
<a target="_blank" href="https://github.com/itbruno/notifyme" class="top-items" title="Fork notifyMe"><i class="fa fa-github"></i> Fork me</a>
<a target="_blank" href="http://twitter.com/_brunoweb" title="@_brunoweb" class="top-items"><i class="fa fa-twitter"></i> Say 'Hello!'</a>
</div>
</section>
<header>
<div class="container">
<h1 class="logo">
notifyMe
</h1>
</div>
</header>
<div class="container">
<h2>What's <span class="feature">notifyMe?</span></h2>
<p>
<span class="feature">notifyMe</span> is a simple plugin that i created for fun and learning for fixed notifications in pages.<br />
He works when a button is clicked, errors, validations, info and everything you want.
</p>
<div class="btn-group">
<a class="btn default"><i class="fa fa-coffee"></i> Default</a>
<a class="btn error"><i class="fa fa-warning"></i> Error</a>
<a class="btn info"><i class="fa fa-info"></i> Info</a>
<a class="btn success"><i class="fa fa-check"></i> Success</a>
</div>
<h2>How to use</h2>
<p>
Call the stylesheet with the styles
<script src="https://gist.github.com/itbruno/5f4468ccca5e6458d89720ee5ed37a10.js?file=your-page-style.html"></script>
</p>
<p class="has-code">
For use this plugin is necessary add jQuery lib in your page
Add the <span class="feature">notifyMe.js</span> after jquery lib:
<script src="https://gist.github.com/itbruno/5f4468ccca5e6458d89720ee5ed37a10.js?file=your-page-script.html"></script>
</p>
<p>
in a element is simple, for use when click in a button for example:
<script src="https://gist.github.com/itbruno/5f4468ccca5e6458d89720ee5ed37a10.js?file=call-notification.js"></script>
</p>
<h2>Options</h2>
<h3><strong>type</strong> <i>[type = string]</i></h3>
<ul>
<li>error</li>
<li>success</li>
<li>info</li>
<li>default</li>
</ul>
<h3><strong>position</strong> <i>[type = string]</i></h3>
<ul>
<li>top</li>
<li>bottom</li>
<li>left</li>
<li>right</li>
</ul>
<h3><strong>velocity</strong> <i>[type = int]</i></h3>
<h3><strong>delay</strong> <i>[type = int]</i></h3>
</div>
<footer>
<span>notifyMe</span> is a plugin created with <i class="fa fa-heart"></i> by <a href="http://itbruno.com.br" title="Bruno Rodrigues">Me</a>, for fun, for me, for you and learning.
</footer>
<!-- SCRIPTS -->
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/notifyme.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.error').on('click', function(){
$(this).notifyMe({
position: 'top',
title: 'Lorem Ipsum Title',
content: 'Cras mattis consectetur purus sit amet fermentum.',
type: 'error'
});
});
$('.info').on('click', function(){
$(this).notifyMe({
position: 'right',
title: 'Lorem Ipsum Title',
content: 'Cras mattis consectetur purus sit amet fermentum.',
type: 'info'
});
});
$('.success').on('click', function(){
$(this).notifyMe({
position: 'bottom',
title: 'Lorem Ipsum Title',
content: 'Cras mattis consectetur purus sit amet fermentum.',
type: 'success'
});
});
$('.default').on('click', function(){
$(this).notifyMe({
position: 'left',
title: 'Lorem Ipsum Title',
content: 'Cras mattis consectetur purus sit amet fermentum.'
});
});
});
</script>
</body>
</html>