jquery-announce
Version:
A micro-plugin for displaying unobtrusive announcements.
223 lines (195 loc) • 5.44 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>jQuery Announce - A micro-plugin for displaying unobtrusive announcements.</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
font-size: 16px;
color: #333;
padding: 20px;
}
h1 {
margin-top: 0;
}
a {
color: #09d;
}
.muted {
color: #999;
}
button {
border: none;
border-radius: 4px;
background: #09d;
box-shadow: none;
color: white;
-webkit-appearance: none;
padding: 10px 20px;
font-family: inherit;
font-size: inherit;
cursor: pointer;
}
button:hover,
button:focus,
button:active {
background-color: #08c;
outline: none;
}
button + button {
margin-left: 10px;
}
.announce.announce-custom-1 {
top: 10px;
right: 10px;
left: auto;
border-radius: 4px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>jQuery Announce</h1>
<p class="muted">
A micro-plugin for displaying unobtrusive announcements.
</p>
<p>
These announcements are highly customizable. They ship with very basic styles so you can easily
override them or write your own. You can even customize the show/hide animation. Check out the
docs to learn more.
</p>
<p>
<a href="https://github.com/Shadowsith/jquery-announce/">
Docs, download, and bugs
</a>
</p>
<h2>Examples</h2>
<p>
<button type="button" class="info">Info</button>
<button type="button" class="danger">Danger</button>
<button type="button" class="warning">Warning</button>
<button type="button" class="success">Success</button>
<button type="button" class="primary">Primary</button>
<button type="button" class="secondary">Secondary</button>
<button type="button" class="light">Light</button>
<button type="button" class="dark">Dark</button>
</p>
<p>
<button type="button" class="outline">Outline</button>
<button type="button" class="bottom">Bottom</button>
<button type="button" class="left">Left</button>
<button type="button" class="right">Right</button>
<button type="button" class="center">Center</button>
</p>
<p>
<button type="button" class="news">New Color</button>
<button type="button" class="custom">Custom</button>
<button type="button" class="colors_on">Custom Colors ON</button>
<button type="button" class="colors_off">Custom Colors OFF</button>
</p>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-announce@1.0.6/jquery.announce.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-announce@1.0.6/jquery.announce.min.js"></script>
<script>
$(function() {
$('.info').on('click', function() {
$.announce.info('It’s dangerous to go alone! Take this.');
});
$('.danger').on('click', function() {
$.announce.danger('Dangerous roads are ahead!');
});
$('.success').on('click', function() {
$.announce.success('We made it out!');
});
$('.warning').on('click', function() {
$.announce.warning('Hey, be careful out there!');
});
$('.primary').on('click', function() {
$.announce.primary('First!');
});
$('.secondary').on('click', function() {
$.announce.secondary('Hey, I am the second one');
});
$('.light').on('click', function() {
$.announce.light('It’s very bright!');
});
$('.dark').on('click', function() {
$.announce.dark('Dark night is coming!');
});
$('.outline').on('click', function() {
$.announce.info({
message: 'Outline notification',
outline: true,
outlineColor: 'white'
});
});
$('.bottom').on('click', function() {
$.announce.info({
message: 'Bottom notification',
vPos: 'bottom'
});
});
$('.left').on('click', function() {
$.announce.info({
message: 'Left notification',
hPos: 'left'
});
});
$('.right').on('click', function() {
$.announce.info({
message: 'Right notification',
hPos: 'right'
});
});
$('.center').on('click', function() {
$.announce.info({
message: 'Centered notification',
vPos: 'center'
});
});
$('.news').on('click', function() {
$.announce.info({
message: 'News: Infobox with custom color',
customColors: true,
colors: {info: 'purple', text: 'mistyrose'}
});
});
$('.colors_on').on('click', function() {
$.announce.defaults.customColors = true;
});
$('.colors_off').on('click', function() {
$.announce.defaults.customColors = false;
});
// Custom
$('.custom').on('click', function() {
$.announce.say('custom-1', {
message: 'Custom announcements are <em>easy!</em>',
html: true,
show: function() {
var defer = $.Deferred();
$(this).show(250, function() {
defer.resolve();
});
return defer;
},
hide: function() {
var defer = $.Deferred();
$(this).hide(250, function() {
defer.resolve();
});
return defer;
}
});
});
});
</script>
</body>
</html>