jnoty
Version:
jnoty is a jQuery plugin that show OS X's Growl like notification in web app.
95 lines (91 loc) • 3.45 kB
HTML
<html>
<head>
<title>jnoty</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jnoty.min.js"></script>
<link rel="stylesheet" type="text/css" href="jnoty.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body style="color:#112548;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href>jnoty</a>
</nav>
<div class="container" style="margin-top:10%;">
<div class="d-flex align-item-center flex-column">
<div>
<h1 style="font-size:24px;">jnoty is a jQuery plugin that show OS X's Growl like notification in web app.</h1>
</div>
<div class="mt-4 mb-4">
<code class="w-50">
$.<span style="color:#5243AA;">jnoty</span>(<span style="color:#FF8B00;">"Your email was verified."</span>, {<br>
<span style="color:#5243AA;">sticky:</span> <span style="color:#FF8B00;">true,</span><br>
<span style="color:#5243AA;">header:</span> <span style="color:#FF8B00;">'Success',</span><br>
<span style="color:#5243AA;">theme:</span> <span style="color:#FF8B00;"> 'jnoty-success',</span><br>
});<br>
</code>
</div>
<div class="d-flex align-items-end">
<div style="width:13%;">
<span>Select theme</span>
<select class="custom-select" name="selector">
<option selected value="success">Success</option>
<option value="warning">Warning</option>
<option value="info">Information</option>
<option value="danger">Danger</option>
</select></div>
<div>
<button class="btn btn-success ml-1" onclick="demo();">Show me the demo</button>
</div>
</div>
</div>
</div>
<script>
function demo() {
var theme = $('select[name=selector]').val();
switch (theme) {
case "success":
$.jnoty("Your email was verified.", {
sticky: true,
header: 'Success',
theme: 'jnoty-' + theme,
icon: 'fa fa-check-circle fa-2x'
});
break;
case "warning":
$.jnoty("I am a warning message", {
sticky: true,
header: 'Warning',
theme: 'jnoty-' + theme,
icon: 'fa fa-info-circle fa-2x'
});
break;
case "info":
$.jnoty("I am a info message", {
sticky: true,
header: 'Information',
theme: 'jnoty-' + theme,
icon: 'fa fa-info-circle fa-2x'
});
break;
case "danger":
$.jnoty("I am a warning message", {
sticky: true,
header: 'Danger',
theme: 'jnoty-' + theme,
icon: 'fa fa-info-circle fa-2x'
});
break;
default:
$.jnoty("I am a info message", {
sticky: true,
header: 'Information',
theme: 'jnoty-' + theme,
icon: 'fa fa-info-circle fa-2x'
});
}
}
</script>
</body>
</html>