Jquery之ShowLoading遮罩组件
2023-09-11 14:14:14 时间
一、遮罩用途及效果
ShowLoading这个jQuery插件设计用于当运行Ajax请求时,可以在屏幕某一特殊区域(id,class或者html标签)覆一张正在加载中的图片。
有时候我们页面调用后台程序时间比较长时,前台页面暴露在用户之下,如果用户点击可能会造成逻辑混乱。这时候,遮罩就起到了很好的效果,在触发后台程序时我们将前台页面遮住,不让操作,同时给予一个程序运行请等待的效果。
遮罩效果:
二、JQuery遮罩UI实现
引用文件:(下载地址)
showLoading.css
jquery.showLoading.js
<link href="style/showLoading.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.showLoading.min.js"></script>
三、使用方法
假设html页面有有一个class为add_test_img的标签,需要通过ajax访问后台,并在add_test_img标签中显示一些相关内容,在内容显示之前,可对add_test_img标签使用遮罩,防止在数据显示之前,被修改其中的内容
//显示遮罩
$(".add_test_img").showLoading();
//ajax调用
$.ajax({
type: "GET",
url: "Api.php",
data: {ApiTarget: 'TestImage', op: 'paginateByClassId', prj_id: prj_id, class_id:class_id, page: index, per_page: items_per_page, user_id: user_id, start_date:start_date_str, end_date:end_date_str},
success: function(response){
//对返回数据进行处理,并显示
//......
//去除遮罩
$(".add_test_img").hideLoading();
},
error: function(xhr) {
//显示失败信息
//......
//去除遮罩
$(".add_test_img").hideLoading();
}
});
推荐一个开发的网盘搜索引擎,360盘搜(www.360panso.com)
相关文章
- jQuery显示隐藏密码插件jquery.toggle-password演示
- jquery获取当前select下拉选的属性值
- JQuery - CheckBox Prop 和 attr 的区别
- jQuery插件 -- Form表单插件jquery.form.js
- jQuery展开收缩2
- 第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件
- 第二百二十六节,jQuery EasyUI,Tree(树)组件
- 第二百二十节,jQuery EasyUI,Slider(滑动条)组件
- 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件
- 第二百零九节,jQuery EasyUI,Pagination(分页)组件
- 第二百零八节,jQuery EasyUI,SplitButton(分割按钮菜单)组件
- 第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件
- 第一百九十三节,jQuery EasyUI,Draggable(拖动)组件
- 第二百零二节,jQuery EasyUI,Layout(布局)组件
- 第一百九十七节,jQuery EasyUI,LinkButton(按钮)组件
- jquery之ajaxfileupload异步上传插件
- Jquery data()学习
- 前端-jQuery-选择标签-选择器和筛选器
- 省市区县三级联动JAVA+MySQL+JQuery
- jquery autocomplete文本自己主动补全
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- jQuery分析(1) - 介绍
- Kendo UI for jQuery 2023 R1 JavaScript 组件
- jquery.js和jquery.min.js的区别介绍