在 /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