为大家分享一个 Ajax Loading —— spin.js

from:http://www.cnblogs.com/lxblog/p/3425599.html

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

         spinner = new Spinner(opts);

        $(document).ready(function () {
            $("#btnRequest).bind(click () {
                ajaxRequestData();
            })
        })
        
         ajaxRequestData(){
            $.ajax({
                type: POST10000textIndex.ashx () {
                    异步请求时spinner出现
                    $(#firstDiv).text("");
                     target  $().get();
                    spinner.spin(target);                    
                },success:  (msg) {
                    $().text(msg);
                    关闭spinner  
                    spinner.spin();
                },error:  (e,jqxhr,settings,exception) {
                    $(请求发生错误...                    spinner.spin();
                }
            })
        }
    bodydiv id="firstDiv"div="secondDiv">
        input ="btnRequest"="button" value="请求数据" class="btnStyle" html>

点击“请求数据”按钮，效果如下图所示：

Spin.js 的扩展性也是很强的，可以下载其源码进行修改和扩展，这里是Spin.js 的讨论区https://github.com/fgnass/spin.js/issues

比如可将Spin.js 扩展成中间显示网站的logo，如下图所示：

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

-==本文源码下载==-

作者： Rising Sun

出处： http://www.cnblogs.com/lxblog/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.

为大家分享一个 Ajax Loading —— spin.js

相关推荐