探究 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