<!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 - Example</h2>
<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>
$(document).ready(
function ()
{
populateContainer(3);
showMessages();
}
);
function showMessages()
{
$('#myMess1').gdErrorMessage('1. This is an error message, using gdErrorMessage', {dismiss: true});
$('#myMess2').gdMessage('2. This is a default message without options', {type: 'default'});
$('#myMess3').gdInfoMessageClosable('3. This is a dismissable info message, using gdInfoMessageClosable');
}
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
