JS消息通知库：Oh Sna

gww3 9年前

Oh Snap! 是一个简单的jQuery/Zepto消息通知库，设计用于移动App上。

Installation

Dependency: jQuery or Zepto.

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).

JS消息通知库：Oh Sna

项目主页：http://www.open-open.com/lib/view/home/1431587226451