loading插件

這裏介紹一個簡單易用的loading插件
官網:https://github.com/taitems/iOS-Overlay
如圖 ,大概是這個樣子的
圖1


這個插件的作用最主要的就是在取ajax時需要等待,
這個時候顯示一個轉轉轉的東西吸引一下操作人,
讓他等得耐煩一點點


首先引入js和css
如圖2


一個簡單的例子,如下:






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="isoLoadingTest1.WebForm1" %>


<!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 runat="server">
    <title></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- 可選的Bootstrap主題文件(一般不用引入) -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
    <!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>


    <!-- loading js and css -->
    <script src="js/iosOverlay.js" type="text/javascript"></script>
    <script src="js/spin.min.js" type="text/javascript"></script>
    <link href="css/iosOverlay.css" rel="stylesheet" type="text/css" />


    <!-- my script -->
    <script type="text/javascript">




        $(function () {


            $("#myBtn").click(function () {
                
                $.ajax({
                    type: "POST",
                    url: "Handler1.ashx",
                    data: "",
                    beforeSend: function () {
                        var opts = {
                            lines: 13, 
                            length: 11, 
                            width: 5, 
                            radius: 12, 
                            corners: 1, 
                            rotate: 0, 
                            color: '#FFF', 
                            speed: 1, 
                            trail: 60, 
                            shadow: false, 
                            hwaccel: false, 
                            className: 'spinner', 
                            zIndex: 2e9,
                            top: '150',
                            left: 'auto' 
                        };
                        var target = document.createElement("div");
                        document.body.appendChild(target);
                        var spinner = new Spinner(opts).spin(target);
                        overLay = iosOverlay({
                            text: '讀取數據中...',
                            duration: 30000,
                            spinner: spinner
                        });
                    }, //end beforeSend
                    success: function (responseData) {
                    },//end success
                    complete: function () {
                        overLay.hide();
                    }//end complete
                });//end ajax


            })//end click


            




        })//end document.ready




    </script>




</head>
<body>
    <div>
         
         <input type="button" id='myBtn' value='clcik' />


    </div>
</body>
</html>




總結:最重要的就是在 beforSend和comple事件中加上插件的東西



另外我還想說一下:這個loading js 和百度的eChart js是有重命名衝突的,

請將echart js在最後調用  ,

不要在loading js前面調用 , 注意順序


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章