forked from copleykj/jQueryToast
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (90 loc) · 3.57 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 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" />
<h1>jQueryToast v0.2</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>
</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><a id="demoLink1" href="#">Single Toast - Click Me!</a></p>
<p><a id="demoLink2" href="#">Toasts Que - Click Me!</a></p>
<p><a id="demoLink3" 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.6.1/jquery.min.js"></script>
<script src = "js/jquery.toast.js"></script>
<script>
$(function(){
$("#demoLink1").click(function(e){
$.toast({
message:"A Toast To You",
displayTime:4000,
inTime:100,
outTime:400
});
e.preventDefault();
});
$("#demoLink2").click(function(e){
$.toast({message:"First Toast"});
$.toast({message:"Second Toast"});
$.toast({message:"Third Toast"});
$.toast({message:"Fourth Toast"});
e.preventDefault();
});
$("#demoLink3").click(function(e){
$.toast({message:"Priority Toast!", showDirect: true});
e.preventDefault();
});
});
</script>
</body>
</html>