-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
195 lines (195 loc) · 5.99 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Toast Plugin</title>
<link type="text/css" rel="stylesheet" href="css/toast.css" />
<style type="text/css">
#container {
width: 800px;
margin: 0 auto;
}
img {float:right;}
</style>
</head>
<body>
<div id="container">
<img src="img/toast.png" height="128" width="128" alt="A piece of toast"/>
<h1>jQueryToast v0.3</h1>
<h2><em>Android-like Toast Plugin for jQuery</em></h2>
<h2>About</h2>
<p>
This is a simple plugin for displaying Android-like Toast messages.
Call the plugin and it displays the message and fades away exactly as a
toast on an android device would. Any messages that are created while
another is being displayed will be put in a Que and displayed subsequently.
</p>
<p>
The plugin takes one parameter, the options object. This object passes the message
and any other of the configurable options to customize the plugin. While you do not have
to pass in the object at all, if you do not the toast message will be "This is a Toast".
</p>
<h2>Options</h2>
<p>All parameters are passed to the plugin using an object. The options are as follows:</p>
<ul>
<li>message <string> - Default: "This is a Toast"</li>
<li>displayTime <integer> - Default: 2000 - Time to display the Toast in milliseconds</li>
<li>inTime <integer> - Default: 300 - Duration of fadeIn in milliseconds</li>
<li>outTime <integer> - Default: 200 - Duration of fadeOut in milliseconds</li>
<li>maxWidth <integer> - Default: 400 - Maximum width in pixels</li>
<li>showDirect <boolean> - Default: false - If set, show the message immediately instead of queueing</li>
<li>vPosition <string> - Default: center - Vertical position, accepts top, bottom, and center</li>
<li>hPosition <string> - Default: center - Horizontal position, accepts right, left, and center</li>
</ul>
<h2>Usage Example</h2>
<pre>
<script>
$(function(){
$(document).click(function(){
$.toast({
message:"A Toast To You!",
displayTime:4000,
inTime:100,
outTime:400
});
});
});
</script>
</pre>
<h2>Demo</h2>
<p>Single toast with positioning</p>
<ul>
<li><a id="cc" href="#">Center-Center</a></li>
<li><a id="cl" href="#">Center-Left</a></li>
<li><a id="cr" href="#">Center-Right</a></li>
<li><a id="tc" href="#">Top-Center</a></li>
<li><a id="tl" href="#">Top-Left</a></li>
<li><a id="tr" href="#">Top-Right</a></li>
<li><a id="bc" href="#">Bottom-Center</a></li>
<li><a id="bl" href="#">Bottom-Left</a></li>
<li><a id="br" href="#">Bottom-Right</a></li>
</ul>
<p><a id="que" href="#">Toasts Que - Click Me!</a></p>
<p><a id="priority" href="#">Priority Toast - Click while other toasts displaying.</a></p>
<p><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src = "js/jquery.toast.min.js"></script>
<script>
$(function(){
//center center
$("#cc").click(function(e){
$.toast({
message:"Center-Center",
displayTime:1000,
inTime:100,
outTime:400
});
e.preventDefault();
});
//center left
$("#cl").click(function(e){
$.toast({
message:"Center-Left",
displayTime:1000,
inTime:100,
outTime:400,
hPosition:"left"
});
e.preventDefault();
});
//center right
$("#cr").click(function(e){
$.toast({
message:"Center-Right",
displayTime:1000,
inTime:100,
outTime:400,
hPosition:"right"
});
e.preventDefault();
});
//bottom center
$("#bc").click(function(e){
$.toast({
message:"Bottom-Center",
displayTime:1000,
inTime:100,
outTime:400,
vPosition:"bottom"
});
e.preventDefault();
})
//bottom left
$("#bl").click(function(e){
$.toast({
message:"Bottom-Left",
displayTime:1000,
inTime:100,
outTime:400,
vPosition:"bottom",
hPosition:"left"
});
e.preventDefault();
})
//bottom right
$("#br").click(function(e){
$.toast({
message:"Bottom-Right",
displayTime:1000,
inTime:100,
outTime:400,
vPosition:"bottom",
hPosition:"right"
});
e.preventDefault();
})
//top center
$("#tc").click(function(e){
$.toast({
message:"Top-Center",
displayTime:1000,
inTime:100,
outTime:400,
vPosition:"top"
});
e.preventDefault();
});
//top left
$("#tl").click(function(e){
$.toast({
message:"Top-Left",
displayTime:1000,
inTime:100,
outTime:400,
vPosition:"top",
hPosition:"left"
});
e.preventDefault();
});
//top right
$("#tr").click(function(e){
$.toast({
message:"Top-Right",
displayTime:1000,
inTime:100,
outTime:400,
vPosition:"top",
hPosition:"right"
});
e.preventDefault();
});
$("#que").click(function(e){
$.toast({message:"First Toast"});
$.toast({message:"Second Toast"});
$.toast({message:"Third Toast"});
$.toast({message:"Fourth Toast"});
e.preventDefault();
});
$("#priority").click(function(e){
$.toast({message:"Priority Toast!", showDirect: true});
e.preventDefault();
});
});
</script>
</body>
</html>