JQuery showLoading插件简明教程

最近搞了一个Spring MVC的网站，使用的是JSP页面，在前端页面上，我希望做到，提交一个表单的同时不让用户点击其他的按钮，我希望能在提交数据的同时给出一个遮罩的loading动画，于是，上网找了很多插件，最后觉得找到了一个不错的，就是JQuery的showLoading插件。

先来一个效果图

ShowLoading插件的遮罩效果

使用方法

1. 官方下载
2. 在你的项目中引入对应的资源，主要有以下两个文件：

showLoading.css 和 jquery.showLoading.min.js

3. 在页面中引入上面两个文件

4. 在你的页面中声明一个想要用来遮罩的容器，比如自己的一个div，如果需要全屏的话，推荐直接选择body标签即可。

 ...

5. 在JS中调用showLoading()和hideLoading()方法。

jQuery('#loading').showLoading();
jQuery('#loading').hideLoading();

6. 修改Loading的动画图标，可以修改为自己的gif动画。

.loading-indicator { 
         height: 80px; 
         width: 80px; 
         background: url( '/img/loading.gif' ); //修改此处即可。 
         background-repeat: no-repeat; 
         background-position: center center;
}

怎么样，很简单吧！

点我在我的个人网站中同步阅读