jQuery-notification/index.html at master · vikksr/jQuery-notification · GitHub

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
<!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">

	<head>
		<title>jQuery Notification</title>

		<style type="text/css">
			BODY {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
				line-height: 1.5;
				padding: 10px 30px;
			}
		</style>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

		<script type="text/javascript" src="jquery.notification.js"></script>
		<link type="text/css" rel="stylesheet" href="jquery.notification.css" />

		<script type="text/javascript">

			$(document).ready( function() {

				$('.notify').click( function() {
					$.notification($('INPUT[name=message]').val(), {
						duration: parseInt($('INPUT[name=duration]').val()),
						freezeOnHover: $('INPUT[name=freezeOnHover]').prop('checked'),
						hideSpeed: parseInt($('INPUT[name=hideSpeed]').val()),
						position: $(this).attr('id'),
						showSpeed: parseInt($('INPUT[name=showSpeed]').val())
					});
				});

			});

		</script>

	</head>

	<body>

		<h1>jQuery Notification Demo</h1>

		<p>
			Select a button to trigger a notification at the respective screen location:
		</p>

		<table>
			<tbody>
				<tr>
					<td><input type="button" id="top-left" class="notify" /></td>
					<td><input type="button" id="top" class="notify" /></td>
					<td><input type="button" id="top-right" class="notify" /></td>
				</tr>
				<tr>
					<td><input type="button" id="left" class="notify" /></td>
					<td><input type="button" id="center" class="notify" /></td>
					<td><input type="button" id="right" class="notify" /></td>
				</tr>
				<tr>
					<td><input type="button" id="bottom-left" class="notify" /></td>
					<td><input type="button" id="bottom" class="notify" /></td>
					<td><input type="button" id="bottom-right" class="notify" /></td>
				</tr>
			</tbody>
		</table>

		<h3>Settings</h3>
		<p><input type="text" size="30" name="message" value="This is a notification!" /></p>
		<p><input type="text" size="4" name="duration" value="2000" /> Duration</p>
		<p><input type="text" size="4" name="showSpeed" value="250" /> Show Speed</p>
		<p><input type="text" size="4" name="hideSpeed" value="250" /> Hide Speed</p>
		<p><label><input type="checkbox" name="freezeOnHover"> Freeze on hover</label></p>
		<p><input type="reset" value="Reset" /></p>

	</body>

</html>