This repository has been archived by the owner on Aug 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmessage.html
103 lines (101 loc) · 3.82 KB
/
message.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
<!DOCTYPE html>
<html>
<head>
<title>ajaxPostForm PoloPlugin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="polosson">
<link href="vendor/bootstrap.min.css" rel="stylesheet" />
<script src="vendor/jquery-2.0.1.min.js"></script>
<script src="vendor/bootstrap.min.js"></script>
<script src="js/jquery.messageBox.js"></script>
<script src="js/jquery.ajaxPostForm.js"></script>
<script>
$(function(){
// Message box example
$.messageBox({'message':"Welcome !!"});
// Documentation loader
$('.doc').click(function(){
var toLoad = $(this).data("to-load");
$('#docLoader').load('doc/'+toLoad+'.html?12345');
});
// Messages Example
$('.msgExample').click(function(){
var mclass = $(this).data('type');
var msg = $(this).data('message');
$.messageBox({'cssClass':'alert-'+mclass,'message':msg});
});
});
</script>
</head>
<body style="overflow-y: scroll;">
<div class="container-fluid">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10 alert alert-warning">
<div class="pull-right" id="ajaxLoader" style="display:none;">LOADING...</div>
<h2><a href="index.html">JQuery Polo Plugins</a></h2>
<a class="btn btn-warning" href="message.html">jquery.messageBox.js</a>
<a class="btn btn-primary" href="form.html">jquery.ajaxPostForm.js</a>
<a class="btn btn-primary" href="table.html">jquery.ajaxActions.js</a>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-6">
<h2>Jquery utility to display messages in a div - <small>jquery.messageBox.js</small> -</h2>
<p style="margin-top:30px;">
This litte utility is used to display response or error messages from the server,
and which can be used to display any message you want.
</p>
<p>
<b>Examples:</b> <small>(click on buttons below)</small>
</p>
<p>
<button class="btn btn-xs btn-success msgExample" data-type="success" data-message="Successfull test!!">SUCCESS message</button>
<button class="btn btn-xs btn-warning msgExample" data-type="warning" data-message="Warning message test!!">WARNING message</button>
<button class="btn btn-xs btn-info msgExample" data-type="info" data-message="Information test!!">INFO message</button>
<button class="btn btn-xs btn-danger msgExample" data-type="danger" data-message="Danger (error) message test!!">DANGER message</button>
</p>
<br />
<p>
Note that the <b class="text-success">"success"</b> and <b class="text-warning">"warning"</b> messages <u>fade out</u> after 3 seconds,
while <b class="text-info">"info"</b> and <b class="text-danger">"danger"</b> messages will stay diplayed until you close it.
</p>
<p>
Very simple but usefull!
</p>
<h3>Bonus</h3>
<p>
In this file, there are also 3 jquery ajax-events binded:
</p>
<ul>
<li><b>ajaxStart</b>: Send the last ajax error to $.messageBox</li>
<li>
<b>ajaxStop</b>: Shows a div with id <b>#ajaxLoader</b> (it must be present in your DOM, you can place it where you want,
and put anything you want in it - like a spinning icon, some text...)
</li>
<li><b>ajaxError</b>: Hides the <b>#ajaxLoader</b> div.</li>
</ul>
</div>
<div class="col-lg-4">
<div class="row" style="margin-top:30px;">
<div class="alert hide" id="messageBox"></div>
</div>
</div>
</div>
<div class="row" style="margin-top:30px;">
<div class="col-lg-1"></div>
<div class="col-lg-10 alert-warning">
<button class="btn btn-primary doc" data-to-load="doc.messageBox">Documentation</button>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div style="padding-bottom:150px;" id="docLoader"></div>
</div>
</div>
</div>
</body>
</html>