再探 butterfly.js - 拋磚引玉篇（notification.js）

##再探 butterfly.js - 拋磚引玉篇（notification.js）

####事情通過

今天又來研究butterfly.js的源碼(打醬油)，發現了一個notification.js。顧名思義notification就是公告欄嘛，那麼這個notification.js到底有什麼用途呢？題外話：還有十幾天就過年... 個人新年願望是：準時出糧！

####正片

先貼效果圖：

顯然，這真的是一個顯示狀態的公告欄。萬萬沒有想到butterfly.js會內置了這類插件。那個這個notification.js到底要怎麼用呢？下面只貼出關鍵代碼，詳情請自行查閱notification.js。

defaults: {
    duration: 2000,
    autoDismiss: true,
    type: 'info',
    showSpin: false
},

這是notification.js的默認參數，又來顧名思義，duration是時長，autoDismiss是自動消失，type是類型，showSpin是顯示spin(菊花圖)。

---

initialize: function(options) {
    _.extend(this, this.defaults, options);
    this.el.classList.add(this.type);
    this.el.innerHTML = options.message;
    document.body.appendChild(this.el);
    if (this.showSpin) this.spinner = new Spinner({
        left: '20px',
        lines: 7,
        speed: 1.3,
        length: 3,
        radius: 3,
        color: '#666'
    }).spin(this.el);
},

initialize是用來初始化的function。_.extend()這是個承繼的function，new Spinner()是用來定義菊花圖。總的來講，這個initialize就是用來處理默認參數和自定義參數。源代碼就介紹到這裏，具體仍是要自行查閱，原理和實現的方法都比較簡單。

####用法

新建一個butterfly.js項目：

<input type="button" value="click" class="btn">

events:{
	'click .btn':'cl'
},

cl:function(){
	new Notification({
		message: '我是info',
		type: 'info'
	}).show();
}

點擊效果以下：

這個notification的樣式由butterfly.css內控制：

.notification {
  position: fixed;

  bottom: -40px;
  -webkit-transition: bottom 1.25s;
     -moz-transition: bottom 1.25s;
          transition: bottom 1.25s;
}
.notification.active {
  bottom: 0px;
}

初始位置爲bottom: -40px，添加.active後buttom: 0px。因爲transition: bottom 1.25s;，會出現從下至上的出現效果。默認duration爲2s，並且autoDismiss: true，因此在2s後公告欄會消失，移除.active。公告欄的位置由當前的0px，變爲-40px。同理，由於有transition，會有一個從上至下的消失效果。 目前，notification.js提供4種type : well、info、warning、error。具體的操做，還請你們親自動手摺騰一下。