以下是 jQuery+CSS3扁平消息通知 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset='gb2312'>
<title>jQuery+CSS3��ƽ��Ϣ֪ͨ</title>
<link rel="stylesheet" href="css/notifications.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<header>
<h1>jQuery+CSS3��ƽ�����Ϣ֪ͨ</h1>
<h2>7�ͬ��ʽ, 5�ͬ����Ч��, ��JavaScript API</h2>
</header>
<main>
<section>
<h1>Overview</h1>
<p>This plugin includes a total of 8 different types of notifications.</p>
<div class='examples'>
<aside class="notification-info">
<h1>Just letting you know</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut <a href="#">consequuntur</a> quisquam quo pariatur. Vitae qui modi magnam ex <a href="#">molestias</a> et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-success">
<h1>That worked - Yay!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, minus <a href="#">recusandae aut consequuntur</a> quisquam quo pariatur. Vitae qui modi magnam ex molestias et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-warning">
<h1>Hey buddy, be careful</h1>
<p>Lorem ipsum <a href="#">dolor sit</a> amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut consequuntur quisquam quo pariatur. Vitae qui modi magnam ex molestias et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-error">
<h1>Whoops! Something went wrong</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut consequuntur quisquam quo pariatur. Vitae qui modi magnam ex molestias et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-message">
<img src="images/avatar-small.jpg" alt="">
<h1>One New Message</h1>
<p>Hey there, I just wanted to let you know that notification boxes can contain these fancy square images on the side.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-purchase">
<h1>Thanks for purchase :)</h1>
<p>Lorem ipsum dolor sit amet,
elit. Unde, recusandae aut consequuntur quisquam quo pariatur. Vitae qui modi magnam ex molestias et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-neutral">
<h1>Neutral Notification is Neutral</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut consequuntur quisquam quo pariatur. Vitae qui modi magnam ex molestias et reiciendis.</p>
<button class="close">Close</button>
</aside>
</div>
</section>
<section>
<h1>Animations</h1>
<p>With this item, you get 5 different animations. You can choose any of these for any of the notification types.</p>
<div class="examples">
<aside class="notification-info animation-fade">
<h1>Fade Animation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut <a href="#">consequuntur</a> quisquam quo pariatur. Vitae qui modi magnam ex <a href="#">molestias</a> et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-info animation-fadeup">
<h1>Fade Up</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut <a href="#">consequuntur</a> quisquam quo pariatur. Vitae qui modi magnam ex <a href="#">molestias</a> et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-info animation-fadedown">
<h1>Fade Down</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut <a href="#">consequuntur</a> quisquam quo pariatur. Vitae qui modi magnam ex <a href="#">molestias</a> et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-info animation-scaledown">
<h1>Scale Down</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut <a href="#">consequuntur</a> quisquam quo pariatur. Vitae qui modi magnam ex <a href="#">molestias</a> et reiciendis.</p>
<button class="close">Close</button>
</aside>
<aside class="notification-info animation-scaleup">
<h1>Scale Up</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, nostrum, dolorem, et error ducimus labore minus recusandae aut <a href="#">consequuntur</a> quisquam quo pariatur. Vitae qui modi magnam ex <a href="#">molestias</a> et reiciendis.</p>
<button class="close">Close</button>
</aside>
</div>
</section>
<section>
<h1>Positions</h1>
<img src="images/positions.png" alt="positions" style='width: 40%; float: left; margin-bottom: 3rem;'>
<p>Notifications can be positioned fixed in every of the four corners of the screen. This is an optional feature, you can still place the boxes anywhere else on the page if you prefer that.</p>
</section>
<section>
<h1>Javascript API</h1>
<p>This item allows you to fire your own custom notifications via a simple JavaScript API. To give you an idea of the possibilities, here's a little generator.</p>
<label for='type'>Type</label>
<select name='type' id='type'>
<option value="info">Info</option>
<option value="success">Success</option>
<option value="warning">Warning</option>
<option value="error">Error</option>
<option value="purchase">Purchase</option>
<option value="message">Message</option>
<option value="neutral">Neutral</option>
</select>
<label for='position'>Position</label>
<select id='position' name='position'>
<option value="topright">Top Right</option>
<option value="bottomright">Bottom Right</option>
<option value="bottomleft">Bottom Left</option>
<option value="topleft">Top Left</option>
</select>
<label for='animation'>Animation</label>
<select id='animation' name='animation'>
<option value="fade">Fade</option>
<option value="fadeup">Fade Up</option>
<option value="fadedown">Fade Down</option>
<option value="scaleup">Scale Up</option>
<option value="scaledown">Scale Down</option>
<option value="slide">Slide</option>
</select>
<label for='img'>Image URL (optional)</label>
<input type="text" id='img' name='img' value='images/avatar-small.jpg'>
<label for='title'>Title</label>
<input type="text" id='title' name='title' value='Notification Title'>
<label for='text'>Text</label>
<textarea name="text" id="text" cols="30" rows="10">
This is the text for my awesome notification box. It can contain any html content.
</textarea>
<button class='fire'>Fire Notification</button>
</section>
</main>
<script src="js/jquery.min.js"></script>
<script src='js/notifications.js'></script>
<script>
$('.fire').click(function(){
fireNotification({
position: $('#position').val(),
animation: $('#animation').val(),
type: $('#type').val(),
img: $('#img').val(),
heading: $('#title').val(),
text: $('#text').val()
});
});
</script>
</body>
</html>
JS代码(notifications.js):
$(document).ready(function(){
$('.close').click(function(){
var box = $(this).parent();
box.addClass('inactive');
window.setTimeout(function(){
box.remove()}
,700)}
)}
);
var fireNotification = function(config){
$('body').append('<aside class="notification-' + config.type + ' ' + config.position + ' animation-' + config.animation + '"><img alt="" src="' + config.img + '"/><h1>' + config.heading + '</h1><p>' + config.text + '</p><button class="close">Close</button></aside>');
$('.close').click(function(){
var box = $(this).parent();
box.addClass('inactive');
window.setTimeout(function(){
box.remove()}
,700)}
)}
CSS代码(demo.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline;}
html{line-height:1;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle;}
q,blockquote{quotes:none;}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none;}
a img{border:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
main,header{padding:5%;}
strong{font-weight:bold;}
header{background:#50c1f2;color:white;}
header h1,header h2{padding-left:1rem;font-family:sans-serif;}
header h1{font-size:3rem;font-weight:bold;}
header h2{font-weight:bold;font-size:1.6rem;margin-top:1rem;opacity:.7;}
section{margin-bottom:5rem;}
section h1{font-weight:bold;font-size:1.8rem;margin-bottom:1rem;-moz-column-span:all;}
section p,section h1{margin-left:1rem;font-family:sans-serif;}
section p{margin-bottom:1rem;}
section .examples{-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2;}
section input,section textarea,section select,section button{display:block;margin-bottom:1rem;padding:.5rem;width:40%;}
section{clear:both;}
label{font-family:sans-serif;font-size:.8rem;margin-bottom:.3rem;color:#3981f2;}
section section{margin-bottom:0;}
分享到QQ
分享到微博
微信扫一扫
