<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Messages - Custom Plugin</title>
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery.gdMessage.css" type="text/css"/>
</head>
<body>
<h2 style="text-align: center">jQuery Plugin for Bootstrap Messages</h2>
<p style="text-align: center">
<button class="btn btn-danger btn-xs horizontallySpaced" id="goRefresh" title="refresh messages">refresh</button>
<button class="btn btn-default btn-xs horizontallySpaced" id="goClear" title="clear messages">clear</button>
<button class="btn btn-info btn-xs horizontallySpaced" id="goInfo" title="information about the plugin">
information
</button>
</p>
<div class="container">
<div id="gdMessageContainer">
</div>
<hr>
</div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/jquery.gdMessage.js"></script>
<script>
var divCount = 9;
$(document).ready(
function ()
{
$("body").on("click", "#goInfo", function (e)
{
e.preventDefault();
e.stopPropagation();
$.post(
'information.html', {},
function (html)
{
$('#gdMessageContainer').gdMessage(html);
}
);
});
$("body").on("click", "#goRefresh", function (e)
{
e.preventDefault();
e.stopPropagation();
populateContainer(divCount);
showMessages();
});
$("body").on("click", "#goClear", function (e)
{
e.preventDefault();
e.stopPropagation();
populateContainer(divCount);
clearMessages(divCount);
});
populateContainer(divCount);
showMessages();
}
);
function showMessages()
{
$('#myMess1').gdErrorMessage('1. this is my error message, using gdErrorMessage', {dismiss: true});
$('#myMess2').gdMessage('2. this is my default message', {type: 'default'});
/*
$('#myMess3').gdMessage(
'3. this is my dismissable info message <strong>(after dismissing this message, it will come back using the refresh button)</strong>',
{
type: 'info',
dismiss: true
}
);
*/
// gdInfoMessageClosable() as shown here, is the same as the above commented-out explicit version
$('#myMess3').gdInfoMessageClosable('3. this is my dismissable info message, using gdInfoMessageClosable ' +
'<strong>(after dismissing this message, it will come back ' +
'using the refresh button)</strong>');
$('#myMess4').gdMessage('4. THIS IS MY primary MESSAGE ... fading out after a delay',
{
type: 'primary',
limit: 6000,
fade: 2000
}
);
$('#myMess5').gdMessage('5. this is my success message', {type: 'success'});
$('#myMess6').gdMessage('6. this is my validate message', {type: 'validate'});
$('#myMess7').gdMessage('7. this is my warning message', {type: 'warning'});
$('#myMess8').gdMessage('8. this is my "blank" message (type="")', {type: ''});
$('#myMess9').gdMessage('9. this is my undefined message (no type)');
}
function clearMessages(count)
{
for (var number = 1; number <= count; number++)
{
$('#myMess' + number).gdMessageClear();
}
}
// as the content of the gdMessageContainer div can be over-written,
// this is a quick way to create the divs for the messages
function populateContainer(count)
{
var html = '';
for (var number = 1; number <= count; number++)
{
html += "<div id=\"myMess" + number + "\"></div>";
}
$("#gdMessageContainer").gdMessageClear().html(html);
}
</script>
</body>
</html>
|
Download
