探究 butterfly 框架中的插件

 

在 /butterfly/js/butterfly-amd.js 中列明瞭butterfly框架有什麼插件

這裏介紹一下加載了的很是有用的小插件：spin.js 和 moment.js。

首先介紹一下 spin.js 這是一個 loading 動畫（菊花圖）的小插件，在加載等待的時候常常用到。特別是 ajax 請求 success 前的 loading 過程。

若是不在 butterfly 中使用，官方文檔已經有很詳細的說明 spin.js 。這裏主要談一談在 butterfly 框架中的使用。

define(['butterfly/view', 'spin'], function(View, Spin){      //在 butterfly 中引入 spin.js 
  return View.extend({

    render: function(){
      console.log('exhibition/index.html render');
    },
    onShow: function(){
      console.log('exhibition/index.html onShow');
      this.showLoadingPage();
    },
    showLoadingPage: function () {
        var opts = {                                    //對 spin 樣式進行設置
          lines: 12, // The number of lines to draw
          length: 7, // The length of each line
          width: 5, // The line thickness
          radius: 10, // The radius of the inner circle
	  corners: 1, // Corner roundness (0..1)
	  rotate: 0, // The rotation offset
	  direction: 1, // 1: clockwise, -1: counterclockwise
	  color: '#000', // #rgb or #rrggbb or array of colors
	  speed: 1, // Rounds per second
	  trail: 100, // Afterglow percentage
	  shadow: true, // Whether to render a shadow
	  hwaccel: false, // Whether to use hardware acceleration
	  className: 'spinner', // The CSS class to assign to the spinner
	  zIndex: 2e9, // The z-index (defaults to 2000000000)
	  top: '50%', // Top position relative to parent
	  left: '50%' // Left position relative to parent
      };

      this.spinner = new Spin(opts);    
      var target = $("#foo").get(0);    //這裏很特別，不知道是否是 butterfly 的問題，必定要帶上.get()來
      this.spinner.spin(target);        //選擇元素，測試過用 $('.foo') 和 $('#foo') 都會把這個元素刪除
  },
  });
});

至此，可愛的菊花圖就出現了！！！

如何實際地用在 ajax 中？ 請慢慢品味亮哥發給你們的 client.js 。

Ps: 在 spin.js 上能夠在線設置樣式，很好玩。

write by xylitol_lin