JS消息通知库:Oh Sna
gww3
10年前
Oh Snap! 是一个简单的jQuery/Zepto消息通知库,设计用于移动App上。
Installation
Download ohSnap.js:
- from Github
- with Bower:bower install oh-snap.
Add adiv.ohsnapwhich will contain the alerts :
<div id="ohsnap"></div>
Styling
Furthermore, ohSnap.js creates a div with classes.alert .alert-colorso you will want to have something like :
/* ALERTS */ /* inspired by 推ter Bootstrap */ .alert { padding: 15px; margin-bottom: 20px; border: 1px solid #eed3d7; border-radius: 4px; position: absolute; bottom: 0px; right: 21px; /* Each alert has its own width */ float: right; clear: right; } .alert-red { color: white; background-color: #DA4453; } .alert-green { color: white; background-color: #37BC9B; } .alert-blue { color: white; background-color: #4A89DC; } .alert-yellow { color: white; background-color: #F6BB42; } .alert-orange { color:white; background-color: #E9573F; }
Usage
To call a notification, useohSnap(text, color, icon). Examples :
ohSnap('Oh Snap! I cannot process your card...', 'red', 'icon-alert'); ohSnap('Yeeaahh! You are now registered.', 'green');
To remove a notification, useohSnapX().
Alerts are automatically bound to a click event (internally,ohSnapX()is called when the alert is clicked).