<!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资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 12Cr1MoV钢主蒸汽管道焊接工艺.pdf
- 12Cr1MoV小径管焊接操作工艺 - .pdf
- 12Cr1MoV异种钢焊接温度场的数值模拟.pdf
- 12Cr2Mo1R珠光体耐热钢的焊接 - .pdf
- 13MnNiMoNbR复合银板焊接裂纹的修复.pdf
- 12MnNiVR钢板焊接裂纹敏感性的试验研究.pdf
- 12MnNiVR钢热处理性能及大热输入焊接韧性.pdf
- 13MnNiMoNbR钢焊接工艺研究.pdf
- 13MnNiMoNbR压力容器高强钢焊接工艺研究.pdf
- 14Cr1MoR新钢种的焊接试验研究.pdf
- 14Cr1MoR-I-0Cr18Ni10Ti复合钢板的焊接 - .pdf
- 13焊接空心球节点的承载能力分析.pdf
- 14CrMoR耐热钢压力容器的埋弧焊焊接工艺应用 - .pdf
- 14CrlMoR＋0Crl8Nil0Ti复合钢板焊接.pdf
- 14YTJ108 复合保温钢筋焊接网架混凝土墙（CL建筑体系）构造.pdf
- 15×104_m3双盘浮顶油罐底板焊接工艺.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
