spin.js的使用

spin.js这个小东西搞了好久才明白该怎么使用，官方文档实在太简单，不考虑我等小白啊~~

例如你有一个js的function，来和后台交互产生数据显示，但需要一定时间，而这段时间不适用loading就会给用户感觉假死。。

那么，spin.js很适合这种场景。

function aaa(a, b, c) {
		var opts = {  
				  lines: 12, // 菊花瓣的数目  
				  length: 7, // 菊花瓣的长度  
				  width: 4, // 菊花瓣的宽度  
				  radius: 10, // 菊花中心的半径  
				  corners: 1, // 菊花瓣的圆滑度(0--1)  
				  rotate: 0, // 让菊花旋转的角度  
				  color: '#000', // 菊花的颜色  
				  speed: 1.6, // 菊花旋转的速度  
				  trail: 58, // 菊花旋转时的余辉  
				  shadow: false, // 是否需要菊花的阴影  
				  hwaccel: false, // 是否需要菊花高速旋转(硬件加速)  
				  className: 'spinner', // 菊花的classname  
				  zIndex: 2e9, // 菊花的z-index值  
				  top: 'auto', // 菊花相对定位的top  
				  left: 'auto', // 菊花相对定位的left  
				  position: 'relative'
				};  
				var target = document.getElementById('bb');  //top和left使用auto，使得菊花定位于bb的正中心
				var spinner = new Spinner(opts).spin(target);  
		$.post(("bbb"), {
			beginDate : a,
			pm : b,
			jc : c
		}, function(data, status) {
			if (data != "Null") {
				$("#myPage").empty();

				$("#bmore").remove();

				$("#myPage").append(data);

				$('#myPage').collapsibleset('refresh');
				spinner.stop();
				$("#myPage ul").each(function(i) {
					$(this).listview();
				});
			} else {
				alert("无数据");
			}
		});
	}

其中菊花的位置看代码说auto是在正中心，但实际总是在（0,0）点，后来才发现因为页面是动态生成，所以菊花显示的时候<div></div>中还没有内容，所以才在边缘，后来将菊花放到上一层就好了。