最近搞了一个Spring MVC的网站，使用的是JSP页面，在前端页面上，我希望做到，提交一个表单的同时不让用户点击其他的按钮，我希望能在提交数据的同时给出一个遮罩的loading动画，于是，上网找了很多插件，最后觉得找到了一个不错的，就是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中调用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;
}
网友评论