forked from itbruno/notifyme
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·131 lines (112 loc) · 4.12 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
<html lang="en">
<head>
<title>notifyME</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." />
<!-- Google Authorship & Publisher Markup -->
<link rel="author" href="https://plus.google.com/+BrunoRodrigues01/posts"/>
<link rel="publisher" href="hhttps://plus.google.com/+BrunoRodrigues01"/>
<!-- Modernizr -->
<script src="assets/js/modernizr.js" type="text/javascript"></script>
</head>
<body>
<section class="topbar">
<div class="container">
<a href="https://github.com/brunodsgn/notifyme/archive/master.zip" class="top-items" title="Download notifyMe"><i class="fa fa-download"></i> Download</a>
<a href="https://github.com/brunodsgn/notifyme" class="top-items" title="Fork notifyMe"><i class="fa fa-github"></i> Fork me</a>
<a 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">
<span class="logo">
notifyMe
</span>
</div>
</header>
<div class="container">
<h1>What's <span class="feature">notifyMe?</span></h1>
<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>
<h1>How to use</h1>
<p>
Call the stylesheet with the styles
<pre><link rel="assets/css/notifyme.css" type="text/css" /></pre>
</p>
<p>
For use this plugin is necessary add jQuery lib in your page:
<pre><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></pre>
</p>
<p>
Add the <span class="feature">notifyMe.js</span> after jquery lib:
<pre><script type="text/javascript" src="assets/js/notifyme.js"></script></pre>
</p>
<p>
in a element is simple, for use when click in a button for example:
<pre>$('.error').on('click', function(){<br/> $(this).notifyMe(<br/> 'bottom', // Position<br/> 'error', // Type<br/> 'Lorem Ipsum Text', // Title<br/> 'Lorem Ipsum is simply dummy text of the printing', // Description<br/> 200 // Velocity of notification<br/> 2000 // (optional) Time of delay to close automatically<br/> );<br/>});</pre>
</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>
</div>
<footer>
<span>notifyMe</span> is a plugin created with <i class="fa fa-heart"></i> by <a href="http://github.com/brunodsgn" 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.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.error').on('click', function(){
$(this).notifyMe(
'bottom',
'error',
'Lorem Ipsum Text',
'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',
200,
1500
);
});
$('.info').on('click', function(){
$(this).notifyMe(
'top',
'info',
'Lorem Ipsum Text',
'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',
300,
1500
);
});
$('.success').on('click', function(){
$(this).notifyMe(
'left',
'success',
'Lorem Ipsum Text',
'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',
400,
2000
);
});
$('.default').on('click', function(){
$(this).notifyMe(
'right',
'default',
'Lorem Ipsum Text',
'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',
500,
2000
);
});
});
</script>
</body>
</html>