最近搞了一個Spring MVC的網(wǎng)站，使用的是JSP頁面，在前端頁面上，我希望做到，提交一個表單的同時不讓用戶點擊其他的按鈕，我希望能在提交數(shù)據(jù)的同時給出一個遮罩的loading動畫，于是，上網(wǎng)找了很多插件，最后覺得找到了一個不錯的，就是JQuery的showLoading插件。
先來一個效果圖
ShowLoading插件的遮罩效果
使用方法
- 官方下載
- 在你的項目中引入對應的資源，主要有以下兩個文件：
showLoading.css 和 jquery.showLoading.min.js
- 在頁面中引入上面兩個文件
<link href="/css/showLoading.css" rel="stylesheet" media="screen" />
<script src="/js/jquery/jquery.showLoading.min.js"></script>
- 在你的頁面中聲明一個想要用來遮罩的容器，比如自己的一個div，如果需要全屏的話，推薦直接選擇body標簽即可。
<body id="loading"> ...<body>
- 在JS中調(diào)用showLoading()和hideLoading()方法。
jQuery('#loading').showLoading();
jQuery('#loading').hideLoading();
- 修改Loading的動畫圖標，可以修改為自己的gif動畫。
.loading-indicator {
height: 80px;
width: 80px;
background: url( '/img/loading.gif' ); //修改此處即可。
background-repeat: no-repeat;
background-position: center center;
}
