您的位置：首页 > Web前端 > JavaScript

spin.js使用

2015-03-19 16:25 141 查看

我们在做Ajax 异步请求的时候，一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ，以便增加用户体验。

今天在网上发现了一个 Spin.js ，该 js 脚本压缩后5k，可以不用任何图片，任何外部的CSS样式，就可以创建一个Ajax Loading 指示器，且兼容以下浏览器：

Spin.js 的在线设计、演示及下载地址为：http://fgnass.github.io/spin.js/

我们可以在链接页面中，动态设置样式同时会自动生成样式的配置脚本：

Spin.js 用法极其的简单：

显示 spinner

//target为显示spiner的父容器

var target=document.getElementById("id")

spinner.spin(target);

隐藏 spinner

spinner.spin();

我们来做一个简单完整的例子，来体验一次吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax Loading Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--原版压缩spin.js-->
<script type="text/javascript" src="js/spin.min.js" ></script>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//opts 可从网站在线制作
var opts = {
lines: 13, // 花瓣数目
length: 20, // 花瓣长度
width: 10, // 花瓣宽度
radius: 30, // 花瓣距中心半径
corners: 1, // 花瓣圆滑度 (0-1)
rotate: 0, // 花瓣旋转角度
direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
color: '#5882FA', // 花瓣颜色
speed: 1, // 花瓣旋转速度
trail: 60, // 花瓣旋转时的拖影(百分比)
shadow: false, // 花瓣是否显示阴影
hwaccel: false, //spinner 是否启用硬件加速及高速旋转
className: 'spinner', // spinner css 样式名称
zIndex: 2e9, // spinner的z轴 (默认是2000000000)
top: 'auto', // spinner 相对父容器Top定位 单位 px
left: 'auto'// spinner 相对父容器Left定位 单位 px
};

var spinner = new Spinner(opts);

$(document).ready(function () {
$("#btnRequest").bind("click", function () {
ajaxRequestData();
})
})

function ajaxRequestData(){
$.ajax({
type: "POST",
timeout: 10000,
dataType: "text",
url: "Index.ashx",
beforeSend: function () {
//异步请求时spinner出现
$("#firstDiv").text("");
var target = $("#firstDiv").get(0);
spinner.spin(target);
},
success: function (msg) {
$("#firstDiv").text(msg);
//关闭spinner
spinner.spin();
},
error: function (e, jqxhr, settings, exception) {
$("#firstDiv").text("请求发生错误...");
//关闭spinner
spinner.spin();
}
})
}
</script>
</head>
<body>
<div id="firstDiv">
</div>
<div id="secondDiv">
<input id="btnRequest" type="button" value="请求数据" class="btnStyle" />
</div>
</body>
</html>
点击“请求数据”按钮，效果如下图所示：



Spin.js 的扩展性也是很强的，可以下载其源码进行修改和扩展，这里是Spin.js 的讨论区 https://github.com/fgnass/spin.js/issues
比如可将Spin.js 扩展成中间显示网站的logo，如下图所示：



代码十分的简单，好了，话不多说，另外再给大家提供一个在线设计 ajax loading gif 的网址：http://www.ajaxload.info/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航