<!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>
<div style="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、世界之窗。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery+CSS3扁平消息通知.zip （11个子文件） 
jQuery+CSS3扁平消息通知 jiaoben1523 css 
notifications.css 32KB fonts 
entypo.svg 471B entypo.ttf 35KB entypo.woff 21KB entypo.eot 35KB demo.css 2KB images 
avatar-small.jpg 16KB
positions.png 11KB
index.html 8KB js jquery.min.js 91KB notifications.js 671B资源评论
