官網: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前面調用 , 注意順序