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