-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
96 lines (85 loc) · 2.68 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
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<style type="text/css">
/* custom styles applied to the messagebar */
.my-super-content {
line-height:46px;
font-size: 22px;
font-family:'Lucida Grande',sans-serif;
color: #000;
}
.my-bar-info {
/* have to use important b/c of the opacity used in the messagebar class, it takes precedence unless we use important */
background-color: #333 !important;
}
.my-bar-error {
background-color: #fabb09 !important;
}
.my-content-info {
font-weight: normal;
color: #fff;
}
.my-content-error {
font-weight: bold;
color: #000;
}
</style>
<script src="external/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="lib/jquery.messagebar.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// create messagebar, customize position and styles
/*
$('body').messagebar({
background_color: '#ffff00',
position: 'bottom',
content_id: 'mycontent',
content_class: 'my-super-content',
message_types: {
info: {barClass: 'my-bar-info', contentClass: 'my-content-info'},
error: {barClass: 'my-bar-error', contentClass: 'my-content-error'},
}
});
*/
// create default messagebar
$('body').messagebar();
$('#show').click(function() {
$('body').messagebar("show");
});
$('#hide').click(function() {
$('body').messagebar("hide", true);
});
$('#submit-info').click(function(event) {
event.preventDefault();
$('body').messagebar('addMessage', $('#info-message').val(), 'info');
$('#info-message').val('');
});
$('#submit-error').click(function(event) {
event.preventDefault();
$('body').messagebar('addMessage', $('#error-message').val(), 'error');
$('#error-message').val('');
});
});
</script>
<body>
<div id="content">
<p>Some wonderful content goes here</p>
<p>Some wonderful content goes here</p>
<p>Some wonderful content goes here</p>
<br />
<p><a id="show" href="#">Show</a> the message bar</p>
<p><a id="hide" href="#">Hide</a> the message bar</p>
<form>
<label for="info-message">Message:</label><br />
<input id="info-message" type="text" placeholder="add an info message" />
<input type="submit" value="Add Info" id="submit-info" />
</form>
<form>
<label for="error-message">Message:</label><br />
<input id="error-message" type="text" placeholder="add an error message" />
<input type="submit" value="Add Error" id="submit-error" />
</form>
</div>
</body>
</html>